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 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 improvement" or "200-800ms import cost". - Individual Rule Files for On-Demand Lookup: Rules live in rules/ as standalone Markdown files (e.g., async-parallel.md, bundle-barrel-imports.md) so only relevant guidance is loaded, with a compiled AGENTS.md for the full document. - Use Case: When refactoring a Next.js page that sequentially awaits fetchUser(), fetchPosts(), and fetchComments(), apply the async-parallel rule to rewrite it with Promise.all() and cut three network round trips down to one. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React best practices rules and suggest concrete fixes.
