33 skills · 9 categories
Claude Code skills for React
React skills that keep components, effects and data fetching correct for current versions: server and client boundaries, when an effect is the wrong tool, accessible forms, state that does not re-render the world, and testing what users actually see.
Start with these
- 1
React Patterns
Fewer effects, derived state, components that compose
Makes Claude write React the way the current docs intend: state kept minimal, values derived during render, user-driven logic in event handlers, and effects reserved for syncing with outside systems with proper cleanup. It prefers composition through children over boolean-prop sprawl, uses React 19 Actions, ref-as-prop and useEffectEvent, and reviews diffs with a numbered findings list.
- 2
React Router Framework Mode
Loaders, actions and typed routes, the Remix way
Claude builds React Router framework-mode apps the way the router expects: data in loaders, mutations in actions submitted by Form or fetchers, automatic revalidation instead of manual refetching, generated Route types, middleware for shared auth, and an ErrorBoundary per failing route. It checks whether the project is on v7 or v8 first and walks Remix and v7 apps through the future flags safely.
- 3
React Server Components
Keep data on the server and props serializable
Gives Claude a precise RSC mental model so it stops sprinkling use client on whole pages or putting use server on components. It pushes interactivity to small leaves, maps database rows to minimal DTOs before they cross the boundary, treats every Server Function as a public endpoint with validation and authorization, and decodes the common serialization and hydration errors by cause.
All 33 React skills
Grouped by category. Each card opens the full playbook, example prompts and install commands.
Frontend 17
React Patterns
Fewer effects, derived state, components that compose
Makes Claude write React the way the current docs intend: state kept minimal, values derived during render, user-driven logic in event handlers, and effects reserved for syncing with outside systems with proper cleanup. It prefers composition through children over boolean-prop sprawl, uses React 19 Actions, ref-as-prop and useEffectEvent, and reviews diffs with a numbered findings list.
React Router Framework Mode
Loaders, actions and typed routes, the Remix way
Claude builds React Router framework-mode apps the way the router expects: data in loaders, mutations in actions submitted by Form or fetchers, automatic revalidation instead of manual refetching, generated Route types, middleware for shared auth, and an ErrorBoundary per failing route. It checks whether the project is on v7 or v8 first and walks Remix and v7 apps through the future flags safely.
React Server Components
Keep data on the server and props serializable
Gives Claude a precise RSC mental model so it stops sprinkling use client on whole pages or putting use server on components. It pushes interactivity to small leaves, maps database rows to minimal DTOs before they cross the boundary, treats every Server Function as a public endpoint with validation and authorization, and decodes the common serialization and hydration errors by cause.
TanStack Query
Server state with keys, staleTime and rollback
Claude treats server data as a cache with rules. It builds one query key factory with queryOptions, picks staleTime by how fast each kind of data changes, makes mutations invalidate exactly the keys they touch, rolls back optimistic updates on error, and hydrates SSR caches so pages do not refetch on load. Verification uses Devtools and the network tab, not hope.
Storybook Components
Stories as tested fixtures, not a demo gallery
Claude writes one story per meaningful component state, types meta with satisfies so bad args fail to compile, mocks every network and module dependency so stories render offline, and turns play functions into CI tests through the Vitest addon with accessibility checks. It checks the Storybook major first, because imports and test tooling changed between 8, 9 and 10.
Data Tables
Fast, accessible tables at 100k rows
Claude sizes the data before choosing an architecture, then keeps sorting, filtering and paging on the same side so users never sort one page and think it is the whole set. It stores table state in the URL, uses cursor pagination with a unique tiebreaker, virtualizes long lists, and keeps a real table with aria-sort and labeled selection that screen readers can follow.
Forms and Validation
One schema, server-checked, errors a screen reader hears
Claude starts each form from a field spec with input types, autocomplete tokens and actionable error copy, then writes one Zod schema used by both browser and server. Forms submit without JavaScript, keep values on error, map API failures such as a taken email onto the right field, and follow WCAG 2.2 rules on labels, focus after submit, paste and password managers.
State Management
One owner per value: URL, cache, store or component
Instead of reaching for a global store by default, Claude classifies every value by lifetime and audience and assigns one owner: TanStack Query for server data, the URL for shareable filters and tabs, component state for local UI, and a small Zustand or Redux store for what remains. It hunts down effects that copy fetched data into state and produces an audit table of moves.
Virtualized Lists
Thousands of rows, a few dozen DOM nodes
Claude measures before it virtualizes. It tries cheaper rows, pagination and CSS content-visibility first, then builds TanStack Virtual, react-window 2 or react-virtuoso lists with stable keys, measured heights, infinite loading and sticky headers. It keeps focus and screen reader positions intact, adds search where find-in-page breaks, and restores scroll position on back navigation.
Next.js App Router
Layouts, caching and invalidation that behave in prod
Before writing data code, Claude checks the installed Next.js version and whether Cache Components is enabled, because caching defaults differ across 14, 15 and 16. It then keeps pages server-first, tags every cached source, invalidates after each Server Action, and verifies the result in the next build route table and a production server, not in dev mode where caching is hidden.
SolidJS Apps
Fine-grained reactivity without React reflexes
Claude writes Solid as Solid, not as React with different imports. It keeps every signal read in a tracking scope, never destructures props, swaps early returns for Show and Switch, uses stores with reconcile for server data, and wires SolidStart query, action and server functions with authorization inside each one. It also greps for the patterns that silently freeze values.
Astro Sites
Static HTML first, hydrate only what users touch
Claude builds Astro sites that stay static by default and ship framework JavaScript only for real widgets, choosing client:visible or client:idle before client:load. Content lives in typed Content Layer collections validated at build time, images go through astro:assets, and SSR is enabled per route with an adapter rather than flipping the whole site to server output.
Drag and Drop
Drag as a shortcut, with a click path behind it
Claude builds sortable lists and boards where dragging is optional: every move also works from a Move menu and the keyboard, and each one is announced to screen readers. It picks dnd-kit, Pragmatic drag and drop or native events with reasons, persists order as fractional keys in a byte-collated column, and rolls back optimistic moves when the save fails.
i18n and Localization
ICU messages, Intl formatting, RTL that holds up
Claude internationalizes an app the way localization teams need: complete ICU sentences with named arguments instead of concatenated fragments, Intl formatters with explicit locale and time zone, logical CSS and bidi isolation for Arabic and Hebrew, and path-based locale routing with reciprocal hreflang. A bundled checker fails CI on missing keys, broken ICU syntax and placeholder mismatches.
Web Animations
Transform and opacity, interruptible, reduced-motion safe
Claude picks the lightest tool that does the job — a CSS transition, @starting-style for dialogs, the View Transitions API for route changes — before adding Motion or GSAP. It animates only transform and opacity, keeps UI durations short, makes every effect respect prefers-reduced-motion, and proves smoothness with a throttled DevTools Performance recording.
Web Components
Custom elements that behave like native ones
Claude designs a custom element's public API first — attributes, properties, events, slots, parts and CSS variables — then implements it with idempotent lifecycle hooks, composed events and ElementInternals for roles, states and form participation. It handles the traps that waste days: properties set before upgrade, ARIA references that cannot cross shadow roots, and Lit fields that shadow reactive accessors.
Web Maps
GPU layers, honest tile costs, points in the right place
Claude picks the map library and tile provider with licensing and per-load pricing in mind, renders data as clustered GPU layers instead of thousands of DOM markers, moves big datasets to vector tiles or PMTiles, and handles SSR and WebGL cleanup in React. A stdlib script audits GeoJSON for swapped coordinates, projected meters, open rings and wasted precision before anything ships.
Backend & APIs 2
tRPC APIs
Typesafe procedures with auth that narrows context
Claude builds tRPC routers with a cheap typed context, protected and role-based base procedures that narrow ctx.user, Zod validation on input and output, and per-object ownership checks inside each procedure. The client imports only the router type, uses the v11 TanStack Query integration for queries and invalidation, and createCaller tests prove that the unauthorized and not-found paths hold.
OpenAPI Codegen
Generated clients that stay in sync with the spec
Claude picks one generator per language from a decision table, fixes the spec first so names and types come out clean (operationIds, named schemas, discriminators, accurate required lists), pins tool versions behind a single gen script, and adds CI gates for lint, oasdiff breaking changes, regeneration drift and consumer typechecks. A bundled checker flags spec problems before any code is generated.
Testing 2
Testing Library
Component tests that query like a screen reader
Claude writes component tests that find elements by role and accessible name, drive them with awaited user-event calls, and assert on what a user would see. It builds one render helper with fresh providers per test, stubs the network rather than hooks, and fixes act() warnings by waiting for the visible result instead of wrapping calls in act.
Visual Regression
Screenshot tests that fail on real change, not noise
Claude makes renders deterministic before touching thresholds: frozen clock, fixture data, loaded fonts, masked live widgets, and baselines generated inside the same Playwright container CI uses. It proves zero noise with repeated runs, then tunes per-snapshot limits so a one-pixel padding change fails while anti-aliasing jitter does not.
Security 1
Performance 2
React Re-renders
Profile first, memoize last
Claude profiles the slow interaction in a production build, names the components whose commits dominate and why each rendered, then fixes structure first: moving state down, passing children, splitting context, using store selectors. Memoization, transitions and virtualization come only where the profiler shows they pay off, and React Compiler adoption follows its lint rules.
Rendering Strategies
Static where you can, per-request only where you must
Claude inventories every route first: data sources, how stale each may be, whether it is per-user, traffic share and page count. It then picks the most static mode the facts allow, maps it to the framework's real config, keeps personalized bits out of shared caches, and proves the plan with build output, cache-hit headers and a cross-user leak test.
Mobile 5
React Native with Expo
Dev builds, Expo Router and OTA updates that are safe
Claude works in Expo projects the way the toolchain expects: native libraries via npx expo install, native settings through app config and plugins instead of hand-edited ios and android folders, development builds once custom native code appears, and OTA updates only to binaries with a matching runtime version. It checks safe areas, keyboard, back handling and permissions on both platforms.
Kotlin Multiplatform
Share the logic, keep the native feel on Android and iOS
Claude decides what belongs in commonMain and what stays native, builds the shared module with the AGP 9 Android-KMP plugin, Ktor and SQLDelight or Room KMP, and designs a Swift-facing facade with @Throws and SKIE so iOS code gets async functions and exhaustive enums. It treats Swift export as Alpha and plans adoption one slice at a time.
Mobile Accessibility
Apps that work with VoiceOver, TalkBack and huge text
Claude audits and fixes native and cross-platform apps so critical flows can be completed eyes-free with VoiceOver and TalkBack. It writes concise labels, exposes roles, values and states, groups cards with custom actions, manages focus after navigation, and makes layouts reflow at the largest text sizes, using a concept-to-API map for SwiftUI, UIKit, Compose, Views, React Native and Flutter.
Mobile Biometric Auth
Face ID that guards a key, not a boolean
Claude implements biometric unlock so the prompt releases a token sealed in the Keychain or Android Keystore, with biometryCurrentSet and setInvalidatedByBiometricEnrollment so a newly added face or finger locks the secret. It maps every cancel, lockout and invalidation error to a password fallback, keeps the server issuing short-lived tokens, and flags wrappers that only return a bypassable true.
Mobile Performance
Faster launches and smooth lists, proven on real devices
Claude treats mobile performance as measurement first: release builds on a mid-range physical device, median and p90 over repeated runs, and a profiler trace before any change. It then applies the fixes that usually matter — deferred SDK init, Baseline Profiles, image downsampling, virtualized lists with stable keys, work moved off the main thread — and adds a benchmark so the gain cannot quietly regress.
Design & UX 2
Email Design
HTML email that survives Outlook, Gmail and dark mode
Claude builds emails for the worst renderer first: role=presentation tables, inlined CSS, width attributes on every image, a hidden preheader and a VML-safe button, then layers dark-mode and mobile styles on top. A bundled stdlib linter checks the compiled HTML for external CSS, flex layouts, missing alt or lang, and the size at which Gmail clips the footer.
Mobile UI Patterns
Apps that feel native, not like a site in a wrapper
Claude picks navigation, sheets and modals the way the platform expects: per-tab stacks that keep their place, sheets for short tasks and full-screen modals for long ones, and back gestures that always work. Primary actions move into thumb reach, content respects safe areas and Android edge-to-edge, and each choice is marked as platform-adaptive or shared for React Native and Flutter builds.
Install
Every React skill in one command
Installs into ~/.claude/skills/. Add --project after -- to install into the current repository.
curl -fsSL https://claudeskills.page/install.sh | sh -s -- react-patterns react-router-framework react-server-components react-rerenders react-native-expo tanstack-query storybook-components data-tables forms-validation state-management virtualized-lists trpc-apis testing-library visual-regression mobile-app-security email-design mobile-ui-patterns transactional-email threejs-scenes nextjs-app-router solidjs-apps rendering-strategies astro-sites drag-and-drop i18n-localization web-animations web-components web-maps openapi-codegen kotlin-multiplatform mobile-accessibility mobile-biometric-auth mobile-performance React skills FAQ
What is the best Claude Code skill for React?
Start with React Patterns: Fewer effects, derived state, components that compose. Then add React Router Framework Mode and React Server Components, which cover the next most common React requests.
How do I install all 33 React skills at once?
Pass every name to the installer in one command: curl -fsSL https://claudeskills.page/install.sh | sh -s -- react-patterns react-router-framework react-server-components react-rerenders react-native-expo tanstack-query storybook-components data-tables forms-validation state-management virtualized-lists trpc-apis testing-library visual-regression mobile-app-security email-design mobile-ui-patterns transactional-email threejs-scenes nextjs-app-router solidjs-apps rendering-strategies astro-sites drag-and-drop i18n-localization web-animations web-components web-maps openapi-codegen kotlin-multiplatform mobile-accessibility mobile-biometric-auth mobile-performance. Add --project to install them into the current repository's .claude/skills/ folder so your team gets them too.
Do these React skills work outside Claude Code?
Yes. Each skill uses only the portable Agent Skills frontmatter, so the same folder works on claude.ai, through the Claude API and in the Agent SDK. Skills that run bundled scripts need an environment with code execution.