Vercel React Best Practices

This is Vercel's internal performance playbook turned into a Claude skill. It covers 70 rules across eight categories, from eliminating async waterfalls and bundle optimization (the critical stuff) down to JavaScript micro-optimizations. The real value is in how it prioritizes. Instead of dumping every best practice on you, it focuses on what actually moves the needle: parallel data fetching, avoiding barrel imports, proper use of React Server Components. Use it when writing or reviewing React/Next.js code and you want to catch performance footguns before they ship. The rules are specific enough to guide refactoring decisions, not just vague advice about "making things faster."

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
GitHub stars: 27.8K
last updated: Jun 10, 2026

View on GitHub

Install

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