Vercel React Best Practices

A solid reference for React and Next.js performance work, organized by impact so you know what actually matters. The 45 rules span eight categories, from critical waterfall elimination and bundle optimization down to minor JavaScript tweaks. What's useful here is the prioritization: it starts with async patterns and barrel import issues that tank performance, then moves through server-side caching, client fetching with SWR, re-render optimization, and rendering tricks. Each rule includes before/after examples. Use this when writing new components, reviewing PRs, or hunting down why your app feels slow. The categories make it easy to focus on high-impact changes first instead of bikeshedding over premature optimizations.

skills.sh installs: 1.2K
GitHub stars: 1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add am-will/codex-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 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-`