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, review, and refactoring. ## 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, each tagged with an impact level from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete 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 dashboard that loads slowly, apply the waterfall rules to parallelize data fetching with Promise.all(), replace barrel imports from lucide-react with direct imports, and wrap heavy components in next/dynamic to cut Time to Interactive. ## Quick Start Review my React component and apply the Vercel performance best practices to eliminate waterfalls and reduce bundle size.
