What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, oversized bundles, and data-fetching waterfalls that are hard to spot during manual review. This Skill gives an AI agent a structured, prioritized rulebook so performance issues are caught and fixed during code generation and refactoring. ## 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 performance, 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 optimized implementation, plus impact metrics like 2-10x improvements or 200-800ms import cost savings. - Modular Rule Files: Individual rules live in rules/ for targeted reading, with a compiled AGENTS.md containing the full guide. - Use Case: When asked to optimize a slow Next.js page, the agent applies rules like parallelizing fetches with Promise.all(), adding Suspense boundaries, replacing barrel imports, and memoizing expensive components. ## Quick Start Review my Next.js page component for performance issues and apply the relevant React best practices rules to fix waterfalls and reduce bundle size.
