vercel-react-best-practices

name

vercel-react-best-practices

description

React and Next.js performance optimization with 69 prioritized rules across 8 categories. Use when writing React components, implementing data fetching, reviewing code for performance, refactoring React/Next.js code, optimizing bundle size, or when the user says "React performance", "optimize React", "Next.js best practices", "bundle size", or "waterfall." Based on vercel-labs/agent-skills (291K weekly installs).

Vercel React Best Practices

Performance optimization guide for React and Next.js, maintained by Vercel. 69 rules across 8 categories, prioritized by impact.

When to Apply

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Refactoring existing React/Next.js code
• Optimizing bundle size or load times

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Eliminating Waterfalls	CRITICAL	async-
2	Bundle Size Optimization	CRITICAL	bundle-
3	Server-Side Performance	HIGH	server-
4	Client-Side Data Fetching	MEDIUM-HIGH	client-
5	Re-render Optimization	MEDIUM	rerender-
6	Rendering Performance	MEDIUM	rendering-
7	JavaScript Performance	LOW-MEDIUM	js-
8	Advanced Patterns