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, prioritized checklist of 64 rules across 8 categories so AI agents and developers can systematically identify and fix these issues. ## Core Features & Use Cases - Prioritized Rule Catalog: 64 rules organized by impact, from CRITICAL (eliminating waterfalls, bundle size) to LOW (advanced patterns), each with incorrect vs. correct code examples. - Automated Validation: Detects legacy CSS-in-JS libraries (styled-components, Emotion, MUI, Chakra) in TSX files and recommends migrating to shadcn/ui with Tailwind CSS. - Use Case: After editing several TSX components, trigger this Skill to review hooks usage, server-side data fetching, RSC serialization boundaries, and re-render patterns, then apply fixes like parallelizing Promise.all calls or hoisting static JSX. ## Quick Start Review my React components in the components directory for performance issues and suggest fixes based on the Vercel best practices rules.
