Storybook Component Dev

Build, document, and test UI components in isolation with Storybook 8. Generates stories, interaction tests, accessibility checks, visual regression configs, and auto-generated documentation.

This skill helps you build component libraries with Storybook. It generates stories with controls and actions, writes interaction tests with play functions, configures accessibility addon with WCAG checks, sets up Chromatic for visual regression testing, creates auto-generated documentation with MDX, and implements composition for multi-package design systems. Covers React, Vue, Angular, and Svelte.

When to use

Use when building component libraries, writing Storybook stories, setting up visual regression testing with Chromatic, documenting design systems, or testing component interactions.

Examples

Interactive stories

Write stories with controls and interaction tests

Create Storybook stories for a DataTable component with sortable columns, pagination controls, and row selection — include interaction tests that verify sorting and filtering

Design system docs

Auto-generate component documentation

Set up Storybook auto-docs for my React component library with MDX pages for getting started, theme tokens, and component API reference