sb-hub
starsforks
How to install sb-hub?
strongeron/storybook-workbench/sb-hub
$npx -y skills add strongeron/storybook-workbench --skill sb-hubHub 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'.
SKILL.md
| 1 | # sb-hub — onboarding check · orchestrator · navigator |
| 2 | |
| 3 | The hub. You don't author here — you **inspect state and route**. Three read-only modes; pick by |
| 4 | intent. Read `CONTEXT.md` once for shared vocabulary, the storage map, and the resume protocol. |
| 5 | |
| 6 | **Load by mode (don't pull both refs up front):** |
| 7 | - **`references/runbook.md`** — the navigator engine (state detection → one next step). Load it for |
| 8 | **Mode 0 / Mode 2** (diagnose / "what's next"). |
| 9 | - **`references/end-to-end-flow.md`** (~220 lines) — the full pipeline worked example for "messy app → |
| 10 | design system". Load it **only for Mode 1 (orchestrate a full audit)**. **Do NOT load it** for a |
| 11 | Mode-0 onboarding check or a Mode-2 next-step lookup — `runbook.md` is all those need. |
| 12 | |
| 13 | **Canonical context (one source).** The bundle has exactly **one** `CONTEXT.md` (shared vocab · STORAGE |
| 14 | MAP · resume). It's never hand-duplicated: in the bundle/plugin install every skill reads this one file |
| 15 | (`CONTEXT.md` / `${CLAUDE_PLUGIN_ROOT}/CONTEXT.md`); a standalone `npx skills add <skill>` ships a |
| 16 | byte-identical *copy* the build vendors, refreshed on update. **`sb-hub` is the orchestrator** — if skills |
| 17 | are installed separately, route through `sb-hub` so the pipeline + shared vocabulary stay authoritative. |
| 18 | |
| 19 | ## Resolve the bundle |
| 20 | |
| 21 | Scripts live in `scripts/`. In this repo: `${CLAUDE_PLUGIN_ROOT}/scripts/`. |
| 22 | When installed as a plugin, use `${CLAUDE_PLUGIN_ROOT}/scripts/`. |
| 23 | |
| 24 | ```bash |
| 25 | CORE=${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}} # shared scripts: "$CORE/scripts/<name>" |
| 26 | ``` |
| 27 | |
| 28 | ## Pick the mode |
| 29 | |
| 30 | | User intent | Mode | |
| 31 | |---|---| |
| 32 | | "is this ready", "where do I start", fresh/unknown repo | **0 · Onboarding check** | |
| 33 | | "audit this app", "do the whole thing", "build Storybook for this app" | **1 · Orchestrate** | |
| 34 | | "what's next", or after any verb appends to the ledger | **2 · Navigate** (default) | |
| 35 | | "this is wrong", "strange behavior", "report a bug", a skill misfired | **3 · Report** | |
| 36 | |
| 37 | --- |
| 38 | |
| 39 | ## Mode 0 — Onboarding check (phase-0 diagnose, read-only) |
| 40 | |
| 41 | A fresh messy app: probe the stack + readiness **before** any verb, print a report, recommend the |
| 42 | first step. No prompts, no writes — re-runnable. |
| 43 | |
| 44 | ```bash |
| 45 | echo "━━ Phase 0 — readiness ━━" |
| 46 | grep -q '"react"' package.json 2>/dev/null && echo " [ok] React" || echo " [warn] no React in package.json" |
| 47 | grep -qE '"vite"|"@vitejs' package.json 2>/dev/null && echo " [ok] Vite" || echo " [info] not Vite (skill targets React+Vite)" |
| 48 | test -d .storybook && grep -q '"storybook"' package.json 2>/dev/null && echo " [ok] Storybook present" || echo " [warn] NO_STORYBOOK → start with sb-setup" |
| 49 | test -d node_modules && echo " [ok] node_modules present" || echo " [warn] deps not installed — run your package-manager install" |
| 50 | lock=$(ls package-lock.json pnpm-lock.yaml yarn.lock 2>/dev/null | head -1); echo " [info] lockfile: ${lock:-none}" |
| 51 | grep -q '@storybook/addon-mcp' package.json 2>/dev/null && test -f .mcp.json && echo " [info] MCP wired → sb-stories uses with-mcp" || echo " [info] no addon-mcp → without-mcp path" |
| 52 | if find .storybook -maxdepth 1 -name '*.json' 2>/dev/null | grep -q .; then |
| 53 | find .storybook -maxdepth 1 -name '*.json' | sed 's/^/ [ok] discovery: /' |
| 54 | else echo " [info] no discovery JSON yet → sb-inventory not run"; fi |
| 55 | grep -q 'storiesLocation:' .storybook/audit/status.md 2>/dev/null && echo " [ok] stories location decided" || echo " [warn] stories location undecided → sb-setup must ASK (isolated .storybook/stories/ vs co-located) before sb-stories" |
| 56 | ``` |
| 57 | |
| 58 | **Worked example — a half-migrated app** (Storybook installed, nothing audited yet): |
| 59 | |
| 60 | ``` |
| 61 | ━━ Phase 0 — readiness ━━ |
| 62 | [ok] React |
| 63 | [ok] Vite |
| 64 | [ok] Storybook present |
| 65 | [ok] node_modules present |
| 66 | [info] lockfile: pnpm-lock.yaml |
| 67 | [info] no addon-mcp → without-mcp path |
| 68 | [info] no discovery JSON yet → sb-inventory not run |
| 69 | [warn] stories location undecided → sb-setup must ASK … |
| 70 | ``` |
| 71 | → Storybook exists but no discovery JSON and location undecided, so **don't** jump to `sb-stories`. |
| 72 | Name **`sb-setup`** first (to record the stories location), then **`sb-inventory`**. That ordering — |
| 73 | *setup before inventory before stories* — is the whole point of the gate: the `[info]`/`[warn]` lines |
| 74 | are the routing signal, not noise. |
| 75 | |
| 76 | Everything the bundle writes lives under `.storybook/` (CONTEXT.md STORAGE MAP) |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
