What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, oversized bundles, and server-side waterfalls that are hard to spot during manual review. This Skill gives AI agents a structured, prioritized rulebook of 64 performance guidelines from Vercel Engineering so generated and refactored code follows proven optimization patterns. ## Core Features & Use Cases - Prioritized Rule Catalog: 64 rules across 8 categories ranked by impact, from critical waterfall elimination and bundle size reduction to advanced patterns like useEffectEvent. - Incorrect vs. Correct Examples: Each rule file shows a wrong implementation alongside the optimized version with explanations and impact metrics. - Quick-Reference Prefixes: Rules are organized by prefixes like async-, bundle-, server-, and rerender- for fast lookup during code review. - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, the Skill directs the agent to apply async-parallel and rewrite the code with Promise.all() to cut three round trips down 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 apply the recommended fixes.
