react-best-practices Skill: Vercel's React Rules

npx skills add vercel-labs/agent-skills

react-best-practices is Vercel Engineering’s React and Next.js performance guide packaged as an agent skill. It lives in vercel-labs/agent-skills and contains 40+ rules across 8 categories, ordered by impact, so Claude fixes what matters most first instead of micro-optimizing.

Who it is for

React and Next.js developers who want Claude’s generated code to be fast by default, and reviewers who want a consistent, impact-ranked checklist when auditing performance.

What it does

The skill activates when Claude writes React components or Next.js pages, implements data fetching, reviews code for performance, or optimizes bundle size and load times. Its categories, by priority:

• Eliminating waterfalls (critical)
• Bundle size optimization (critical)
• Server-side performance (high)
• Client-side data fetching (medium-high)
• Re-render optimization and rendering performance (medium)
• JavaScript micro-optimizations (low-medium)

Install

From the README, which installs Vercel’s full skill set:

npx skills add vercel-labs/agent-skills

To install just this skill, add --skill react-best-practices. The same repo includes web-design-guidelines, composition-patterns, react-view-transitions, react-native-skills, writing-guidelines, vercel-optimize and deploy skills if you want them.

Example prompts

Review this dashboard page for performance problems and fix the worst ones
Why does this component re-render on every keystroke?
Refactor these sequential fetches in the server component to avoid a waterfall

Tips and limits

• Rules are guidance, not a linter; measure with real profiling before and after.
• Some rules assume modern React and Next.js features; check your versions.
• Combine with frontend-design for visual quality and Chrome DevTools MCP for real traces.
• The repository has no top-level license file; check terms before copying rules into other products.

Related: Expo skills, skills guide.