What problem does it solve? React and Next.js codebases often suffer from performance issues like data-fetching waterfalls, bloated bundles, unnecessary re-renders, and inefficient server-side serialization. This Skill provides 62 prioritized, actionable rules from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation, review, and refactoring. ## Core Features & Use Cases - 62 Prioritized Rules Across 8 Categories: Covers eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns, each tagged with an impact level from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete TypeScript/TSX examples showing the anti-pattern and the optimized implementation, plus impact metrics like 2-10x improvements from parallelization. - Use Case: When refactoring a Next.js page that sequentially awaits multiple fetches, apply the async-parallel and async-suspense-boundaries rules to parallelize requests with Promise.all() and stream content through Suspense boundaries for faster initial paint. ## Quick Start Ask the AI to review your React component or Next.js page against the Vercel performance rules and refactor any waterfalls, barrel imports, or unnecessary re-renders it finds.
