Storybook Workbench

storybook-workbench

A Storybook toolkit for React + Vite apps — driven by your AI coding agent.

Work with Storybook on a real codebase: audit what components are actually there (real vs. AI slop), map the app's flows and user roles, write conformant CSF3 stories for only the states that matter, and ship — across Claude Code, Codex, and Cursor. Everything lands under .storybook/, so src/ stays clean and the whole audit is one removable folder.

11 focused skills over a shared foundation, orchestrated by a hub — not one monolithic prompt.

---

See it live

A live Storybook these skills generated end-to-end on a real, vibe-coded React + Vite app — every view is their output, not a mockup. The cover below is one of them:

Open the live demo — real skill output on a real codebase, panel by panel.

Each section is one skill's output:

• Component inventory (sb-inventory) — real-vs-slop, detected from the app's actual imports.
• App route map (sb-flows) — 37 screens across Public / User / Admin, scored by story coverage.
• Design-system health (sb-health) — colors, tokens, scales, and typography.
• State coverage (sb-wrappers) — every state on one canvas, hover states, per-role views, A/B compares.
• CSF3 stories (sb-stories) — only the materially-different states, no Cartesian blowup.

---

Install

Works on any agent that supports the Agent Skills standard.

Any agent (skills.sh) — all 11 skills (the whole bundle):

npx skills add strongeron/storybook-workbench          # installs ALL 11 skills
npx skills add strongeron/storybook-workbench --all    # same, fully non-interactive (all skills + all agents, -y) — for CI

Just one skill (each ships self-contained — its own scripts, references, wrappers, and the layout decorator):

npx skills add strongeron/storybook-workbench --list          # see the 11 skills
npx skills add strongeron/storybook-workbench -s sb-wrappers   # install only this one
npx skills use strongeron/storybook-workbench@sb-wrappers      # try it without installing

Pipeline note: the renderer skills show data another skill produces — e.g. sb-wrappers' ProjectInventory reads project-inventory.json from sb-inventory, DesignSystemHealth reads sb-health's output. Installed alone they work and render an empty state until that JSON exists; add the producer skill (or supply the JSON) for live data. The pure composition wrappers (StateGrid/ABCanvas/StateMatrix/StorySet) have no cross-skill dependency.

Claude Code (plugin marketplace) — the whole bundle:

claude plugin marketplace add strongeron/storybook-workbench
claude plugin install storybook-workbench@storybook-workbench

Codex: install project-scoped (drop --global — the skills CLI doesn't support global install for Codex), run from your project root:

npx skills add strongeron/storybook-workbench --agent codex --yes

Cursor: skills are project-scoped (Cursor has no global skills dir) — run from your project root, then reload the window:

npx skills add strongeron/storybook-workbench --agent cursor --yes
# then: Cmd/Ctrl+Shift+P → "Developer: Reload Window"

After reload the skills appear in Cursor's / menu under Skills — invoke one by name (/sb-hub, /sb-setup, /sb-inventory, …), or just ask in plain language and the matching skill triggers by description.

Then restart your agent session so it registers the skills.

Updating

Skills install as a snapshot, so to pull the latest — new skills (like sb-figma), fixes, wrapper updates — re-run the add command. It re-fetches and overwrites in place:

npx skills add strongeron/storybook-workbench --all          # update every installed skill to latest
npx skills add strongeron/storybook-workbench -s sb-figma    # update just one skill

Restart your agent session afterward so it re-registers the updated skills.

Kick it off