What problem does it solve? React and Next.js codebases often suffer from performance issues like async waterfalls, bloated bundles, unnecessary re-renders, and inefficient data fetching. This Skill provides a structured, prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns instead of rediscovering them. ## Core Features & Use Cases - 70 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 concrete TypeScript/TSX examples showing the wrong pattern, the right pattern, and the reasoning behind it. - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, the Skill directs you to wrap independent calls in Promise.all(), add Suspense boundaries for streaming, and avoid barrel file imports to cut bundle size. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React best practices rules.
