What problem does it solve?
Front-end teams often produce inconsistent, untested, and undocumented UI components that cause regressions, slow reviews, and brittle integrations. This Skill codifies component structure, testing, and Storybook requirements so every component is discoverable, testable, and consistent across the codebase.
Core Features & Use Cases
- Tiered architecture enforcement: Enforces the four-tier import rules (ui, common, layouts, features) and correct file placement to prevent circular or inappropriate dependencies.
- Component conventions & templates: Requires named exports, exported props interfaces, className merging via cn(), and a root data-testid for reliable testing.
- Mandatory Storybook and tests: Mandates colocated stories with args for Controls, variant and edge-case stories, barrel exports, and unit tests under tests/unit/presentation/web.
- Use Case: Add a new FeatureListItem component in components/common with a Storybook Default and variant stories, a root data-testid, an index barrel export, and a matching unit test.
Quick Start
Create a new Tier 1 React component named FeatureListItem in components/common with a colocated Storybook story that includes a Default story with args and variants, add a root data-testid, export the props interface and named export, update the common barrel export, and add a unit test under tests/unit/presentation/web/common.
