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
- Storybook itself, with the framework preset for the project's bundler (Argo:
@storybook/react-vite). Pointstoriesat 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. @storybook/addon-vitest. This is what turns a story into a real test: every story with aplayfunction runs as a Vitest assertion, in CI, not just a page a human loads. Without it, "reviewed in Storybook" means someone looked, once.@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.