Top 10 React Skills for AI Coding Agents

Best for: Waterfalls, bundles, caching, and avoidable re-renders

vercel-react-best-practices is the broad React performance workflow in this catalog. Use it when a React or Next.js change needs an evidence-led pass over request waterfalls, bundle size, caching, or unnecessary re-renders.

Choose this before a specialist workflow when the problem is general application performance rather than GSAP, React Native, React Router, or another vendor-specific boundary.

• Request waterfall diagnosis
• Bundle-size reduction decisions
• Caching strategy guidance
• Avoidable re-render investigation

Best for: A conditional post-change React diagnostics pass

react-doctor is a conditional diagnostic workflow for a React change that needs a focused regression scan. Use it after the relevant scope has changed and the result needs to act as a quality gate.

It is not the default implementation guide for a new React feature. Select it when the decision is whether the changed scope has introduced React-specific problems that should be caught before handoff.

• Changed-scope React scan
• Regression-focused diagnostics
• Conditional quality-gate use
• Post-change readiness check

Best for: React components that use GSAP or GSAP-based motion

gsap-react is a conditional workflow for React components that use GSAP. Use it to decide how animation setup follows the component lifecycle, how refs scope the animated elements, and how cleanup prevents stale animation work.

The workflow also covers the server-rendering boundary. It should not be loaded for ordinary React rendering when GSAP or this motion-specific lifecycle problem is not part of the change.

• React lifecycle-aware GSAP setup
• Scoped refs for animated elements
• Animation cleanup
• SSR-aware motion decisions

Best for: Clerk-specific authentication in a React SPA

clerk-react-patterns is a conditional authentication workflow for React single-page applications that use @clerk/react. Use it when the implementation must connect Clerk's auth state to the SPA's route protection decisions.

This is Clerk-specific guidance, not a general React authentication default. Keep it out of a React app that does not use Clerk or that needs a different authentication provider.

• @clerk/react SPA patterns
• Authentication-state integration
• Protected-route decisions
• Clerk-specific implementation boundary

Best for: React Email templates and their sending workflow

react-email is a conditional workflow for producing HTML emails with React Email. Use it when a template must be designed around the constraints of email clients rather than browser rendering alone.

Its scope includes the delivery path as well as the rendered email. Select it for React Email work; it is not a default guide for ordinary React UI components or browser pages.

• React-generated HTML email
• Email-client constraint awareness
• Template implementation decisions
• Delivery-path considerations

Best for: React Native FPS, TTI, memory, and native or bundle performance

react-native-best-practices is for React Native applications, not browser-only React. Use it when mobile performance work needs measured signals such as FPS, time to interactive, memory, native performance, or bundle performance.

Keep the platform boundary explicit: this workflow helps investigate React Native runtime costs and should not be presented as a general React performance default for web applications.

• Measured mobile FPS
• Time-to-interactive investigation
• Memory and native performance
• Bundle performance in React Native

Best for: React Router framework-mode route and server-rendering work

react-router-framework-mode is a conditional workflow for applications using React Router's framework mode. Use it when the change crosses loaders, actions, route modules, or server-side rendering and those pieces must fit together.

It is framework-specific guidance, not a default for every React router or component change. Choose it only when the application's routing architecture is the React Router framework-mode boundary described by the source.

• Framework-mode loaders
• Actions and route modules
• Route data-flow decisions
• Server-side rendering boundary

Best for: Writing or reviewing React components, hooks, JSX/TSX, and application state

react-patterns provides idiomatic React 18 and 19 guidance for building robust, accessible, performant component trees. Use it to write or review components and hooks, including JSX and TSX.

It covers shaping and composing state, choosing local state versus lifted, context, or external state, and work on forms and data fetching. It also helps evaluate React 19 choices.

• Component and hook implementation or review
• JSX and TSX review
• State shape and local, lifted, context, or external state choices
• Forms, data fetching, and React 19 choices

Best for: React Hook Form performance, validation, and field arrays

react-hook-form is a conditional workflow for forms built with React Hook Form. Use it when the implementation decision concerns client-side performance, validation behavior, or dynamic field arrays in that library.

It is not a general form or React state-management default. Select it when React Hook Form is already the library boundary so the agent can keep the form-specific trade-offs in scope.

• Client-side form performance
• React Hook Form validation
• Dynamic field arrays
• Library-specific state decisions

Best for: assistant-ui MCP UI, OAuth, and storage work

react-mcp is a conditional assistant-ui workflow for a React interface that connects to a user-managed MCP server. Use it when the UI must account for MCP connection behavior, OAuth, and storage decisions within assistant-ui.

The scope is assistant-ui-specific and does not make MCP UI guidance a default for ordinary React applications. Select it only when that library and user-managed server boundary are part of the implementation.

• User-managed MCP server UI
• OAuth flow considerations
• Connection storage decisions
• assistant-ui-specific React boundary