What problem does it solve? Turning a requested page, form, modal, or dashboard section into production UI often leads to duplicated app-local components, missing Storybook coverage, and schemas that drift from the interface. This Skill enforces a repeatable workflow that keeps shared components, stories, page composition, and API contracts aligned. ## Core Features & Use Cases - Atomic Interface Breakdown: Decomposes any UI request into field shells, controls, labels, validation states, empty states, and async states before writing code. - Three-Layer Delivery: Places reusable primitives in packages/design-system/components, composed sections where fields travel together, and thin page wiring in apps/app. - Storybook and Schema Alignment: Adds stories for every new shared component plus a composed happy-path story, and updates Zod schemas and API routes before wiring submission. - Use Case: When asked to build a merchant onboarding form, the Skill inspects the existing route, creates shared field components, adds Storybook stories, aligns the Zod schema and API route, then composes the page in apps/app. ## Quick Start Ask the agent to use the cerramos-component-builder workflow to turn a requested settings form into shared design-system components with Storybook stories and a wired page in apps/app.
