Vercel React Best Practices

This is Vercel's internal performance playbook turned into 45 concrete rules across 8 priority categories, from eliminating request waterfalls to optimizing re-renders. Use it when writing or reviewing React and Next.js code where performance matters. The categorization by impact (CRITICAL for bundle size and async waterfalls, down to LOW for advanced patterns) makes it easy to know what to fix first. Each rule has a prefix like `async-parallel` or `bundle-barrel-imports` and includes both bad and good code examples. It's opinionated in the right way: stop using barrel imports, use React.cache() for deduplication, preload on hover instead of on mount. If you ship React apps on Vercel or anywhere else, this codifies the patterns their engineering team actually follows.

skills.sh installs: 215
GitHub stars: 45K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add calcom/cal.com --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 45 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-`