What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, and data-fetching waterfalls that are hard to spot during development. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering so AI agents and developers can consistently write, review, and refactor performant React code. ## 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 micro-optimizations, and advanced patterns, each ranked from CRITICAL to LOW impact. - 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 parallelization. - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, the Skill directs you to use Promise.all() for parallel fetching, wrap slow sections in Suspense boundaries, 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.
