What problem does it solve? React and Next.js codebases often ship with hidden performance problems: sequential async waterfalls, bloated bundles from barrel imports, unnecessary re-renders, and duplicated server work. This Skill gives an AI agent 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 - 70 prioritized rules across 8 categories: from CRITICAL (eliminating waterfalls, bundle size) down to LOW (advanced hook patterns), each with incorrect vs. correct code examples and impact metrics. - On-demand rule lookup: individual rule files under rules/ (e.g., async-parallel.md, bundle-barrel-imports.md) can be read for detailed guidance, while AGENTS.md holds the full compiled document. - Use Case: When asked to optimize a slow Next.js page, the agent consults the waterfall rules to parallelize data fetching with Promise.all(), adds strategic Suspense boundaries, and replaces barrel imports with direct or optimized package imports. ## Quick Start Review my Next.js page component using the vercel-react-best-practices skill and refactor any data-fetching waterfalls or bundle-size issues you find.
