Claude Code skills for React and React Native
Claude Code knows React. It does not know which React. It may write class components in a hooks codebase, loose any types in a strict TypeScript repo, or web code in a React Native app. Performance advice drifts between versions.
A skill is a SKILL.md file with instructions Claude Code loads when a task matches. A good React skill sets the rules one time, so your prompts stay short.
Our database holds 220 open-license skills built for React, and 459 match a typical React project (SkillsPicker React page). These 6 picks cover web React and React Native. Each one exists on GitHub today, and we read its SKILL.md on October 23, 2026.
4 picks for React on the web
1. vercel-react-best-practices (vercel-labs/agent-skills, MIT) React and Next.js performance rules from Vercel Engineering: data fetching, bundle size and re-renders.
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --agent claude-code
2. typescript-react-patterns (AsyrafHussin/agent-skills, MIT) Typed components, hooks, events, refs and generic components. Use it when TypeScript errors pile up.
npx skills add AsyrafHussin/agent-skills --skill typescript-react-patterns --agent claude-code
3. review-frontend (existential-birds/beagle, Apache-2.0)
A React and TypeScript code review split into areas. Its SKILL.md sets disable-model-invocation: true, so Claude Code does not load it on its own. You call it by name when you want a review.
npx skills add existential-birds/beagle --skill review-frontend --agent claude-code
4. webapp-testing (anthropics/skills) Tests a local web app with Playwright: checks the UI, captures screenshots and reads browser logs. Read the license file in the repo before you use it.
npx skills add anthropics/skills --skill webapp-testing --agent claude-code
2 picks for React Native and Expo
5. react-native-best-practices (callstackincubator/agent-skills, MIT) Performance rules for React Native: FPS, startup time, bundle size, memory leaks, re-renders and animations.
npx skills add callstackincubator/agent-skills --skill react-native-best-practices --agent claude-code
6. expo-overview (expo/skills, MIT)
The entry point for Expo and EAS tasks. It routes Claude Code to the right Expo skill for the job. Its SKILL.md says not to load it for a bare React Native project with no expo dependency.
npx skills add expo/skills --skill expo-overview --agent claude-code
For more mobile picks, see our React Native and Expo page.
The npx skills command comes from the open skills CLI. The --agent claude-code flag puts the skill where Claude Code looks for it.
Where Claude Code loads skills
Claude Code reads project skills from .claude/skills/ in your repo and personal skills from ~/.claude/skills/ in your home folder (Claude Code skills docs). Commit project skills so the whole team gets them. Our guide on how to install Claude Code skills covers each method.
What to add next
- Your framework. On Next.js, see the best Claude Code skills for Next.js.
- Your UI kit and styling. Tailwind, shadcn/ui, or your design system.
- Your state and data tools. Your router, your data fetching library, your forms library.
These differ per repo, which is why a generic top 10 list misses. For MCP servers versus skills, see Claude skills vs MCP.
Get picks for your exact repo
The free scan reads your repo URL or a description and shows how many skills match, plus 2 picks. The full curated list costs $9, paid one time: up to 30 picks ranked, with install commands, a reason for each and notes on overlaps (pricing).
FAQ
What are the best Claude Code skills for React? For web React, start with a best practices skill, a TypeScript skill and a review skill. For React Native, add react-native-best-practices, and expo-overview if you use Expo. Match the rest to your stack.
Does the React team publish a skill? None of the picks above come from the React team. vercel-react-best-practices comes from the vercel-labs/agent-skills repo. expo-overview comes from the expo/skills repo. The others come from community repos.
Do these skills work in Cursor or Codex?
SKILL.md is a shared format. Change the --agent flag to cursor or codex and the CLI installs to that agent's folder.
How many skills should I install? Start with 3 to 5 that match your stack. A pile of overlapping skills can give Claude Code mixed instructions.
Checked 2026-10-23. Prices and policies change. Confirm on the source before you buy.
Sources
- https://skillspicker.com/skills/react/
- https://skillspicker.com/skills/react-native-expo/
- https://skillspicker.com/pricing/
- https://code.claude.com/docs/en/skills
- https://github.com/vercel-labs/skills
- https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
- https://github.com/AsyrafHussin/agent-skills/blob/main/skills/typescript-react-patterns/SKILL.md
- https://github.com/existential-birds/beagle/blob/main/plugins/beagle-react/skills/review-frontend/SKILL.md
- https://github.com/anthropics/skills/blob/main/skills/webapp-testing/SKILL.md
- https://github.com/callstackincubator/agent-skills/blob/main/skills/react-native-best-practices/SKILL.md
- https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-overview/SKILL.md
More guides
- Best Claude Code skills for Next.js: 3 free picks and how to install them (2026)
- Best Claude Code skills for Python: 6 free picks and how to install them (2026)
- Claude skills vs MCP servers: what each one does and when to use both (2026)
- Codex skills: where Codex loads them, how to install, and how to use Claude skills in Codex (2026)
- Gemini CLI skills: where they live, how to install them, and 3 to try (2026)
- How to install Claude Code skills: folders, GitHub, and global installs (2026)