React Best Practices

Vercel's production-grade React and Next.js performance rulebook, organized into 57 specific rules across 8 priority-ranked categories. Use this when writing components, reviewing PRs, or refactoring for performance. It covers the critical stuff first (eliminating waterfalls, bundle optimization) before moving to rendering and re-render optimizations. Each rule has a prefixed name like `async-parallel` or `bundle-barrel-imports` with concrete before/after examples. The priority system is smart: it pushes you toward fixes that actually move the needle on Core Web Vitals rather than micro-optimizations. Good reference for teams that want consistent patterns without bikeshedding every performance decision.

skills.sh installs: 380
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill 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-`