What problem does it solve? React components often accumulate design debt that is invisible to a quick directory scan: unstable useMemo dependencies, props-to-state sync anti-patterns, per-frame recomputation, and leaky type boundaries. This Skill performs a line-by-line health check of one component and turns those findings into a structured, actionable diagnosis report. ## Core Features & Use Cases - Seven-Dimension Scorecard: Scores consumer API, data flow, testability, extensibility, performance, mental model, and boundaries & contracts from 1-5, each backed by concrete code citations in filename:line format. - Frame-Level Performance Analysis: For animation or high-frequency rendering components, traces which computations execute every frame, detects uncached temporary objects, and checks whether useEffect cleanups actually cancel async work. - Prioritized Recommendations: Outputs P0/P1/P2 improvement suggestions, each with problem, impact, direction, and effort estimate (small/medium/large), plus 2-3 design highlights worth spreading. - Use Case: Point the Skill at a 2000-line composite component directory and ask "is this component well designed" to receive a full scorecard, per-dimension analysis with code evidence, and a refactor roadmap. ## Quick Start Ask the AI to diagnose the design quality of the React component in a specific directory or .tsx file and produce the seven-dimension report.
