What problem does it solve? It prevents architectural drift in a large React component library by defining exactly where new components belong, how they handle loading and empty states, and which conventions govern forms, tables, and responsive behavior. ## Core Features & Use Cases - Four-layer architecture: Enforces a one-way dependency rule across ui primitives, blocks, features, and views so domain code never leaks into reusable primitives. - State handling utilities: Replaces hand-rolled isLoading/isError ladders with ConditionalBlock and ConditionalList components whose union prop types force complete state handling at compile time. - Slots and slotProps conventions: Standardizes how consumers inject content and configure internal elements without ad-hoc props. - Use Case: When adding a new mileage tracking UI, the skill directs you to place it in @features/mileage, reuse @blocks table variants, wire loading states through ConditionalList, and expose customization via slots rather than new one-off props. ## Quick Start Ask the assistant to review or scaffold a new React component following the component-architecture layering, state handling, and slots conventions.
