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 unoptimized server-side data fetching. This Skill gives an AI agent a prioritized, rule-based checklist 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. - Structured rule files: individual Markdown rules under rules/ (e.g., async-parallel.md, bundle-barrel-imports.md) let the agent load only the relevant guidance, with a compiled AGENTS.md for the full document. - Use Case: When asked to optimize a slow Next.js page, the agent applies rules like parallelizing fetches with Promise.all(), adding Suspense boundaries, replacing barrel imports with direct imports, and lazy-loading heavy components via next/dynamic. ## Quick Start Review my Next.js page component for performance issues and refactor it using the Vercel React best practices rules.
