What problem does it solve? Writing Storybook stories for a design system often produces inconsistent examples, placeholder content, and drift between component code, specs, and stories. This Skill enforces a canonical workflow so every .stories.tsx, .principles.stories.tsx, and .anatomy.stories.tsx file uses real product scenarios, consistent structure, and stays synchronized with the component's code and spec. ## Core Features & Use Cases - Three-layer story positioning: Routes each story to the correct layer — showcase (visual catalog), anatomy (technical spec replacing Figma inspect), or principles (usage judgment with do/don't examples). - Registry-driven baselines: Loads a story-baseline registry per primitive component, copies production-grade canonical patterns, and blocks writing stories without a registry entry. - Anatomy 6-story standard: Enforces the canonical Overview, Inspector, ColorMatrix, SizeMatrix, StateBehavior, and Accessibility exports with token-first values cross-checked against the component's cva definitions. - Use Case: When asked to add stories for a Button component, the Skill reads the spec and cva definitions, maps spec rules to stories via trait-based templates, selects real SaaS scenarios (Jira, Stripe, Notion), and runs a self-check checklist before delivery. ## Quick Start Ask the assistant to write or review stories for a design-system component, for example by saying "write anatomy stories for the Button component".
