This source did not publish a separate summary. Review SKILL.md before using the skill.
SKILL.md
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:
Refactoring existing React/Next.js code
Writing new React components or Next.js pages
Fixing visual instability or layout shift (CLS) issues
Preventing flickering when reading from localStorage or cookies
Handling hydration mismatches with client-only data
Optimizing font loading (FOIT/FOUT prevention)
Adding proper dimensions to images and dynamic content
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-
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
async-defer-await - Move await into branches where actually used
async-parallel - Use Promise.all() for independent operations
async-dependencies - Use better-all for partial dependencies
async-api-routes - Start promises early, await late in API routes
async-suspense-boundaries - Use Suspense to stream content
