Agent skill · software engineering · yonatangross
storybook-testing
Storybook 10 testing patterns with Vitest integration, ESM-only distribution, CSF3 typesafe factories, play() interaction tests, Chromatic TurboSnap visual regression, module automocking, accessibility addon testing, and autodocs generation. Use when writing component stories, setting up visual regression testing, configuring Storybook CI pipelines, or migrating from Storybook 9.
Why this skill is useful
Adds specific patterns and integration techniques for testing Storybook components with Vitest that the AI wouldn't reliably generate on its own.
What it needs
Requires storybook, vitest installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Storybook Testing — Storybook 10 Overview Storybook 10 unifies component testing into a single workflow: interaction tests via play() functions, visual regression via Chromatic TurboSnap, and accessibility audits via the a11y addon — all running through Vitest. Stories are executable test specifications, not just documentation. What's new in Storybook 10 (vs 9): ESM-only enforced — the single breaking change; Node 20.16+ / 22.19+ / 24+ required; 29% smaller install Module automocking (sb.mock) — build-time module mocking, scoped per-project in preview.ts CSF factories (React, preview) — defineMain → definePreview → preview.meta() → meta.story() chain Essential addons in core — viewport, controls, interactions, actions no longer separate deps Import path changes — @storybook/test → storybook/test (old paths still work as aliases) React Server Component story support — test RSC in isolation Vitest 4 support — experimental-addon-test renamed to addon-vitest When to use this skill: Writing component stories in CSF3 format with TypeScript Setting up interaction tests with play() functions Configuring Chromatic visual regression with TurboSnap Using module automocking at the story level Running accessibility tests in CI via the a11y addon Generating living documentation with autodocs Migrating from Storybook 9 to 10 --- Quick Reference Rule Impact Description ------ -------- ------------- storybook-csf3-factories HIGH Typesafe CSF3 story factories with satisfies Meta storybook-play-functions CRITICAL Interaction testing with play() and @storybook/test storybook-vitest-integration HIGH Run stories as Vitest tests via @storybook/addon-vitest storybook-chromatic-turbosnap HIGH TurboSnap reduces snapshot cost 60-90% storybook-sb-mock HIGH Story-level module mocking with sb.mock storybook-a11y-testing CRITICAL Automated axe-core accessibility scans in CI storybook-autodocs MEDIUM Auto-generated docs from stories --- Storybook Testing Pyramid Each layer catches different defect …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/storybook-testing--e0d87f