What problem does it solve? Writing and maintaining Storybook stories involves many moving parts — CSF3 typing, addon configuration, play functions, MSW mocking, and visual regression setup — and gaps in any of them lead to untested states, flaky tests, or broken builds. This Skill provides a structured workflow for authoring complete story coverage, configuring the workspace correctly, and auditing existing story files for common defects. ## Core Features & Use Cases - Story Authoring: Generates CSF3 story files with satisfies Meta<typeof Component>, default stories, variant matrices, per-state stories (Hover, Focus, Disabled, Loading, Error), and interaction stories with assertion-backed play functions using @storybook/test. - Workspace Configuration: Sets up .storybook/main.ts and .storybook/preview.tsx, registers addons (a11y, docs, vitest, themes), wires MSW network mocking, the Vitest addon, the test runner, and Chromatic visual regression. - Story Auditing: Reviews existing story files across five dimensions — story shape, play-function smells, real network leaks, coverage gaps, and configuration — producing severity-ranked findings with file:line locations. - Use Case: A developer adds a new DatePicker component to a React library and asks for full story coverage; the Skill produces a story plan, a typed CSF3 file with default, variant, state, and interaction stories, and confirms the play functions pass under the Vitest addon. ## Quick Start Write complete CSF3 stories with variants, states, and an interaction play function for my Button component.
