Updated 2w ago
by strongeron
storybook-workbench
AI agent skill bundle for Storybook on React + Vite — audit real-vs-slop components, capture flows, write CSF3 stories, ship. Claude Code / Codex / Cursor.
39 GitHub stars (39)
+2 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | +1 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | +1 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 11 skills (11 skills found in its SKILL.md files)
- 0 forks (0 forks)
- 2w ago last update (Last updated 2w ago)
Install
Skills CLI
npx skills add strongeron/storybook-workbench
Asks which skills and agents to install. Just one: npx skills add strongeron/storybook-workbench --skill sb-audit — add -g for every project.
Claude Code
git clone https://github.com/strongeron/storybook-workbenchcp -r "storybook-workbench/skills/sb-audit" ~/.claude/skills/
Copies the sb-audit skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add strongeron/storybook-workbench
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
sb-audit
Periodic Storybook audit — naming-drift survey, archived/decision-board review, lifecycle tagging, usage refresh. Use for 'audit my Storybook', 'find drift', 'show pending decisions', or a periodic catalog health check.
skills/sb-audit/SKILL.md on GitHub (opens in a new tab) -
sb-explore
Iterate on a new or redesigned component in a sandboxed Explore story outside src/components/ (+ Figma), checked against a graduation gate. Use for 'prototype this', 'try a v2', 'explore from Figma', or net-new UI not ready to ship.
skills/sb-explore/SKILL.md on GitHub (opens in a new tab) -
sb-figma
The Figma↔Storybook bridge, both directions, via the native Figma MCP. design→code: map foundation tokens (color/spacing/type) from Figma variables with design↔code parity + drift, and deliver approved Figma components (extract → build → embed), authoring stories via sb-stories' rules. code→design: build Code Connect mappings from components + stories + token parity + usage so Figma Dev Mode show…
skills/sb-figma/SKILL.md on GitHub (opens in a new tab) -
sb-flows
Map the whole app — routes, navigation edges, and persistent nav chrome, not just a screen list. Use for 'map the app', 'show the flow', 'app map', 'audit navigation', or 'how do screens connect'.
skills/sb-flows/SKILL.md on GitHub (opens in a new tab) -
sb-health
Check design-system health for a React+Vite app — raw hex, undefined/unused tokens, scale gaps, DESIGN.md drift, and (opt-in) property→token-family misuse. Use for 'is my design system healthy', 'find raw colors', 'check tokens', or a mixed design system.
skills/sb-health/SKILL.md on GitHub (opens in a new tab) -
sb-hub
Hub for the Storybook CSF3 bundle — diagnose a repo, orchestrate the audit→stories pipeline, or name the next sb-* step. Use for 'set up Storybook', 'audit my app', 'where do I start', 'what's next'.
skills/sb-hub/SKILL.md on GitHub (opens in a new tab) -
sb-inventory
Audit a React+Vite app for real-vs-slop components (by actual imports), the dominant design system, and real prop-value usage at call sites. Use for 'what components do I have', 'which are dead', 'audit this vibe-coded app'.
skills/sb-inventory/SKILL.md on GitHub (opens in a new tab) -
sb-setup
Set up Storybook on a React+Vite app that has none — defer to `npx storybook ai setup`, then align viteFinal/providers/MCP and ask where stories live. Use for 'set up Storybook', 'install Storybook', or NO_STORYBOOK.
skills/sb-setup/SKILL.md on GitHub (opens in a new tab) -
sb-ship
Graduate ONE Explore experiment to a production component — preserve the experiment (cp, never git mv), pick new-vs-update, close the decision loop. Use for 'ship this', 'promote this experiment', 'graduate to production'.
skills/sb-ship/SKILL.md on GitHub (opens in a new tab) -
sb-stories
Write a CSF3 story for ONE React component, covering only its materially-different states (no Cartesian), with a factory when 3+ stories share a shape. Use for 'write a story for X', 'document this component', 'add a Storybook story'.
skills/sb-stories/SKILL.md on GitHub (opens in a new tab) -
sb-wrappers
Scaffold a Storybook-only wrapper — ABCanvas, StateGrid, AppFlowGraph, ProjectInventory, and more. Use for 'compare two designs', 'every state on one canvas', 'the full flow', 'track this decision', or 'scaffold wrappers'.
skills/sb-wrappers/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.
Similar skills
-
agent-skillsby addyosmani Production-grade engineering skills for AI coding agents.
-
taste-skillby Leonxlnx Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
-
Wazaby tw93 🥷 Engineering habits you already know, turned into skills AI assistants like Claude Code, Codex and Cursor can run.
-
cc-sddby gotalab Turn approved specs into long-running autonomous implementation. A minimal, adaptable SDD harness with Agent Skills for Claude Code, Codex,…
-
geo-sleuthby Oldcircle An agent skill that finds where a photo was taken — OpenStreetMap geometry, elevation skylines, satellite imagery and street view — and sho…
-
agent-skills-platformby FrancyJGLisboa Build tested agent skills and govern their lifecycle through a user-defined marketplace: evidence, discovery, updates, rollback, quarantine…