What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, bloated bundles, 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 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 level from CRITICAL to LOW. - Incorrect vs. Correct Code Examples: Every rule includes concrete before/after TypeScript and TSX snippets with explanations, making it directly actionable for refactoring. - Use Case: When reviewing a Next.js page that fetches user, posts, and comments sequentially, the Skill directs you to parallelize with Promise.all(), add Suspense boundaries for streaming, and replace barrel imports with direct imports to cut bundle size. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React best practices rules.
