React Best Practices

This is Vercel's performance optimization guide turned into a skill, with 45 rules across eight categories from critical waterfalls to advanced patterns. It's meant for writing, reviewing, or refactoring React and Next.js code. The rules are prioritized by impact, so you get the big wins first: eliminating request waterfalls, cutting bundle size with better imports, then working down through server optimizations and client re-render patterns. Each rule has a prefix like `async-` or `bundle-` and includes before/after examples. Honest take: the categorization and priority system make this more useful than a flat checklist, though you'll still need judgment about which rules matter for your specific bottleneck.

skills.sh installs: 550
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --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 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-`