What problem does it solve? Mature React/Next/TypeScript codebases gradually accumulate architectural rot — god-components, shallow hooks, tangled server/client boundaries — that makes them hard to work in, but teams struggle to identify which refactors are real deepenings versus cosmetic churn. This Skill scans the whole codebase, separates genuine improvements from tidy-looking busywork, and presents the findings as a visual report you can act on. ## Core Features & Use Cases - Rot scan with deletion test: Explores the codebase for recurring React/Next rot signals (god-components, shallow wrappers, boundary tangles, duplicated logic) and gates every candidate through a deletion test that asks whether removing the module concentrates or merely relocates complexity. - Visual HTML report: On large codebases, renders a self-contained HTML report in the temp directory with one card per candidate — strength badge, before/after Mermaid and SVG diagrams, and a ranked top recommendation. - Drill and scoping: Once you pick a candidate, it scopes the fix by stating the deepening as a problem, designing the new interface twice under opposing constraints, and naming the test that now hits one seam. - Use Case: A salon booking app's BookingFlow.tsx has grown to 640 lines with 12 useState hooks. The scan flags it, rejects the cosmetic split into sub-components, and recommends extracting a deep useBookingMachine() state module as the top pick. ## Quick Start Ask the AI to scan this React codebase for architectural rot and show me the refactor opportunities worth doing.
