strongeron

strongeron/storybook-workbench

Plugin Claude Code

Storybook CSF3 toolkit — audit, capture, author, and ship Storybook for React+Vite apps as focused skills.

strongeron/storybook-workbench

Plugin Claude Code

Work WITH Storybook on React+Vite apps: audit a vibe-coded codebase for real-vs-slop components, capture flows/app-maps, write CSF3 stories, and ship — as focused skills, not one monolith.

strongeron/storybook-workbench

Skill Claude CodeCodex

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.

strongeron/storybook-workbench

Skill Claude CodeCodex

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.

strongeron/storybook-workbench

Skill Claude CodeCodex

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…

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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.

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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

strongeron/storybook-workbench

Skill Claude CodeCodex

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