What problem does it solve? React and Next.js codebases often suffer from performance issues like async waterfalls, bloated bundles, unnecessary re-renders, and inefficient data fetching that are hard to catch during manual review. This Skill provides a structured, impact-prioritized checklist of 64 rules across 8 categories so AI agents and developers can systematically identify and fix these issues. ## Core Features & Use Cases - Impact-Prioritized Rule Set: 64 rules organized into 8 categories from CRITICAL (eliminating waterfalls, bundle size) to LOW (advanced patterns), each with incorrect vs. correct code examples. - Automated Triggering: Activates when editing TSX/JSX component files or when React imports are detected, with path and import pattern matching. - Migration Guidance: Detects legacy CSS-in-JS libraries (styled-components, Emotion, MUI, Chakra) and chains to shadcn/ui + Tailwind recommendations. - Use Case: After refactoring several components in a Next.js app, run this review to catch sequential await waterfalls in server components, barrel file imports inflating the bundle, and missing memoization on expensive renders. ## Quick Start Review my React components in the components directory for performance issues and suggest fixes based on the best practices checklist.
