What problem does it solve? React and Next.js codebases often suffer from performance issues like data-fetching waterfalls, bloated bundles, unnecessary re-renders, and inefficient server-side patterns. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering so AI agents and developers can consistently identify and fix these problems 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". - Modular Rule Files with Compiled Guide: Individual rules live in rules/ for targeted lookup, while AGENTS.md provides the full compiled document for comprehensive reviews. - Use Case: When asked to optimize a slow Next.js page, the agent can apply rules like async-parallel (Promise.all for independent fetches), bundle-barrel-imports (direct imports instead of barrel files), and server-cache-react (React.cache for per-request deduplication) to eliminate the most impactful bottlenecks first. ## Quick Start Ask the agent to review your React or Next.js component for performance issues using the Vercel best practices rules and suggest prioritized fixes.
