Optimizes React and Next.js applications using 45 high-impact performance rules curated by Vercel Engineering.
This skill integrates comprehensive performance optimization guidelines from Vercel Engineering directly into your Claude Code workflow. It provides specialized guidance for writing, reviewing, and refactoring React and Next.js codebases with a focus on eliminating network waterfalls, reducing bundle sizes, and improving server-side rendering efficiency. By applying these 45 prioritized rules, the skill helps you implement industry-leading patterns for data fetching, memoization, and resource loading to ensure your applications achieve peak performance and optimal Core Web Vitals.
Key Features
01Improves rendering speed with CSS grouping and SVG coordinate precision
02Eliminates network waterfalls via parallel fetching and Suspense boundaries
03Optimizes bundle sizes using dynamic imports and barrel import avoidance
040 GitHub stars
05Reduces unnecessary re-renders through memoization and stable callback patterns
06Enhances server-side performance with React cache and non-blocking operations
Use Cases
01Automating the identification of performance bottlenecks during code reviews
02Refactoring legacy React components to improve load times and responsiveness
03Reviewing Next.js App Router implementations for optimal data fetching patterns
