Vercel React Best Practices

This is Vercel's internal performance playbook turned into a Claude skill with 62 rules across 8 categories, from eliminating request waterfalls to micro-optimizations like hoisting RegExp outside loops. Each rule has a priority rating and prefix (async-, bundle-, server-, etc.) so Claude knows what to focus on first. Most valuable when refactoring existing React/Next.js code or reviewing PRs, since it catches things like barrel file imports killing your bundle size or accidentally serializing too much data in RSC props. The waterfall elimination and bundle optimization rules alone justify having this in your toolkit. Worth noting it assumes you're already comfortable with React, this isn't a beginner's guide but a reference for writing production-grade code.

GitHub stars: 47.2K
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add cherryhq/cherry-studio --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 62 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-`