Skill for integrating Storybook with spec.md. Auto-generates Stories skeletons from Component API specifications. Use when working with Storybook, Stories, component specifications, or frontend component development. Covers CSF3 format, autodocs integration, Props-to-argTypes mapping, and component API templates. Essential for /think (Component API generation) and /code (Stories generation) commands.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
references/component-api-template.mdreferences/csf3-patterns.mdSkill for integrating Storybook with Claude Code workflow. Covers:
Keywords that activate this skill:
For guaranteed activation:
/think for frontend feature planning → Component API section added/code for component implementation → Stories skeleton generatedSection added to spec.md when planning frontend features with /think.
Location: ### 4.x Component API: [ComponentName] inside ## 4. UI Specification
Contents:
Auto-generated when /code is run and spec.md contains Component API section.
Output: [ComponentName].stories.tsx
Format: CSF3 + autodocs
Auto-detection from feature description:
function shouldGenerateComponentAPI(feature: string): boolean {
const frontendKeywords = [
/component/i,
/ui/i,
/frontend/i,
/button/i,
/form/i,
/modal/i,
/dialog/i,
/card/i,
/list/i,
/table/i,
];
const backendKeywords = [
/api endpoint/i,
/database/i,
/server/i,
/backend/i,
/cli/i,
/migration/i,
];
const hasFrontend = frontendKeywords.some(kw => kw.test(feature));
const hasBackend = backendKeywords.some(kw => kw.test(feature));
return hasFrontend && !hasBackend;
}
interface ComponentSpec {
name: string; // Component name (PascalCase)
description: string; // Description
props: PropDefinition[]; // Props definitions
variants: VariantDefinition[]; // Variants
examples: UsageExample[]; // Usage examples
}
interface PropDefinition {
name: string; // Prop name
type: string; // TypeScript type
required: boolean; // Is required
defaultValue?: string; // Default value
description: string; // Description
}
interface VariantDefinition {
name: string; // Variant name (e.g., "size")
options: string[]; // Options (e.g., ["sm", "md", "lg"])
defaultOption: string; // Default value
}
interface UsageExample {
title: string; // Example title
code: string; // JSX code
description?: string; // Description
}
See: [@./references/component-api-template.md]
See: [@./references/csf3-patterns.md]
# In command YAML frontmatter
dependencies: [storybook-integration, frontend-patterns]
/think "Add Button component"
↓
shouldGenerateComponentAPI("Add Button component")
↓ YES
Add Component API section to spec.md:
## 4.x Component API: Button
### Props
### Variants
### States
### Usage Examples
/code
↓
Component API section in spec.md?
↓ YES
parseComponentSpec(specContent)
↓
Existing Stories file?
├─ YES → Show integration strategy (O/S/M/D)
└─ NO → Generate with generateStoryTemplate(spec)
Options when existing Stories file is found:
[O] Overwrite - Completely replace existing file
[S] Skip - Keep existing file, do not generate
[M] Merge (manual) - Show diff, integrate manually
[D] Diff only - Append only new Stories
/think "Add Button component with primary/secondary variants"
→ Component API section auto-added to spec.md
/code
→ Button.tsx and Button.stories.tsx generated
npm run storybook
→ Props documentation auto-generated via autodocs
This skill is working when: