What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, bloated bundles, and sequential data-fetching waterfalls. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven performance patterns instead of guessing. ## Core Features & Use Cases - 57 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 tagged by impact level 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, plus impact metrics like 2-10x improvements from parallelizing fetches. - Use Case: When refactoring a Next.js page that loads slowly, apply the rules to convert sequential awaits into Promise.all() calls, replace barrel file imports with direct imports, add Suspense boundaries for streaming, and minimize RSC serialization payloads. ## 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.
