MCP CheckClaude skills for React
The 50 strongest of 547 React skills on GitHub. Skills built for React come first; no repository gets more than 3 spots. Each links to its folder; copy it into ~/.claude/skills/ to use it.
vercel react best practices
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 patterns. Triggers on tasks involving React components,…
CherryHQ/cherry-studio★ 53kAGPL-3.0Folder:
vercel-react-best-practicesreact 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 Hooks, or upgrading to latest React versions.
wshobson/agents★ 42kMITFolder:
react-modernizationreact native architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
wshobson/agents★ 42kMITFolder:
react-native-architecturereact 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 management solutions.
wshobson/agents★ 42kMITFolder:
react-state-managementreact expert
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state…
Jeffallan/claude-skills★ 12kMITFolder:
react-expertreact native expert
Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles…
Jeffallan/claude-skills★ 12kMITFolder:
react-native-expertreact flow node ts
Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
microsoft/skills★ 3.2kMITFolder:
react-flow-node-tsreact useeffect
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
softaworks/agent-toolkit★ 2.6kMITFolder:
react-useeffectreact dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper…
softaworks/agent-toolkit★ 2.6kMITFolder:
react-devreact doctor
Use when the user requests React Doctor or a React code-health audit, or when a concrete React diagnostic question would benefit from its scan. Not a default step after React changes or before committing.
amplifthq/openmeld★ 1.4kMITFolder:
react-doctorvercel react native skills
React Native and Expo best practices for building performant mobile apps. Use
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
react-native-skillsvercel react view transitions
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 whenever the user wants to add page transitions, animate…
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
react-view-transitionsreact patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React…
jezweb/claude-skills★ 1.1kMITFolder:
react-patternsreact native
React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native…
jezweb/claude-skills★ 1.1kMITFolder:
react-nativereact best practices
Use when reading or writing React components (.tsx, .jsx files with React imports).
aiskillstore/marketplace★ 446No licence statedFolder:
react-best-practicesreact code review
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
react-code-reviewzod react hook form
Form validation combining Zod schemas with React Hook Form, including localized error messages, Server Action integration, and shadcn/ui Form components. Use when building forms, validating user input, handling form submissions, or implementing Server…
BlackBeltTechnology/pi-agent-dashboard★ 337MITFolder:
zod-react-hook-formexpo react native javascript best practices
Expo React Native JavaScript best practices for clean code, functional components, performance optimization, and Expo Router navigation.
Mindrally/skills★ 288Apache-2.0Folder:
expo-react-native-javascript-best-practicesexpo react native typescript
Expert in Expo React Native TypeScript mobile development with best practices
Mindrally/skills★ 288Apache-2.0Folder:
expo-react-native-typescriptnextjs react redux typescript cursor rules
Comprehensive Next.js, React, Redux, and TypeScript development guidelines covering SOLID principles, component architecture, and best practices.
Mindrally/skills★ 288Apache-2.0Folder:
nextjs-react-redux-typescript-cursor-rulesfigma to react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
majiayu000/spellbook★ 288MITFolder:
figma-to-reactreact hooks best practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Use when reading or writing React components with hooks or effects.
majiayu000/spellbook★ 288MITFolder:
react-hooks-best-practicesiphone duo react native
Adapt a React Native or Expo app to iPhone Duo, Apple's first foldable iPhone — asymmetric safe area insets, resize handling, and how to expose the iOS 27.1 reserved-region and hinge APIs through a native module. Use when a React Native, Expo or JS-based…
mirzaaghazadeh/iphone-duo-skills★ 258Licence: see repoFolder:
iphone-duo-react-nativeDetox React Native Testing
End-to-end testing for React Native apps using Detox with gray-box testing, synchronization, device simulation, and CI integration.
PramodDutta/qaskills★ 244MITFolder:
detox-react-nativehz react native expo
Build and iterate on React Native apps for Meta VR / Horizon OS with Expo. Covers the fast dev loop — install Expo Go from the Meta Horizon Store, run a Metro dev server, load its bundle URL on the headset, and get live Fast Refresh — plus the full…
meta-quest/agentic-tools★ 242Apache-2.0Folder:
hz-react-native-expobase ui react
MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.
secondsky/claude-skills★ 240MITFolder:
base-ui-reactbun react ssr
Use when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.
secondsky/claude-skills★ 240MITFolder:
bun-react-ssrreact hook form zod
Type-safe React forms with React Hook Form and Zod validation. Use for form schemas, field arrays, multi-step forms, or encountering validation errors, resolver issues, nested field problems.
secondsky/claude-skills★ 240MITFolder:
react-hook-form-zodgsap react
Create, implement, or review gsap react work with format, accessibility, performance, and visual-verification controls. Use when the requested deliverable depends on gsap react.
sandbaseai/sandbase-skills★ 203Apache-2.0Folder:
gsap-reactreact native vision camera realtime
Design and review production-grade low-latency VisionCamera v5 pipelines. Use for real-time GPU, ML, CV, Skia or WebGPU overlays, Nitro frame plugins, zero-copy interop, frame budgets, and latency profiling. Use the general react-native-vision-camera skill…
margelo/react-native-skills★ 178No licence statedFolder:
react-native-vision-camera-realtimereact native vision camera
Best-practices guide for React Native VisionCamera v5 setup, migration, capture, controls, outputs, and basic frame processing. Use the separate react-native-vision-camera-realtime skill for production low-latency GPU, ML, CV, Skia or WebGPU pipelines and…
margelo/react-native-skills★ 178No licence statedFolder:
react-native-vision-camerareact native mmkv
Fast synchronous key-value storage for React Native via react-native-mmkv (Nitro-backed). Covers creating and configuring MMKV instances, reading/writing all value types (string, number, boolean, buffer), React hooks for reactive UI, value-change…
margelo/react-native-skills★ 178No licence statedFolder:
react-native-mmkvdt setup react native
Integrate the Dynatrace React Native Plugin into a React Native or Expo project — dependency setup, dynatrace.config.js, Babel registration, npx instrumentation, navigation tracking, user privacy options, and verification. Handles both bare React Native…
Dynatrace/dynatrace-for-ai★ 171Apache-2.0Folder:
dt-setup-react-nativecometchat react native bare patterns
Bare React Native CLI wiring for the CometChat UI Kit v5 — pod install, Android manifest permissions, and the gesture-handler import that must be the first line of your entry file. Triggers: CometChat React Native CLI, pod install CometChat, RN chat…
cometchat/cometchat-skills★ 158MITFolder:
cometchat-react-native-bare-patternscometchat react native components
The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top. Triggers: which CometChat component React Native, custom header RN chat, add a…
cometchat/cometchat-skills★ 158MITFolder:
cometchat-react-native-componentscometchat react native calls
Voice and video calling in the CometChat React Native UI Kit v5 — the RN calls SDK, the native permissions and version floors it needs, and why installing the package is itself the enable switch. Triggers: add video calling React Native, CometChat voice…
cometchat/cometchat-skills★ 158MITFolder:
cometchat-react-native-callsreact
Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the project's tests. Use when a task explicitly involves React,…
magnus919/agent-skills★ 156MITFolder:
reactmotion react layout transitions
Animate state-driven layout/layoutId changes.
TheGoat395/Codex-Skills★ 135MITFolder:
motion-react-layout-transitionsmotion react microinteractions
Design tactile interaction feedback and timing.
TheGoat395/Codex-Skills★ 135MITFolder:
motion-react-microinteractionsmotion react page transitions
Animate routes; support native View Transitions.
TheGoat395/Codex-Skills★ 135MITFolder:
motion-react-page-transitionsdspy react agent builder
Use for ReAct agents, tool-calling agents, dspy.ReAct, multi-step reasoning and acting, and GEPA agent optimization.
OmidZamani/dspy-skills★ 124MITFolder:
dspy-react-agent-builderexample react
Patterns for using Helios with React. Use when building compositions in a React environment.
BintzGavin/helios★ 123Apache-2.0Folder:
reactdagre react flow
Automatic graph layout using dagre with React Flow (@xyflow/react). Use when implementing auto-layout, hierarchical layouts, tree structures, or arranging nodes programmatically. Triggers on dagre, auto-layout, automatic layout, getLayoutedElements,…
existential-birds/beagle★ 85Apache-2.0Folder:
dagre-react-flowreact flow advanced
Advanced React Flow patterns for complex use cases. Use when implementing sub-flows, custom connection lines, programmatic layouts, drag-and-drop, undo/redo, or complex state synchronization.
existential-birds/beagle★ 85Apache-2.0Folder:
react-flow-advancedreact flow architecture
Architectural guidance for building node-based UIs with React Flow. Use when designing flow-based applications, making decisions about state management, integration patterns, or evaluating whether React Flow fits a use case.
existential-birds/beagle★ 85Apache-2.0Folder:
react-flow-architecturereact ops
React development patterns, hooks, state management, Server Components, and performance optimization. Use for: react, hooks, useState, useEffect, jsx, tsx, server components, RSC, zustand, react query, component patterns, react testing library, error…
0xDarkMatter/claude-mods★ 78MITFolder:
react-opsreact performance optimization
React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.
NickCrew/Claude-Cortex★ 62MITFolder:
react-performance-optimizationstitch react components
Converts a Stitch screen, a local HTML file, or a URL into modular Vite + React components — TypeScript, theme-mapped Tailwind, dark mode via CSS variables, and clean component architecture. Use this for Vite/React apps without App Router. For Next.js 15…
gabelul/stitch-kit★ 47Apache-2.0Folder:
stitch-react-componentsstitch react native components
Converts a Stitch mobile screen, a local HTML file, or a URL into React Native / Expo components — TypeScript, StyleSheet, Expo Router, dark mode via useColorScheme, and proper touch targets. Cross-platform iOS and Android. Only the Stitch route needs an…
gabelul/stitch-kit★ 47Apache-2.0Folder:
stitch-react-native-componentsreact component
Build production-ready React components — hooks, context, accessibility, TypeScript types, and Storybook stories.
inbharatai/claude-skills★ 41MITFolder:
react-component
Claude skills for React: before you install one
Is there a Claude skill for React?
Yes: 547 public skills from 199 GitHub repositories mention React. The best-known ones named for it are vercel react best practices (CherryHQ/cherry-studio, ★ 53k), react modernization (wshobson/agents, ★ 42k) and react native architecture (wshobson/agents, ★ 42k). Stars belong to the whole repository, not to one skill.
How do I add vercel react best practices to Claude?
For React, copy the vercel-react-best-practices folder from CherryHQ/cherry-studio (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. For the Claude apps, upload the zipped folder as a custom skill instead.
What licences do these React skills use?
Of the 50 React skills listed here, 44 sit in repositories under an open licence such as MIT or Apache 2.0, and 4, such as react best practices and react native vision camera realtime, state no licence at all, which legally means you may not reuse them. The licence badge on each card tells you which is which.
Does Anthropic make an official React skill?
Yes: web artifacts builder comes from Anthropic's own skills repository. The other 546 are community-made.
How recently were React skills updated?
372 of the 547 React skills sit in repositories that changed in the 30 days before 31 Oct 2026.
More topics: every “Claude skills for…” page.