Storybook integration with spec.md. Auto-generates Stories from Component API. Use when: storybook, stories, props, argTypes, variants, CSF3.
From shipnpx claudepluginhub thkt/dotclaude --plugin toolkitThis skill is limited to using the following tools:
references/component-api-template.mdreferences/csf3-patterns.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
| Concept | Description |
|---|---|
| Component API | Props, Variants, States defined in spec.md |
| CSF3 | Component Story Format 3 + autodocs |
| Auto-generation | /code generates Stories from spec.md |
Add to spec.md when implementing frontend components.
| Content | Description |
|---|---|
| Props Interface | TypeScript interface |
| Variants | Style options |
| States | default, hover, active, disabled |
| Usage Examples | TSX code |
| Command | Action |
|---|---|
/think "Add Button" | Adds Component API section to spec.md |
/code | Generates Button.stories.tsx from spec |
| Option | Action |
|---|---|
| [O] | Overwrite existing file |
| [S] | Skip - keep existing |
| [M] | Merge - show diff, manual |
| [D] | Diff only - append new |
| Topic | File |
|---|---|
| Component API | ${CLAUDE_SKILL_DIR}/references/component-api-template.md |
| CSF3 Patterns | ${CLAUDE_SKILL_DIR}/references/csf3-patterns.md |