What problem does it solve? React and Next.js applications often suffer from slow load times, data-fetching waterfalls, bloated bundles, and unnecessary re-renders. This Skill provides a prioritized, rule-based guide from Vercel Engineering so AI agents and developers consistently apply proven performance patterns when writing, reviewing, or refactoring code. ## Core Features & Use Cases - 45 Prioritized Rules Across 8 Categories: Covers eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns, each labeled 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, with impact metrics like "2-10x improvement" or "200-800ms import cost". - Use Case: When refactoring a Next.js page that sequentially awaits multiple fetches, apply the async rules to parallelize independent operations with Promise.all() and add strategic Suspense boundaries so the layout renders immediately while data streams in. ## Quick Start Review my Next.js page component using the react-best-practices skill and refactor any data-fetching waterfalls or bundle size issues you find.
