What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, and bloated bundles because developers miss subtle performance pitfalls. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation and review. ## Core Features & Use Cases - 70 Prioritized Rules Across 8 Categories: Covers eliminating async waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns. - Incorrect vs. Correct Code Examples: Each rule includes concrete TypeScript/TSX examples showing the anti-pattern and the optimized implementation, with impact metrics like 2-10x improvements. - Use Case: When refactoring a Next.js dashboard that loads slowly, apply the waterfall elimination rules to parallelize data fetching with Promise.all(), use Suspense boundaries for streaming, and replace barrel file imports to cut cold start time by 200-800ms. ## Quick Start Review my Next.js page component and apply the Vercel React best practices rules to eliminate data fetching waterfalls and reduce bundle size.
