What problem does it solve? Frontend codebases drift into inconsistent structures: oversized single-file components, inline data mixed with presentation, vague names like Card or utils.ts, and formatting logic buried in JSX. This Skill gives the agent a deterministic decision framework for where each piece of code lives and what it is named when creating, refactoring, splitting, or promoting components. ## Core Features & Use Cases - Prototype vs Production mode detection: Chooses between a single self-contained TSX file with inline data and a four-layer production structure based on explicit user words, file location signals, or a clarifying question. - Four-layer production architecture: Separates code into Data (*-content.ts), Logic (verb-noun .ts), Primitive (.tsx), and Composed (.tsx) layers with a one-directional dependency arrow. - Naming and SRP enforcement: Applies kebab-case file naming, specific component noun phrases, verb-led function names, and a one-sentence single-responsibility test. - Promote workflow: Converts a prototype into production code by extracting content, logic, and subcomponents into separate typed files. - Use Case: Ask the agent to refactor a 300-line dashboard component; it extracts dashboard-metrics-content.ts, format-metric-trend.ts, trend-badge.tsx, and metric-card.tsx with correct imports and naming. ## Quick Start Ask the agent to build a new React component or refactor an existing one, and it will declare the mode and apply the matching structure and naming rules.
