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 slow server responses. This Skill gives AI agents and developers a prioritized, rule-based checklist from Vercel Engineering to catch and fix these issues during code generation, review, and refactoring. ## Core Features & Use Cases - 65 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 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 improvement" or "200-800ms import cost". - Use Case: When asked to optimize a slow Next.js page, the agent consults rules like async-parallel (Promise.all for independent fetches), server-serialization (minimize RSC props), and bundle-barrel-imports (avoid barrel file imports) to produce a faster implementation. ## Quick Start Review my Next.js page component and apply the Vercel React best practices to eliminate data-fetching waterfalls and reduce bundle size.
