Help us improve
Share bugs, ideas, or general feedback.
From jaan-to
Generates CSF3 Storybook stories for components (React, Vue, shadcn/ui) with variant coverage and state matrices. Invoke when creating component stories.
npx claudepluginhub parhumm/jaan-to --plugin jaan-toHow this skill is triggered — by the user, by Claude, or both
Slash command
/jaan-to:frontend-story-generate [component-path or frontend-design/frontend-scaffold output] [--contract backend-api-contract-path][component-path or frontend-design/frontend-scaffold output] [--contract backend-api-contract-path]This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Generate CSF3 Storybook stories for components with variant coverage and state matrices.
Guides writing, updating, and reviewing Storybook stories with a strict workflow. Pulls story-writing rules from the MCP, ensures a running preview, and prevents unverified stories.
Creates and reviews Storybook component documentation with stories, MDX, decorators, interaction tests, and visual baselines. Useful for setting up design system presentations or isolated component state previews.
Integrates Storybook MCP server to discover components via docs manifest, preview stories with embeddable URLs, and run tests/a11y audits. Use for reusing existing components, visual verification, and MCP-based testing in React/Storybook projects.
Share bugs, ideas, or general feedback.
Generate CSF3 Storybook stories for components with variant coverage and state matrices.
$JAAN_CONTEXT_DIR/tech.md - Tech stack context (optional)$JAAN_CONTEXT_DIR/design.md - Design system guidelines (optional, #storybook and #conventions sections)$JAAN_TEMPLATES_DIR/jaan-to-frontend-story-generate.template.md - Output template$JAAN_LEARN_DIR/jaan-to-frontend-story-generate.learn.md - Past lessons (loaded in Pre-Execution)${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.md - Shared reference (CSF3 format, CVA detection, MCP degradation)${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md - Language resolution protocolArguments: $ARGUMENTS
Accepts any of:
.tsx/.jsx/.vue component fileContract parsing: If --contract present, extract path first, validate file exists and contains openapi: or swagger: key, then parse remaining positional argument as component-path or upstream output.
If no input provided, ask: "Which component should I generate stories for? (path, or 'scan' to find components without stories)"
MANDATORY — Read and execute ALL steps in: ${CLAUDE_PLUGIN_ROOT}/docs/extending/pre-execution-protocol.md
Skill name: frontend-story-generate
Execute: Step 0 (Init Guard) → A (Load Lessons) → B (Resolve Template) → C (Offer Template Seeding)
Also read context files if available:
$JAAN_CONTEXT_DIR/design.md — Storybook conventions, component library infoRead and apply language protocol: ${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
Override field for this skill: language_frontend-story-generate
Language exception: Generated code output remains in the project's programming language.
ultrathink
Use extended reasoning for:
Determine input type and extract component information:
If component path: Read the file, extract component name, props interface, exports If frontend-design/scaffold output: Read the output folder, find code files If empty (scan mode):
Glob: src/**/*.tsx to find all componentsGlob: src/**/*.stories.tsx to find existing storiesPresent input summary:
STORY GENERATION INPUT
──────────────────────
Component(s): {list with file paths}
Existing Stories: {count found / count missing}
Framework: {React/Vue detected from extension and imports}
For each target component:
Read component source — Extract:
Detect variant system:
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "CVA Variant Detection" for grep patterns.
Grep: "cva(" {component_path} — CVA usageGrep: "variants:" {component_path} — Variant definitionsGrep: "defaultVariants:" {component_path} — DefaultsMCP enrichment (optional, graceful degradation):
mcp__storybook-mcp__get-ui-building-instructions for project CSF conventionsmcp__storybook-mcp__get-component-documentation for existing docs*.stories.tsx files to infer conventionsCheck existing stories: Glob: {component_dir}/*.stories.tsx
useQuery, useMutation, useSuspenseQuery, fetch(, axios., createClientThis data drives MSW handler selection in Step 5.
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "Component State Coverage Matrix" for required states.
Build coverage matrix per component:
STORY COVERAGE PLAN
───────────────────
Component: {ComponentName}
Props: {count} ({list})
Variants: {count from CVA} ({list})
Stories to Generate:
Default — Base state with default props
Loading — {yes/N/A} — Skeleton or spinner
Error — {yes/N/A} — Error message state
Empty — {yes/N/A} — No-data state
Disabled — {yes/N/A} — Disabled form elements
{Variant1} — CVA variant: {value}
{Variant2} — CVA variant: {value}
{EdgeCase} — Long text / RTL / etc.
Total: {count} stories
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "argTypes Controls" for type mapping table.
Map each prop to appropriate Storybook control type based on TypeScript type.
Present coverage plan to user.
Use AskUserQuestion:
Do NOT proceed to Phase 2 without explicit approval.
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "CSF3 Story Format Spec" for the base template and rules.
For each component, generate a CSF3 story file:
meta with Meta<typeof ComponentName>tags: ['autodocs'] for automatic documentationargTypes from Step 4 mappingStoryObj<typeof meta>args objects (not render functions)includeStories / excludeStories if data exports neededFor components identified in Step 2.5 as API-dependent:
import { http, HttpResponse, delay } from 'msw'parameters.msw.handlers to each story with per-story overridesawait delay('infinite') to test loading statesReference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/openapi-integration-reference.mdsection "MSW + Storybook Integration" for handler patterns andparameters.msw.handlersformat.
Read template: $JAAN_TEMPLATES_DIR/jaan-to-frontend-story-generate.template.md
Fill sections:
Meta<typeof Component> + StoryObj<typeof meta>)tags: ['autodocs'] presentIf any check fails, fix before proceeding.
Show generated stories code preview and coverage summary.
Use AskUserQuestion:
source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/id-generator.sh"
SUBDOMAIN_DIR="$JAAN_OUTPUTS_DIR/frontend/story"
mkdir -p "$SUBDOMAIN_DIR"
NEXT_ID=$(generate_next_id "$SUBDOMAIN_DIR")
slug="{component-name-slug}"
OUTPUT_FOLDER="${SUBDOMAIN_DIR}/${NEXT_ID}-${slug}"
Write files:
mkdir -p "$OUTPUT_FOLDER"{id}-{slug}.md — Documentation{id}-{slug}-stories.tsx — CSF3 stories{id}-{slug}-readme.md — Integration readme with Source → Destination tablesource "${CLAUDE_PLUGIN_ROOT}/scripts/lib/index-updater.sh"
add_to_index \
"$SUBDOMAIN_DIR/README.md" \
"$NEXT_ID" \
"${NEXT_ID}-${slug}" \
"{ComponentName} Stories" \
"{Executive summary — stories for ComponentName covering N states}"
Confirm:
Files written to:
$JAAN_OUTPUTS_DIR/frontend/story/{NEXT_ID}-{slug}/
Stories generated successfully!
Next Steps:
- Run
/jaan-to:dev-output-integrateto copy stories into your project- Run
/jaan-to:frontend-visual-verifyto visually verify components via Storybook- Start Storybook:
npm run storybookto see stories in the catalog- Run
/jaan-to:frontend-component-fixif any visual issues found
Use AskUserQuestion:
If "Learn from this": Run /jaan-to:learn-add frontend-story-generate "{feedback}"
$JAAN_OUTPUTS_DIR path with dev-output-integrate compatibility