setup-storybook-practice

Installation
SKILL.md

Setup Storybook Practice

Storybook reviewed as pictures catches nothing a bug can hide behind; Storybook run as a test does. This is what to install, in what order, and the checklist a story author follows after. Argo's own config (apps/desktop/.storybook/main.ts, preview.ts, storybook-host.ts) is a worked example, not the thing to copy — copy the shape, use this project's own component paths.

1. Install, in this order

  1. Storybook itself, with the framework preset for the project's bundler (Argo: @storybook/react-vite). Point stories at the real component globs, not a wildcard over the whole source tree — a story glob that reaches test fixtures or generated code produces stories nobody wrote.
  2. @storybook/addon-vitest. This is what turns a story into a real test: every story with a play function runs as a Vitest assertion, in CI, not just a page a human loads. Without it, "reviewed in Storybook" means someone looked, once.
  3. @storybook/addon-a11y, after the vitest addon, not instead of it — the a11y check below runs inside the same test pass. Do not add a separate documentation, design-file (Figma-embed) or theme-switcher addon at this step; step 5 says why each is skipped.
Installs
2
First Seen
1 day ago