Storybook

Use this skill when work touches Storybook 10 (or upgrades into it): stories, CSF, config, docs, interaction/a11y/visual tests, Vitest addon, portable stories, framework packages, or migrations from 8.x/9.x.

Workflow

1. Inspect the local Storybook surface before changing code:
   • Package versions for storybook, framework package (e.g. @storybook/react-vite, @storybook/nextjs-vite), @storybook/addon-docs, @storybook/addon-a11y, @storybook/addon-vitest, Node, Vite/Vitest, and React/Vue/Svelte peers.
   • Config: .storybook/main.ts|js (must be ESM), preview.ts|tsx, optional manager.ts, vitest.setup.ts, story globs, staticDirs.
   • Story style: CSF3 Meta/StoryObj, experimental CSF Next (definePreview / preview.meta / meta.story), MDX docs, tags.
   • Testing path: Vitest addon, legacy test-runner, portable composeStories, Chromatic/visual, a11y.
2. Refresh current docs when versions are unclear or work touches upgrades, ESM, CSF Next, or Vitest browser mode. Start from source-map.md.
3. For install, frameworks, main/preview, core features vs addons, and CLI, use setup-core.md.
4. For CSF3/CSF Next, args, render, decorators, parameters, tags, and docs, use writing-stories.md.
5. For play, storybook/test, Vitest addon, portable stories, and a11y, use testing.md.
6. For builds, CI, doctor/upgrade, 8→9→10 package moves, and common failures, use production-migration.md.

Implementation Judgment