the problem with react + claude
Claude knows React. It doesn't know your React.
Claude has seen millions of React codebases. That's also the problem. It defaults to the average of what it's seen — which means mixing App Router and Pages Router conventions, reaching for deprecated patterns, generating UI that looks functional but not designed.
React skills encode the specifics: which patterns to use, which to avoid, which libraries to reach for, and what the output should look like. They're not generic instructions — they're the accumulated knowledge of the teams and companies that built and maintain the tools you're using.
core skills
The essentials for any React project
69 explicit rules from Vercel's own engineering team, covering RSC boundaries, rendering strategies, data fetching, image handling, font loading, and Suspense usage.
Why it matters: Claude frequently mixes App Router and Pages Router patterns in the same file, or uses getServerSideProps in an App Router project. This skill encodes the 69 checks Vercel's team uses internally. Run it on any React project before shipping.
npx skillsadd vercel-labs/agent-skills/react-best-practicesComprehensive routing, error handling, and async component patterns for Next.js — covering the patterns that changed most between Pages Router and App Router.
Why it matters: The App Router introduced async server components, new data fetching patterns, and a different error boundary model. Without this skill, Claude applies Page Router knowledge to App Router projects. The output compiles but performs badly.
npx skillsadd vercel-labs/next-skills/next-best-practicesThe official shadcn skill. Covers adding components via CLI, correct composition patterns, theming, and the variants system.
Why it matters: Claude knows shadcn exists but guesses at the API. It generates components by writing custom JSX instead of using the CLI, or composes them incorrectly. This skill is maintained by shadcn directly — it's the actual correct usage.
npx skillsadd shadcn-ui/ui/skills/shadcnui and design
Making Claude generate UI that looks designed
The default aesthetic problem is real: Claude generates React UI that looks like a Bootstrap template from 2020. Same card structures, same button styles, same hero sections. These two skills fix that.
Anthropic's production design principles: typography hierarchy, spacing systems, colour contrast rules, component weight decisions, and when not to use decorative elements.
Why it matters: This is the skill Anthropic uses internally when building Claude.ai. The difference between output with and without this skill is immediately visible — one looks like AI made it, the other looks like a designer reviewed it.
npx skillsadd anthropics/skills/frontend-designVercel's web interface design guidelines as an auditing framework: colour contrast ratios, focus state requirements, motion constraints, typographic consistency, and interaction patterns.
Why it matters: Use this for code review, not just generation. Ask Claude to audit a component before shipping — it returns a prioritised list of issues with specific fixes, not vague suggestions.
npx skillsadd vercel-labs/agent-skills/web-design-guidelinescomponent libraries
For specific stacks
Production patterns for React Native and Expo: list performance, animations, navigation, state management, and monorepo structure.
Why it matters: React Native has different performance constraints to web React. This skill stops Claude applying web patterns to native — the common failure mode when someone asks Claude to 'add a FlatList' and gets a slow implementation.
npx skillsadd vercel-labs/agent-skills/react-native-skillsdebugging
When things go wrong
Four-phase debugging: root cause investigation, pattern analysis, hypothesis testing, then implementation. Claude never patches without finding the root cause.
Why it matters: Without this skill, Claude patches the symptom — adds a null check, catches the error, wraps in a try/catch. The bug appears fixed. It comes back three days later. This skill forces root cause analysis before any code is written.
npx skillsadd obra/superpowers/systematic-debugginginstalling a full stack
Install everything at once with the Next.js SaaS stack
If you're building a Next.js application, the Next.js SaaS stack bundles the core React skills with database patterns (Supabase) and testing. Install the skills you need in one pass:
npx skillsadd vercel-labs/agent-skills/react-best-practices npx skillsadd vercel-labs/next-skills/next-best-practices npx skillsadd anthropics/skills/frontend-design npx skillsadd supabase/agent-skills/supabase-postgres-best-practices
All four load when Claude starts a session. Your Next.js project has React conventions, routing patterns, design standards, and database patterns covered before you write the first prompt.
Browse all React skills
Filter by React or Next.js on theskills.directory to see every skill relevant to your stack.