Optimizes React and Next.js applications using 45 performance-focused rules curated by Vercel Engineering.
This skill integrates Vercel Engineering's comprehensive performance guidelines into Claude Code, enabling automated refactoring and code generation for React and Next.js. It covers critical areas such as eliminating network waterfalls, optimizing bundle sizes, and improving server-side rendering efficiency. By applying 45 prioritized rules across categories like data fetching and re-render optimization, the skill helps developers identify bottlenecks and implement advanced patterns like Suspense, React.cache, and dynamic imports to ensure production-grade web performance.
Key Features
01Minimizes client-side re-renders using memoization and stable callbacks
02Enhances server-side performance with React.cache and non-blocking operations
03212 GitHub stars
04Reduces bundle size through dynamic imports and barrel file optimization
05Implements rendering optimizations like content-visibility and hoisted JSX
06Eliminates network waterfalls using async-parallel and Suspense boundaries
Use Cases
01Automating performance-focused code reviews for Next.js Pull Requests
02Refactoring legacy React components for better Lighthouse scores and faster load times
03Generating high-performance boilerplate for data-heavy dashboard pages
