What problem does it solve? React and Next.js codebases often suffer from slow load times, data-fetching waterfalls, bloated bundles, and unnecessary re-renders. This Skill gives AI agents a structured, prioritized rulebook from Vercel Engineering so generated and refactored code follows proven performance patterns instead of common anti-patterns. ## Core Features & Use Cases - 45 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 ranked by impact from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes side-by-side TypeScript/TSX examples showing the anti-pattern and the optimized implementation, with impact metrics like 2-10x improvements from parallelization. - Modular Rule Files: Individual rule files under rules/ let agents load only the relevant guidance, while AGENTS.md provides the full compiled reference. - Use Case: When asked to optimize a slow Next.js page, the agent applies rules like Promise.all() parallelization, Suspense boundaries, direct imports instead of barrel files, and React.cache() deduplication to produce measurably faster code. ## Quick Start Review my Next.js page component and refactor it using the Vercel React best practices to eliminate data-fetching waterfalls and reduce bundle size.
