Vercel React Best Practices

This is Vercel's internal performance optimization guide turned into a Claude skill, covering 57 rules across 8 categories from eliminating request waterfalls to bundle size optimization. Use it when writing or reviewing React and Next.js code where performance matters. The rules are prioritized by impact, which is smart since you'll spend most of your time on things like avoiding barrel imports and parallelizing data fetches rather than micro-optimizing JavaScript loops. Each rule includes before and after examples. The categories make sense: waterfalls and bundle size are marked critical, server-side patterns are high priority, and things like SVG coordinate precision are appropriately labeled low impact. Good reference for teams that need consistent patterns across a codebase.

skills.sh installs: 408
GitHub stars: 279
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/agent-eval --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 57 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-`