React Best Practices
40+ React and Next.js performance rules from Vercel Engineering.
About
React Best Practices packages Vercel Engineering's performance guidance into an agent skill: 40+ rules across 8 categories prioritized by impact, from eliminating waterfalls and bundle-size optimization (critical) down to JS micro-optimizations. The agent applies them when writing components, implementing data fetching, or reviewing code for perf issues.
It is opinionated toward the Vercel/Next.js stack — guidance on Server Components, caching, and bundling assumes that ecosystem. Rules can also fight with legitimate exceptions (e.g. intentional waterfalls for auth), so human judgment still applies.
What it can do
- Waterfall elimination patterns
- Bundle-size optimization rules
- Server Component guidance
- Re-render optimization
- Data-fetching best practices
Setup
npx skills add vercel-labs/agent-skills, or install the single skill via your agent's skill manager. Trigger with 'review this component for performance' or let the agent apply rules while writing code.
Prerequisites
An Agent Skills-compatible coding agent; a React/Next.js codebase to apply it to.
Use cases
Works with
Trust score — 8/10
Scored 8/10 (verified tier, metrics-v1). Evidence: Verified via vendor site/docs/GitHub and reputable coverage, wave 44 (tools-b); Trending score 85/100 from researcher assessment.
★ 32,353 GitHub stars
Sources
Every fact above was checked against these sources. Where a claim comes from the provider and couldn't be independently verified, the text says so.