Agent Skill
Vercel React Best Practices
Vercel Engineering's prioritized React and Next.js performance rules for code generation, review, and refactoring.
What is Vercel React Best Practices?
Vercel React Best Practices turns performance advice into a rule catalog an agent can apply while writing or reviewing code. Its 70 rules are grouped by impact, beginning with request waterfalls and bundle size, then covering server work, client data fetching, rerenders, rendering, JavaScript hot paths, and advanced React patterns. Each rule lives in its own reference with an explanation and contrasting code examples, so the agent can load the specific guidance needed rather than treating performance as a generic checklist.
Key capabilities
Impact-based priorities
Puts waterfalls and bundle size ahead of minor micro-optimizations so reviews focus on meaningful gains.
Seventy concrete rules
Covers server, client, rerender, rendering, JavaScript, and advanced React behavior with named checks.
Rule-level examples
Pairs explanations with incorrect and corrected code in individually loadable reference files.
Use cases
Review a Next.js change
Detect serial fetches, oversized bundles, excessive client boundaries, and unnecessary rerenders.
Guide a performance refactor
Prioritize high-impact structural changes before lower-impact JavaScript tuning.
Compatibility
- A React or Next.js codebase