What problem does it solve? React and Next.js codebases often ship with performance issues like request waterfalls, bloated bundles, unnecessary re-renders, and hydration mismatches that are hard to catch during development. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering so these issues are caught and fixed while writing, reviewing, or refactoring code. ## Core Features & Use Cases - 57 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 Code Examples: Every rule file includes a brief explanation plus concrete incorrect and correct TypeScript/TSX code samples for direct application during refactoring. - Use Case: When reviewing a Next.js page that fetches user, posts, and comments sequentially, apply the async-parallel rule to rewrite the fetches with Promise.all(), cutting three round trips down to one. ## Quick Start Ask the assistant to review your React component or Next.js page against the Vercel performance rules and refactor any violations it finds.
