What problem does it solve? React and Next.js codebases often suffer from performance issues like data-fetching waterfalls, bloated bundles, unnecessary re-renders, and server-side bottlenecks 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 generate and refactor performant 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 performance, 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 parallelization. - Use Case: When refactoring a Next.js page that sequentially awaits multiple fetches, apply the async rules to convert them into parallel Promise.all() calls and add Suspense boundaries so the layout renders immediately while data streams in. ## Quick Start Ask the AI to review your React component or Next.js page against the Vercel React best practices rules and suggest performance improvements.
