sb-setup

Name: sb-setup
Author: strongeron

18stars0forks

How to install sb-setup?

strongeron/storybook-workbench/sb-setup

$npx -y skills add strongeron/storybook-workbench --skill sb-setup

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# sb-setup — native-first install
2
3	This skill is a thin align+verify layer. It does NOT re-implement a bootstrap wizard.
4
5	## Bootstrap — defer to Storybook
6
7	```bash
8	test -d .storybook && grep -q '"storybook"' package.json 2>/dev/null && echo PRESENT \|\| echo NO_STORYBOOK
9	# NO_STORYBOOK → defer to Storybook's OWN official onboarding. `storybook` is the official npm
10	# package (@storybook/cli) — not a URL, not bundled or controlled by this skill; the USER runs it.
11	# This skill ships ZERO runtime dependencies and makes no network calls of its own. See SECURITY.md.
12	npx storybook ai setup # Storybook 10.4 agentic onboarding (the official `storybook` package)
13	```
14
15	## Know what the native flow already does
16
17	Before layering anything on top, read `references/native-ai-setup-prompt.md` — the
18	captured `storybook ai setup` prompt (default `optimized-tests` variant), with its 8 rules of
19	engagement, 8-step plan (discover → shared preview → portals → MSW → write ≤10 colocated stories +
20	one `CssCheck` → `play` discipline → batch-verify → cleanup), 5 done-when criteria, and verbatim
21	code examples. Our job is to NOT redo any of that — only add the under-documented align bits below.
22
23	## Then align + verify (the under-documented bits)
24
25	Load `references/install-wizard.md` for the full align layer (load it **only when you're actually
26	aligning a fresh `storybook ai setup` — Do NOT load it** to answer a one-off "is my Storybook
27	configured right?" question; the checklist below is enough for that):
28
29	- runtime discovery FIRST — `${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/discover-runtime.py` →
30	`.storybook/runtime.json`: the native Step-1 facts as ground truth (provider tree + `from`, root-CSS
31	mechanism (JS import vs `index.html` `<link>`), portal target ids, network/MSW surface). The three
32	bullets below come from it — verify against it, don't re-derive by reading the entry by hand.
33	- viteFinal — strip plugins Storybook can't use; keep aliases.
34	- provider decorators — wrap stories in the app's Router/Theme/Query providers (from `runtime.json.providers`).
35	For a class-based dark theme (toggling `.dark` on `<html>`, colors from CSS vars), the decorator alone
36	isn't enough: also theme the canvas root in `.storybook/preview-head.html` (`html, body, .sb-show-main {
37	background: var(--color-background) }` + `html.dark { color-scheme: dark }`), or `centered` stories render a
38	dark sliver in a white field and `padded`/`fullscreen` ones a white frame. (Snippet in `install-wizard.md` item 9.)
39	- bare-OKLCH / shadcn-channel token bridge — for a project whose `:root` declares **bare channel
40	triplets** (`--background: 0.99 0.003 234`, no `oklch()` wrapper) under shadcn's `--background`/`--card`/…
41	names with *no `--color-` namespace** reaching the iframe, the wrappers' `--color-*` chrome refs resolve
42	to nothing and every surface renders unstyled (the #1 "first run looked broken" gap on OKLCH design
43	systems). Detect it (dominant `css-vars`, channel-triplet values, no `--color-background`) and
44	*auto-generate the `--color- → oklch(var(--bare))` bridge** into `.storybook/preview-head.html` for both
45	modes — same place/mechanism as the canvas-root theming above. Recipe + detection in `install-wizard.md` item 11.
46	- MCP wiring — detect `@storybook/addon-mcp` + `.mcp.json`; wire if present.
47	- panel-visible default — write `.storybook/manager.ts` with
48	`addons.setConfig({ showPanel: true, panelPosition: 'bottom' })` so the Controls / Actions /
49	Accessibility panel shows by default. Storybook ships no `manager.ts`; without it an accidental `A`
50	keypress (or a dragged-closed divider) persists a "panel hidden" state in localStorage and
51	reviewers/agents conclude the stories have no Controls. The Controls panel is where `sb-stories`'
52	`argTypes` surface, so this is what makes that authoring work visible. (Snippet in `install-wizard.md`.)
53	- theme switching (themed projects) — wire `@storybook/addon-themes`, don't hand-roll a `globalTypes.theme`.
54	If runtime discovery finds a theme mechanism (`next-themes`, a class-based `.dark`, or `data-theme`),
55	register `withThemeByClassName` so the toolbar toggles the same `.dark` class the canvas-root theming
56	(item 9) and the bare-OKLCH `--color-*` bridge (item 11) already ke

People who liked this also viewed

6 picks

Type

sb-setup

18stars0forks

View on GitHub

How to install sb-setup?

strongeron/storybook-workbench/sb-setup

$npx -y skills add strongeron/storybook-workbench --skill sb-setup

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# sb-setup — native-first install
2
3	This skill is a thin align+verify layer. It does NOT re-implement a bootstrap wizard.
4
5	## Bootstrap — defer to Storybook
6
7	```bash
8	test -d .storybook && grep -q '"storybook"' package.json 2>/dev/null && echo PRESENT \|\| echo NO_STORYBOOK
9	# NO_STORYBOOK → defer to Storybook's OWN official onboarding. `storybook` is the official npm
10	# package (@storybook/cli) — not a URL, not bundled or controlled by this skill; the USER runs it.
11	# This skill ships ZERO runtime dependencies and makes no network calls of its own. See SECURITY.md.
12	npx storybook ai setup # Storybook 10.4 agentic onboarding (the official `storybook` package)
13	```
14
15	## Know what the native flow already does
16
17	Before layering anything on top, read `references/native-ai-setup-prompt.md` — the
18	captured `storybook ai setup` prompt (default `optimized-tests` variant), with its 8 rules of
19	engagement, 8-step plan (discover → shared preview → portals → MSW → write ≤10 colocated stories +
20	one `CssCheck` → `play` discipline → batch-verify → cleanup), 5 done-when criteria, and verbatim
21	code examples. Our job is to NOT redo any of that — only add the under-documented align bits below.
22
23	## Then align + verify (the under-documented bits)
24
25	Load `references/install-wizard.md` for the full align layer (load it **only when you're actually
26	aligning a fresh `storybook ai setup` — Do NOT load it** to answer a one-off "is my Storybook
27	configured right?" question; the checklist below is enough for that):
28
29	- runtime discovery FIRST — `${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/discover-runtime.py` →
30	`.storybook/runtime.json`: the native Step-1 facts as ground truth (provider tree + `from`, root-CSS
31	mechanism (JS import vs `index.html` `<link>`), portal target ids, network/MSW surface). The three
32	bullets below come from it — verify against it, don't re-derive by reading the entry by hand.
33	- viteFinal — strip plugins Storybook can't use; keep aliases.
34	- provider decorators — wrap stories in the app's Router/Theme/Query providers (from `runtime.json.providers`).
35	For a class-based dark theme (toggling `.dark` on `<html>`, colors from CSS vars), the decorator alone
36	isn't enough: also theme the canvas root in `.storybook/preview-head.html` (`html, body, .sb-show-main {
37	background: var(--color-background) }` + `html.dark { color-scheme: dark }`), or `centered` stories render a
38	dark sliver in a white field and `padded`/`fullscreen` ones a white frame. (Snippet in `install-wizard.md` item 9.)
39	- bare-OKLCH / shadcn-channel token bridge — for a project whose `:root` declares **bare channel
40	triplets** (`--background: 0.99 0.003 234`, no `oklch()` wrapper) under shadcn's `--background`/`--card`/…
41	names with *no `--color-` namespace** reaching the iframe, the wrappers' `--color-*` chrome refs resolve
42	to nothing and every surface renders unstyled (the #1 "first run looked broken" gap on OKLCH design
43	systems). Detect it (dominant `css-vars`, channel-triplet values, no `--color-background`) and
44	*auto-generate the `--color- → oklch(var(--bare))` bridge** into `.storybook/preview-head.html` for both
45	modes — same place/mechanism as the canvas-root theming above. Recipe + detection in `install-wizard.md` item 11.
46	- MCP wiring — detect `@storybook/addon-mcp` + `.mcp.json`; wire if present.
47	- panel-visible default — write `.storybook/manager.ts` with
48	`addons.setConfig({ showPanel: true, panelPosition: 'bottom' })` so the Controls / Actions /
49	Accessibility panel shows by default. Storybook ships no `manager.ts`; without it an accidental `A`
50	keypress (or a dragged-closed divider) persists a "panel hidden" state in localStorage and
51	reviewers/agents conclude the stories have no Controls. The Controls panel is where `sb-stories`'
52	`argTypes` surface, so this is what makes that authoring work visible. (Snippet in `install-wizard.md`.)
53	- theme switching (themed projects) — wire `@storybook/addon-themes`, don't hand-roll a `globalTypes.theme`.
54	If runtime discovery finds a theme mechanism (`next-themes`, a class-based `.dark`, or `data-theme`),
55	register `withThemeByClassName` so the toolbar toggles the same `.dark` class the canvas-root theming
56	(item 9) and the bare-OKLCH `--color-*` bridge (item 11) already ke

People who liked this also viewed

6 picks

Type