sb-wrappers

Name: sb-wrappers
Author: strongeron

18stars0forks

How to install sb-wrappers?

strongeron/storybook-workbench/sb-wrappers

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

Installs into the current project.

Summary

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'.

Files · 1

View on GitHub

SKILL.md

1	# sb-wrappers — composition primitives, not hand-rolled grids
2
3	Don't hand-roll grid markup. Scaffold a typed wrapper.
4
5	Load only what the task needs (these are two large refs — don't pull both for one wrapper):
6	- `references/wrapper-library.md` — the per-wrapper API. Load it **before authoring any
7	wrapper story**, to get the props/args of the one you picked.
8	- `references/composition-patterns.md` — the five composition patterns (A/B, role,
9	status grid, page, motion). Load it only for a Compare / multi-pattern / layered build.
10	Do NOT load it for a single StateGrid / ProjectInventory / DesignSystemHealth scaffold — the
11	library ref alone covers that.
12
13	## Pick the wrapper from intent
14
15	\| User says \| Wrapper \| Tier \|
16	\|---\|---\|---\|
17	\| "compare two designs" / "side-by-side" \| `ABCanvas` \| 1 \|
18	\| "every state on one canvas" \| `StateGrid` \| 1 \|
19	\| "every role" / "permission UI" \| `StateGrid` with `role` as the varied prop (only if the app is role-gated) \| 1 \|
20	\| "track this decision" \| `TrackedDecision` + `DecisionsDashboard` \| 2 \|
21	\| "the full flow" / "ordered sequence" \| `StoryStrip` / `StorySet` \| 2 \|
22	\| "shader / WebGL / 3D / keyframe motion" \| `ShaderCanvas` / `R3FCanvas` / `MotionStage` \| 3 \|
23	\| "token source of truth" / "DS health" / "inventory" \| `TokensCanvas` / `DesignSystemHealth` / `ProjectInventory` \| 4 \|
24	\| "icon coverage" / "which icons / what sizes / where is an icon used" \| `IconMatrix` \| 4 \|
25	\| "whole-app route map" / "journey map" \| `AppFlowGraph` / `JourneyGraph` \| flow \|
26
27	## When in the flow (which wrapper, which step)
28
29	Wrappers split by what feeds them. The data wrappers render a prior step's JSON — scaffold and
30	use them AFTER that step has run, or they render empty. The component/story wrappers you reach for
31	while writing a story. Suggest the matching wrapper as the next step once its input exists.
32
33	\| Reach for it… \| Wrapper(s) \| Needs (run first) \|
34	\|---\|---\|---\|
35	\| after sb-inventory \| `ProjectInventory`, `TokenMatrix` (Colors foundation — value · mapping · adoption; leave the `health` prop off) \| `.storybook/project-inventory.json` \|
36	\| after sb-inventory (usage graph) \| `ComponentUsage`, `UsageExplorer` \| `.storybook/component-pages.json` (`build-component-pages.py` / `refresh-usage.sh`) \|
37	\| after sb-health \| `DesignSystemHealth` \| `.storybook/design-system-health.json` (`TokensCanvas` auto-discovers — no step) \|
38	\| after sb-flows \| `AppFlowGraph`, `JourneyGraph` \| `.storybook/flows.json` \|
39	\| building Foundations/Icons \| `IconMatrix` \| nothing — scans `/src` live; pass `library` + `resolve` \|
40	\| writing a component story (sb-stories) \| `StateGrid` (all states), `StateMatrix` (variants × states) \| the component \|
41	\| composing existing stories \| `StorySet` (by tag/id), `StoryStrip` (ordered) \| stories already written \|
42	\| iteration (Compare / decide) \| `ABCanvas`, `TrackedDecision` + `DecisionsDashboard` \| — \|
43
44	Don't scaffold a data wrapper before its step has produced the JSON — `scaffold-wrapper.sh` prints the
45	generating script for each as a reminder.
46
47	States scattered across many stories → consolidate into ONE matrix. When a component's states are
48	spread over separate stories (a story per state — hard to scan, easy to drift), collapse them into a single
49	`StateGrid` (all states) or `StateMatrix` (variants × states) so every state is reviewable on one canvas.
50	This is the canonical fix for "the Detection header/list states are scattered — make a concise states view".
51
52	Real-usage overlay. `StateGrid` / `StateMatrix` take an optional `usage` prop —
53	`usage={usageJson.components.<Name>}` (from `.storybook/component-usage.json`) badges each variant/state
54	with its real call-site count and strikes through declared-but-unused ones (`×0 unused`). Add it as a
55	flat story in the component's existing CSF, never a new file (a new file makes a new sidebar folder).
56	For colours/type use `TokenUsageGrid` (reads `project-inventory.json` `tokens.map`); for the per-component
57	table, `UsageSection` embeds into each Docs page via `preview.ts` `docs.page` — see `sb-inventory`.
58
59	## Scaffold
60
61	```bash
62	CORE=${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}} # scaffold-wrapper is shared core
63	# scaffold-wrapper.sh is a LOCAL bash script that ships INSIDE this skill — it only copies the bundled
64	# .tsx wrappers into the project's .storybook/. No

People who liked this also viewed

6 picks

Type

sb-wrappers

18stars0forks

View on GitHub

How to install sb-wrappers?

strongeron/storybook-workbench/sb-wrappers

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# sb-wrappers — composition primitives, not hand-rolled grids
2
3	Don't hand-roll grid markup. Scaffold a typed wrapper.
4
5	Load only what the task needs (these are two large refs — don't pull both for one wrapper):
6	- `references/wrapper-library.md` — the per-wrapper API. Load it **before authoring any
7	wrapper story**, to get the props/args of the one you picked.
8	- `references/composition-patterns.md` — the five composition patterns (A/B, role,
9	status grid, page, motion). Load it only for a Compare / multi-pattern / layered build.
10	Do NOT load it for a single StateGrid / ProjectInventory / DesignSystemHealth scaffold — the
11	library ref alone covers that.
12
13	## Pick the wrapper from intent
14
15	\| User says \| Wrapper \| Tier \|
16	\|---\|---\|---\|
17	\| "compare two designs" / "side-by-side" \| `ABCanvas` \| 1 \|
18	\| "every state on one canvas" \| `StateGrid` \| 1 \|
19	\| "every role" / "permission UI" \| `StateGrid` with `role` as the varied prop (only if the app is role-gated) \| 1 \|
20	\| "track this decision" \| `TrackedDecision` + `DecisionsDashboard` \| 2 \|
21	\| "the full flow" / "ordered sequence" \| `StoryStrip` / `StorySet` \| 2 \|
22	\| "shader / WebGL / 3D / keyframe motion" \| `ShaderCanvas` / `R3FCanvas` / `MotionStage` \| 3 \|
23	\| "token source of truth" / "DS health" / "inventory" \| `TokensCanvas` / `DesignSystemHealth` / `ProjectInventory` \| 4 \|
24	\| "icon coverage" / "which icons / what sizes / where is an icon used" \| `IconMatrix` \| 4 \|
25	\| "whole-app route map" / "journey map" \| `AppFlowGraph` / `JourneyGraph` \| flow \|
26
27	## When in the flow (which wrapper, which step)
28
29	Wrappers split by what feeds them. The data wrappers render a prior step's JSON — scaffold and
30	use them AFTER that step has run, or they render empty. The component/story wrappers you reach for
31	while writing a story. Suggest the matching wrapper as the next step once its input exists.
32
33	\| Reach for it… \| Wrapper(s) \| Needs (run first) \|
34	\|---\|---\|---\|
35	\| after sb-inventory \| `ProjectInventory`, `TokenMatrix` (Colors foundation — value · mapping · adoption; leave the `health` prop off) \| `.storybook/project-inventory.json` \|
36	\| after sb-inventory (usage graph) \| `ComponentUsage`, `UsageExplorer` \| `.storybook/component-pages.json` (`build-component-pages.py` / `refresh-usage.sh`) \|
37	\| after sb-health \| `DesignSystemHealth` \| `.storybook/design-system-health.json` (`TokensCanvas` auto-discovers — no step) \|
38	\| after sb-flows \| `AppFlowGraph`, `JourneyGraph` \| `.storybook/flows.json` \|
39	\| building Foundations/Icons \| `IconMatrix` \| nothing — scans `/src` live; pass `library` + `resolve` \|
40	\| writing a component story (sb-stories) \| `StateGrid` (all states), `StateMatrix` (variants × states) \| the component \|
41	\| composing existing stories \| `StorySet` (by tag/id), `StoryStrip` (ordered) \| stories already written \|
42	\| iteration (Compare / decide) \| `ABCanvas`, `TrackedDecision` + `DecisionsDashboard` \| — \|
43
44	Don't scaffold a data wrapper before its step has produced the JSON — `scaffold-wrapper.sh` prints the
45	generating script for each as a reminder.
46
47	States scattered across many stories → consolidate into ONE matrix. When a component's states are
48	spread over separate stories (a story per state — hard to scan, easy to drift), collapse them into a single
49	`StateGrid` (all states) or `StateMatrix` (variants × states) so every state is reviewable on one canvas.
50	This is the canonical fix for "the Detection header/list states are scattered — make a concise states view".
51
52	Real-usage overlay. `StateGrid` / `StateMatrix` take an optional `usage` prop —
53	`usage={usageJson.components.<Name>}` (from `.storybook/component-usage.json`) badges each variant/state
54	with its real call-site count and strikes through declared-but-unused ones (`×0 unused`). Add it as a
55	flat story in the component's existing CSF, never a new file (a new file makes a new sidebar folder).
56	For colours/type use `TokenUsageGrid` (reads `project-inventory.json` `tokens.map`); for the per-component
57	table, `UsageSection` embeds into each Docs page via `preview.ts` `docs.page` — see `sb-inventory`.
58
59	## Scaffold
60
61	```bash
62	CORE=${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}} # scaffold-wrapper is shared core
63	# scaffold-wrapper.sh is a LOCAL bash script that ships INSIDE this skill — it only copies the bundled
64	# .tsx wrappers into the project's .storybook/. No

People who liked this also viewed

6 picks

Type