Codex skills for React
React skills cover React 19 Actions, Server Components, render profiling, TanStack Query, routing, forms, Testing Library and React Native with Expo. Codex profiles a named slow interaction in a production build before adding memo, tests components through roles and labels, and checks the installed React version before rewriting forwardRef as a plain ref prop.
Start with these 3
- React 19 Patterns Let Actions own pending, errors and reset Codex rewrites mutations as React 19 Actions instead of juggling isSubmitting flags, places useFormStatus where it actually works, keeps use() away from render-created promises, and converts forwardRef to plain ref props. It checks the installed React version first and includes an upgrade path from 18 with codemods and the type errors to expect.
- React Server Components Put the client boundary at the smallest leaf Codex decides server versus client per component from a needs table, splits mixed components so only the interactive part ships JavaScript, and fixes the 'functions cannot be passed' error at its cause. It maps ORM rows to plain DTOs, dedupes loaders with React.cache, removes await waterfalls, and adds server-only guards so credentials never reach the browser payload.
- React Performance Profile the interaction, then fix the fan-out Codex starts from one named slow interaction, profiles it in a production build, and classifies the cause as expensive renders or too-wide updates before touching code. It prefers structural fixes such as state colocation, children-as-props, split contexts and virtualization, then adopts the React Compiler incrementally with lint diagnostics and opt-outs, and reports before and after numbers.
34 more React skills
-
React Three Fiber
3D in React without re-rendering every frame -
React Router v7
Loaders, actions and fetchers the framework way -
React Hook Form + Zod
One schema, typed fields, errors on the right input -
Motion for React
Exit animations that actually play -
TypeScript React Types
Props that reject misuse and never need a cast -
React Native Expo
Native apps you can regenerate from config -
React Native Performance
Measured fixes for jank and slow starts -
React Testing Library
Find it by role, click it like a user -
React Render Profiling
Record the lag, read why it rendered, fix that -
TanStack Query
Exact keys, deliberate staleTime, honest mutations -
TanStack Router
URLs, search params and loaders that type-check -
TanStack Start
Server functions that validate, loaders that stay portable -
Storybook Stories
Stories that document and test every state -
webpack to Vite
Leave Create React App without breaking prod -
Zustand State
Small stores, narrow selectors, versioned persistence -
Redux Toolkit
Slices, typed hooks and RTK Query without legacy boilerplate -
shadcn/ui
Own your components, theme them with tokens -
Radix UI Primitives
Accessible behavior, your own styling -
Frontend i18n
Plurals, RTL and locale URLs done properly -
Frontend Error Handling
No white screens, no silent failures, no retry storms -
tRPC APIs
End-to-end types without leaking data or auth -
Expo Router
Routes you can read straight from the file tree -
AI Chat Interface
Chat UIs that stream, stop and recover cleanly -
XSS Prevention
Encode for the sink, not for the input -
Mobile App Security
Treat the app binary as attacker-owned -
Visual Regression Testing
Every pixel diff is real, every baseline reviewed -
API Mocking with MSW
Mock the network, not your fetch client -
Mobile E2E Testing
Few journeys, stable ids, green on every run -
Code Splitting
Load each route's code, prefetch the next one -
Design Systems
A shared UI library teams actually adopt -
Algolia Search
Relevance settings in git, zero-downtime reindexes -
viem and wagmi
Typed contract calls that simulate before they sign -
Next.js App Router
Folders, boundaries and handlers that behave as expected -
View Transitions
Native page morphs that degrade cleanly
General skills with React guidance
Not built around React, but they include steps or tools for it. Not part of the install-all command.
-
Shopify Apps
Admin GraphQL, verified webhooks, safe deploys -
Biome Setup
Swap ESLint and Prettier for Biome, knowing what you lose -
SolidJS
Run components once, update only what changed -
GSAP Animations
Scroll storytelling without leaks or jank -
Lit Web Components
Custom elements that work in every framework -
D3 Visualizations
Bespoke charts with honest scales and keyed joins -
Micro-frontends
Split the frontend only when teams truly need it -
Transactional Email
Sent once, after commit, into the inbox -
Mobile Accessibility
Every core task, eyes closed, text at 200% -
Capacitor Apps
Ship the web app natively without forking it -
Mobile App Architecture
Structure sized to the app, enforced by the build -
Vercel AI SDK
Streaming chat and tools that match your ai version
Every React skill in one command
Installs these 37 into ~/.agents/skills/. Add --project after -- to install into the current repository instead.
The installer is a 104-line POSIX shell script. It fetches the skills you name from codexskills.dev and unpacks each into its own folder in your skills directory. No sudo, no telemetry, and every skill page shows the full SKILL.md first. Read install.sh
curl -fsSL codexskills.dev/install.sh | sh -s -- react-19-patterns react-server-components react-performance react-three-fiber react-router-v7 react-hook-form-zod motion-animations typescript-react-types react-native-expo react-native-performance react-testing-library react-render-profiling tanstack-query tanstack-router tanstack-start storybook-stories webpack-to-vite zustand-state redux-toolkit shadcn-ui radix-ui frontend-i18n frontend-error-handling trpc-apis expo-router ai-chat-interface xss-prevention mobile-app-security visual-regression-testing api-mocking-msw mobile-e2e-testing code-splitting design-systems algolia-search viem-wagmi nextjs-app-router view-transitions React FAQ
Is there a Codex skill for React 19 Actions and useActionState?
React 19 Patterns rewrites mutations as Actions with useActionState, useFormStatus and useOptimistic instead of hand-rolled isSubmitting flags, and converts forwardRef to ref as a plain prop. It checks the installed React version first, keeps use() away from promises created during render, and includes an upgrade path from React 18 with codemods.
How does Codex fix a slow React component without wrapping everything in memo?
React Performance starts from one named slow interaction, profiles it in a production build and classifies the cause before editing. It prefers structural fixes such as state colocation, split contexts and virtualization, then adopts the React Compiler incrementally. React Render Profiling reads the React DevTools commit and ranked charts and proves each fix with a second recording of the same interaction.
Do these skills cover React Server Components and the 'use client' boundary?
React Server Components decides server or client per component from a needs table and splits mixed components so only the interactive part ships JavaScript. It fixes the 'functions cannot be passed' error at its cause, maps ORM rows to plain DTOs, dedupes loaders with React.cache and adds server-only guards so credentials never reach the browser payload.
How do I install all 37 React skills at once?
Pass every name to the installer in one command: curl -fsSL https://codexskills.dev/install.sh | sh -s -- react-19-patterns react-server-components react-performance react-three-fiber react-router-v7 react-hook-form-zod motion-animations typescript-react-types react-native-expo react-native-performance react-testing-library react-render-profiling tanstack-query tanstack-router tanstack-start storybook-stories webpack-to-vite zustand-state redux-toolkit shadcn-ui radix-ui frontend-i18n frontend-error-handling trpc-apis expo-router ai-chat-interface xss-prevention mobile-app-security visual-regression-testing api-mocking-msw mobile-e2e-testing code-splitting design-systems algolia-search viem-wagmi nextjs-app-router view-transitions. Add --project right after -- to put them in the current repository's .agents/skills/ so your team gets them too.
Which React skill should I try first?
React 19 Patterns is the closest fit for most React work. Mention it with $react-19-patterns in a prompt to load it on purpose; after that, Codex picks it up on its own whenever a task matches.