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 gives AI agents and developers a prioritized, rule-based checklist to catch and fix these performance issues during code generation and review. ## Core Features & Use Cases - 70 Prioritized Rules Across 8 Categories: Covers eliminating async waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns, each ranked by impact 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 or 200-800ms import cost reductions. - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, apply the async-parallel rule to convert the sequential awaits into a single Promise.all(), cutting three network round trips down to one. ## Quick Start Ask the AI to review your React component or Next.js page against the Vercel performance rules and refactor any waterfalls, barrel imports, or unnecessary re-renders it finds.
