React Best Practices
Apply Vercel Engineering guidance to React and Next.js code, with emphasis on performance, rendering, and bundle efficiency.
Best for
Frontend teams reviewing production React and Next.js applications.
npx skills add vercel-labs/agent-skills --skill react-best-practices
Common use cases
When to use this skill
- Find data-fetching waterfalls.
- Reduce unnecessary client work and re-renders.
- Review bundle and rendering risks.
Example prompts
Prompts you can adapt
How to use it
A simple workflow
Open the verified Vercel source on GitHub and review its SKILL.md or repository documentation.
npx skills add vercel-labs/agent-skills --skill react-best-practices
Start with an example prompt below, adapt it to your project, and verify the result.
FAQ
Questions about React Best Practices
Is this linked to an official public source?
Yes. This page links directly to the Vercel GitHub source shown above. Review its documentation and license before production use.
How do I add this skill?
Run the setup command shown on this page, then refresh your agent if required.
Related skills
Keep building the workflow
React Composition Patterns
Refactor React components with compound components, state lifting, and composition patterns that avoid boolean-prop sprawl.
React View Transitions
Implement native-feeling page and component transitions with React's View Transition APIs and Next.js patterns.
Vercel Optimize
Audit a Vercel project for cost, performance, reliability, caching, function usage, and build efficiency.