Optimizes React and Next.js application performance using Vercel Engineering's 45-rule optimization framework.
This skill empowers Claude to apply industry-standard performance patterns developed by Vercel Engineering to your React and Next.js projects. It provides a structured methodology for identifying and fixing critical performance bottlenecks, such as request waterfalls, bloated bundle sizes, and inefficient re-renders. By integrating 45 prioritized rules, the skill ensures that code generation, refactoring, and reviews consistently adhere to high-impact best practices for server-side execution, client-side data fetching, and optimal rendering efficiency.
Key Features
01Implements advanced rendering patterns like content-visibility and SVG precision
02Reduces bundle size through dynamic imports and barrel file optimization
03Enhances server-side performance with React cache and deduplication strategies
04Eliminates asynchronous request waterfalls using parallel execution patterns
050 GitHub stars
06Optimizes component re-rendering and JavaScript execution efficiency
Use Cases
01Automating the implementation of complex data-fetching and caching patterns
02Conducting performance-focused code reviews for Next.js App Router projects
03Refactoring legacy React components to improve Core Web Vitals and load times
