Optimizes React and Next.js applications using 45 high-impact performance rules curated by Vercel Engineering.
This skill provides a comprehensive framework for writing, reviewing, and refactoring React and Next.js code to ensure peak performance. Based on Vercel Engineering standards, it guides Claude to eliminate async waterfalls, optimize bundle sizes, and improve server-side execution. It is particularly useful when scaling production applications, reducing load times, or debugging complex re-rendering issues through automated code analysis and structured refactoring patterns following industry-leading performance benchmarks.
Key Features
01Efficient rendering techniques including content-visibility and SVG precision optimization
02Server-side performance tuning through React cache and serialization optimization
03Advanced re-render prevention using memoization and stable callback patterns
040 GitHub stars
05Async waterfall elimination via parallel processing and deferred awaits
06Bundle size reduction using dynamic imports and barrel file avoidance
Use Cases
01Refactoring legacy Next.js pages to improve Core Web Vitals and PageSpeed scores
02Conducting automated code reviews to catch performance bottlenecks before deployment
03Generating new React components that follow Vercel's latest architectural patterns
