Vercel React Best Practices

A comprehensive collection of 70 performance rules from Vercel's engineering team, organized by impact from critical (eliminating waterfalls, bundle optimization) down to advanced patterns. The rules cover React and Next.js patterns with specific prefixes like async-, bundle-, server-, and rerender- so you know what you're optimizing. Each rule includes incorrect and correct code examples. This is essentially Vercel's internal playbook made portable, which means it skews heavily toward their infrastructure and opinions, but if you're building on Next.js or just want to understand how they think about React performance, it's a solid reference that goes beyond the usual "just use memo" advice.

skills.sh installs: 277
GitHub stars: 27.5K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/claude-skills --skill vercel-react-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

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	LOW	`advanced-`