What problem does it solve? React and Next.js codebases often suffer from performance issues like async waterfalls, bloated bundles, unnecessary re-renders, and inefficient data fetching. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation, review, and refactoring. ## Core Features & Use Cases - 70 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 by 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 or 200-800ms import cost reductions. - Use Case: When refactoring a Next.js page that sequentially awaits user, posts, and comments fetches, the Skill directs you to parallelize with Promise.all(), add Suspense boundaries for streaming, and avoid barrel file imports to cut bundle size. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React best practices rules.
