StealIt

23 skills · 11 publishers

Claude skills for React

React patterns, Server Components, hooks and performance rules, including Vercel's official React best-practices skill.

The best Claude skills for React

  1. 1

    Vercel React Best Practices

    Vercel 34k

    React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance…

    npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
  2. 2

    Vercel React View Transitions

    Vercel 34k

    Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill…

    npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions
  3. 3

    React Modernization

    Seth Hobson 42k

    Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to…

    npx skills add wshobson/agents --skill react-modernization

All 23 React skills

23 skills

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k

React Modernization

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React…

FrontendSeth Hobson42k

React State Management

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state…

FrontendSeth Hobson42k

React Vite Dashboard

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

FrontendGoogle Labs8.7k

Stitch React Components

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking…

FrontendGoogle Labs8.7k

Taste SkillTop pick

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…

Design & UILeon110k

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Animation Performance

Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops…

Design & UIEmil Kowalski54k

Ask Sonner

Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts…

Design & UIEmil Kowalski54k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…

FrontendSeth Hobson42k

Web Component Design

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries…

Design & UISeth Hobson42k

Stitch Code To Design

Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill…

Design & UIGoogle Labs8.7k

Stitch Extract Design MD

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files…

Design & UIGoogle Labs8.7k

Stitch Extract Static Html

Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state…

Design & UIGoogle Labs8.7k

Supabase

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR…

Data & DatabasesSupabase3k

EAS Observe

Use for anything related to EAS Observe - adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive and ObserveInteractiveMarker, the useObserve…

MobileExpo4k

Expo Data Fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support…

MobileExpo4k

Expo Web To Native

Migrate an existing web React app to a native iOS/Android app with Expo. Use when the user wants to turn a website into a mobile app, port a Next.js/Vite/CRA React codebase to…

MobileExpo4k

Stripe Apps

Build, modify, or review Stripe Apps and extensions using the relevant documentation and reference guides. Use for custom Stripe Dashboard UI, stripe-app.yaml…

Backend & APIsStripe2k

News Reaction Failure Analyzer

Judge whether a market FAILED to react to news favorable to a crowded speculative position — step 2 of Jason Shapiro's COT contrarian process. Consumes a cot-contrarian-detector…

Finance & Tradingtradermonty3.6k

Vidtsx 2d Generator

Generate production-ready 2D TSX video files for VidTSX (Remotion-based) from a shot, scene, or video description. Use whenever the user wants to create or generate a VidTSX…

Video & MotionLearnWithHasan364

About these React skills

This page collects every skill in the directory that covers React: 23 from 11 publishers, including official skills from Google Labs, Vercel, Expo and Anthropic. Each one links back to its original GitHub repository, so you always get the author's latest version. They span Design & UI, Frontend, Backend & APIs and Mobile.

Publishers on this page

Questions about Claude skills for React

What is the best Claude skill for React?

Our top pick is Vercel React Best Practices by Vercel, from a repository with 34k GitHub stars. Vercel React View Transitions and React Modernization round out the top three. Skills are ranked by the popularity of their source repository, with hand-picked favorites first, and official skills from Google Labs, Vercel, Expo and Anthropic carry a badge.

How do I install a Claude skill for React?

Open a skill's page and run its install command in your project folder, for example npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices. You can also download any skill as a ZIP and add it to Claude Code or upload it to the Claude app.

The install guide walks through every method.

Are Claude skills for React free?

Yes. All 23 skills on this page are open source and free to use, and most are MIT licensed. You need a Claude plan that supports skills, or a coding agent that reads SKILL.md files.

Do these skills work in Claude Code and the Claude app?

Yes. A skill is a folder with a SKILL.md file, and the same folder works in Claude Code, the Claude desktop and web apps (on paid plans with code execution turned on) and the Claude API. Many also work in other agents that support the Agent Skills format, such as Cursor and OpenAI Codex. Skills that ship scripts need somewhere Claude can run code.

How many Claude skills for React are there?

We list 23 from 11 publishers, last updated November 4, 2026. The list refreshes from GitHub as publishers release new skills.

Related use cases

All use cases →