What problem does it solve? React and Next.js codebases often ship with hidden performance problems: sequential async waterfalls, bloated bundles from barrel imports, unnecessary re-renders, and unauthenticated Server Actions. This Skill gives an AI agent a prioritized, rule-based checklist from Vercel Engineering so generated and refactored code follows proven performance patterns from the start. ## 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 tagged by impact from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete TypeScript/TSX examples showing the anti-pattern and the fix, plus impact metrics (e.g., 2-10x improvement from parallelizing fetches, 200-800ms savings from avoiding barrel imports). - Use Case: When asked to review a Next.js page that fetches user, posts, and comments sequentially, the agent applies the Promise.all() and Suspense boundary rules to eliminate the waterfall and stream the layout immediately. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues using the react-best-practices guidelines.
