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 structured, prioritized rulebook of 70+ Vercel Engineering guidelines so generated or refactored code follows proven performance patterns from the start. ## Core Features & Use Cases - Prioritized Rule Catalog: 70+ rules across 8 categories ranked by impact, from CRITICAL (eliminating waterfalls, bundle size) to LOW (advanced hook patterns), each with incorrect vs. correct code examples. - On-Demand Rule Files: Individual rule files under rules/ (e.g., async-parallel.md, bundle-barrel-imports.md) let the agent load only the guidance relevant to the current task. - Use Case: While building a Next.js dashboard, the agent applies Promise.all() parallelization in API routes, replaces barrel imports from lucide-react with optimized imports, wraps slow sections in Suspense boundaries, and uses React.cache() for per-request deduplication. ## Quick Start Review my Next.js page component and refactor it using the Vercel React best practices rules to eliminate data-fetching waterfalls and reduce bundle size.
