Storybook Component Workshop
Set up and configure Storybook 9 for any framework with autodetection and best practices. Scaffolds stories, args/controls, interaction tests, a11y checks, and CI-ready component documentation.
This skill configures Storybook 9 for React, Vue, Svelte, or Angular, wiring autodocs, controls, interaction testing, accessibility addons, and visual test hooks. It writes stories with proper args and play functions and structures a component library that doubles as living documentation.
storybook component-testing design-system autodocs ui
When to use
Use when standing up a component library, documenting UI in isolation, writing interaction/a11y tests, or configuring Storybook addons and CI for a design system.
Examples
Story with controls
Author args and controls
Write a Storybook story for a Button component with args for variant, size, and disabled, exposed as interactive controls with autodocs
Interaction test
Add a play function
Add a Storybook play function that types into the search input and asserts the results list updates, so it runs as an interaction test in CI