What problem does it solve? React and Next.js codebases often suffer from slow load times, data-fetching waterfalls, bloated bundles, and unnecessary re-renders. This Skill gives AI agents and developers a prioritized, rule-based checklist to detect and fix these performance problems during code generation, review, and refactoring. ## Core Features & Use Cases - 64 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 improvements from parallelizing fetches. - Use Case: When asked to optimize a slow Next.js page, the agent applies rules such as replacing sequential awaits with Promise.all(), avoiding barrel file imports from libraries like lucide-react, using React.cache() for per-request deduplication, and adding Suspense boundaries for faster initial paint. ## Quick Start Ask the agent to review your React or Next.js component for performance issues and apply the Vercel best practices rules to fix any waterfalls, bundle bloat, or unnecessary re-renders it finds.
