Best AI Agent Skills for React Developers (2026)

Ask Claude Code to build a React dashboard with no skill installed and you know exactly what comes back: a bg-gray-50 page, a card grid with rounded-lg shadow-md, Inter at three weights, and a blue primary button. It works. It also looks like the other four hundred thousand things generated that week.

Agent skills are the fix, and for React work specifically they split into four jobs: making the output look like a person designed it, wiring real component libraries correctly, handling framework-specific patterns, and testing what got built. Below are the ones worth installing, with install counts and trust tiers pulled from our directory so you can see what is actually being adopted versus what just has GitHub stars.

The React skill stack at a glance

The install column is the one to read first. Star counts on these repos are mostly inherited from the underlying project (shadcn/ui has 120,000 stars because it is shadcn/ui, not because the skill is beloved), while install counts measure the skill itself.

1. Frontend Design: the one to install first

claude skill add anthropics/skills/frontend-design

Repo: anthropics/skills/frontend-design. Official tier, MIT, audited, 277,000 installs, which makes it the most-installed skill in this category by a wide margin.

It targets the exact failure mode described up top. Instead of nudging the model toward "clean and modern," it pushes typography systems, deliberate spatial composition, and CSS animation as first-class concerns. The practical effect on React work is that generated components stop defaulting to the same three Tailwind utilities and start using a type scale that has more than one idea in it.

It is not a component library and it does not know your design system. Pair it with Theme Factory if you need tokens, or with shadcn if you need real primitives. We covered it in depth in the Frontend Design skill review, and the install walkthrough has the setup details.

2. Shadcn UI Builder: for teams already on shadcn

claude skill add shadcn-ui/ui

Repo: shadcn-ui/ui. Verified tier, MIT, 165,000 installs.

The value here is narrower than the headline suggests, and that is a compliment. Claude already knows shadcn/ui exists. What it does badly without help is composition: nesting Form with react-hook-form and Zod resolvers correctly, wiring DataTable against TanStack Table, and keeping theme variables consistent instead of hardcoding a slate palette halfway down the file.

That is what this skill fixes. If your codebase is not on shadcn, skip it. Installing component-library skills you do not use adds context noise for zero benefit.

3. Vercel AI SDK: if the React app talks to a model

claude skill add vercel/ai

Repo: vercel/ai. Official tier, Apache-2.0, audited, 85,000 installs.

Streaming UI is where hand-written AI React code goes wrong most often: race conditions between the stream and component state, tool calls that never resolve, structured output parsed with a regex. The skill covers streaming, tool use, structured output, RAG patterns, and Next.js deployment specifics.

Worth noting that this is genuinely framework-coupled. If you are on Vite with a custom fetch layer, the patterns still teach you something but the code will need translation.

4. Theme Factory: tokens before components

claude skill add anthropics/skills/theme-factory

Repo: anthropics/skills/theme-factory. Official, MIT, audited, 41,000 installs.

Generates full theme systems: color palettes, typography scales, spacing tokens, exported as CSS variables or a Tailwind config. The reason it belongs in a React stack rather than a design one is order of operations. Generate the token layer first, then build components against it, and every subsequent generation inherits consistent values instead of inventing a new gray each time.

Teams building an actual design system should also read our design systems skills roundup, which covers the governance side.

5. Fullstack Dev Skills: the bundle

claude skill add jeffallan/claude-skills

Repo: jeffallan/claude-skills. Verified, MIT, 17,000 installs. Ships 66 skills spanning React, Node, databases, APIs, DevOps, testing, and system design.

Bundles cut both ways. You get broad coverage from one install, and you also load a lot of surface area you will never invoke. My rule: install bundles when you are working across the stack in one session, and prefer single-purpose skills when you are deep in one layer for a week.

6. Playwright Skill: close the loop on what got built

claude skill add lackeyjb/playwright-skill

Repo: lackeyjb/playwright-skill. Verified, MIT, 5,000 installs.

Model-invoked browser automation, meaning Claude writes and runs the script itself rather than handing you a test file to execute. For React work the payoff is verification: the agent builds a form, then drives a browser to confirm the validation actually fires.

One honest caveat. Our directory records its last update as December 2025, which makes it the stalest skill on this list. Playwright itself moves fast. Check the repo before you rely on it for anything current, and note that Microsoft's official Playwright skill (audited, Apache-2.0) exists as an alternative. For the broader testing picture, see agent skills for writing unit tests.

7 and 8. Expo and Callstack: React Native

claude skill add expo/skills
claude skill add callstackincubator/agent-skills

Repos: expo/skills and callstackincubator/agent-skills. Both verified, both MIT.

Expo's official skills cover EAS Build, EAS Submit, app config, and Expo Router. Callstack's come from React Native core contributors and lean toward best practices, upgrade guides, and performance work. They overlap less than you would expect: Expo owns the toolchain, Callstack owns the idioms. Running both is reasonable.

Our Expo skills review has the longer assessment.

The two with a caveat

Taste Skill (Leonxlnx/taste-skill) promises to stop the agent generating generic slop, which is a real problem and a fair pitch. Two things to weigh: our directory lists its license as Unknown, and its install count as zero against 74,000 stars on the parent repo. Unknown licensing is a genuine blocker in a commercial codebase. Read the repo before you ship anything it generates.

Preline (htmlstreamofficial/preline) gives you prebuilt Tailwind UI patterns. License reads as Other in our data, last updated May 2026. Useful if you already use Preline, unnecessary if you do not.

What I would install

Three skills, not ten:

Frontend Design for output that does not look generated. Theme Factory if the project needs a token layer, which most do. Then whichever library skill matches your codebase, which for most teams in 2026 means shadcn.

Add Vercel AI SDK only if the app streams model output, and a Playwright skill once you have enough surface area that manual checking is slowing you down. Everything else is situational. Skills consume context, and five well-chosen ones beat twelve that half-apply.

Before installing anything from the community tier, open the repo and read the SKILL.md. A skill is instructions the model follows with your file system in reach, and "verified" in a directory means the source was checked, not that the behavior was proven safe for your setup.

For tooling that sits alongside these, see our full list for developers, and the older frontend developer skills roundup for context on how this category has shifted.

FAQ

Do agent skills work in Cursor and Windsurf, or only Claude Code? The claude skill add format is Claude Code's. Some of these repos ship rules files that other editors can read, but portability varies per skill. Check the repo structure before assuming it transfers.

Will installing ten skills make Claude better at React? No, and it can make things worse. Each skill adds instructions that compete for attention. Two or three focused skills consistently outperform a large pile, especially on longer sessions where context is already tight.

Is it safe to install a community-tier skill? Treat it like adding a dependency, because that is what it is. Skills instruct an agent that can read and write your files. Official and verified tiers have had their source reviewed. Community and unreviewed entries should be read line by line first, and an Unknown license means legal has an opinion before you ship.

Do these help with React Server Components? Partially. The Vercel AI SDK skill covers Next.js app-router patterns including server components, and the general design skills are framework-agnostic. There is no dedicated RSC skill in our directory that I would recommend yet.

What if my team uses Material UI or Chakra instead of shadcn? Skip the shadcn skill and lean harder on Frontend Design plus Theme Factory, which are library-agnostic. A generic design skill plus your library's own docs in context beats a skill written for a library you do not use.