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 70 prioritized, example-driven rules from Vercel Engineering so AI agents and developers can write, review, and refactor code that follows proven performance patterns. ## 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 prioritized by impact from CRITICAL to LOW. - Incorrect vs. Correct Examples: Every rule includes concrete code comparisons with explanations and impact metrics, making it directly actionable for automated refactoring and code review. - Use Case: When reviewing a Next.js page that sequentially awaits three independent fetches, apply the async-parallel rule to rewrite it with Promise.all(), cutting three network round trips down to one. ## Quick Start Ask the AI to review your React or Next.js component for performance issues using the Vercel best practices rules and suggest refactors.
