thkt/integrating-storybook
skills/integrating-storybook/SKILL.md
Storybook integration with spec.md. Auto-generates Stories from Component API. Use when: storybook, stories, props, argTypes, variants, CSF3.
$ install --global
skillsauthnpx skillsauth add thkt/claude-config integrating-storybookInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 9:28 AM8.7s3 files scanned
SKILL.md
- name:
- integrating-storybook
- description:
- >
- API. Use when:
- storybook, stories, props, argTypes, variants, CSF3.
- allowed-tools:
- [Read, Write, Glob, Grep]
- user-invocable:
- false
Storybook Integration
Core Concepts
| 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 |
Component API Location
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 |
Workflow
| Command | Action |
| --------------------- | ---------------------------------------- |
| /think "Add Button" | Adds Component API section to spec.md |
| /code | Generates Button.stories.tsx from spec |
Existing Stories Handling
| Option | Action | | ------ | ------------------------- | | [O] | Overwrite existing file | | [S] | Skip - keep existing | | [M] | Merge - show diff, manual | | [D] | Diff only - append new |
References
| Topic | File |
| ------------- | ---------------------------------------------------------- |
| Component API | ${CLAUDE_SKILL_DIR}/references/component-api-template.md |
| CSF3 Patterns | ${CLAUDE_SKILL_DIR}/references/csf3-patterns.md |
Related Skills
thkt/use-cli-herdr
tools
VerifiedTrustedCommunity
Delegate implementation to codex (coder) via the herdr-agentchat plugin and drive a two-pane conversation to completion.
11SKILL.mdUpdated Jul 27, 2026
thkt/scribe
development
VerifiedTrustedCommunity
Extract recurring patterns from past closed PRs/issues and the research findings in workspace/research/, verify them against the latest code, and propose them to docs/wiki/ via PR.
11SKILL.mdUpdated Jul 20, 2026
thkt/dr
development
VerifiedTrustedCommunity
Create Decision Records (DR) in MADR v4 format with auto-numbering.
11SKILL.mdUpdated Jul 15, 2026
thkt/polish
development
VerifiedTrustedCommunity
Codex review + cleanup. Findings are challenged by critic-audit, not aggregated as facts, and fixes are applied directly. Do NOT use for internal multi-reviewer deep audits or findings reports (use /audit).
11SKILL.mdUpdated Jul 14, 2026