What problem does it solve? React and Next.js codebases often ship with performance problems like sequential data-fetching waterfalls, bloated bundles from barrel imports, and unnecessary re-renders. This Skill gives an AI agent a structured, impact-prioritized rule set from Vercel Engineering so it can write, review, and refactor code that avoids these issues from the start. ## Core Features & Use Cases - 70 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 with incorrect vs. correct code examples. - Impact-prioritized guidance: Rules are ranked from CRITICAL (e.g., Promise.all parallelization, avoiding barrel imports) to LOW (advanced hook patterns), so the highest-value fixes are applied first. - Individual rule files plus compiled guide: Each rule lives in its own Markdown file under rules/ for targeted lookup, with AGENTS.md providing the full compiled document. - Use Case: While refactoring a Next.js page that fetches user, posts, and comments sequentially, the agent applies the async-parallel rule to combine them into a single Promise.all, cutting three round trips to one. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues using the Vercel best practices rules and suggest concrete fixes.
