276ed71f31
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
148 lines
2.6 KiB
Markdown
148 lines
2.6 KiB
Markdown
---
|
|
name: dss-storybook
|
|
description: Set up and configure Storybook for design system components
|
|
arguments:
|
|
- name: action
|
|
description: "Action to perform: scan, generate, or configure"
|
|
required: true
|
|
- name: path
|
|
description: Path to project directory
|
|
required: false
|
|
---
|
|
|
|
# DSS Storybook Command
|
|
|
|
Set up, configure, and generate Storybook stories for design system documentation.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/dss-storybook <action> [path]
|
|
```
|
|
|
|
Examples:
|
|
```
|
|
/dss-storybook scan
|
|
/dss-storybook generate ./src/components
|
|
/dss-storybook configure
|
|
```
|
|
|
|
## Actions
|
|
|
|
| Action | Description |
|
|
|--------|-------------|
|
|
| scan | Scan for existing Storybook setup and components |
|
|
| generate | Generate stories for components |
|
|
| configure | Configure Storybook theme with design tokens |
|
|
|
|
## What This Does
|
|
|
|
### Scan
|
|
- Checks for existing Storybook installation
|
|
- Finds components without stories
|
|
- Reports Storybook configuration status
|
|
|
|
### Generate
|
|
- Creates story files for components
|
|
- Generates prop documentation
|
|
- Creates variant stories
|
|
|
|
### Configure
|
|
- Sets up Storybook theme
|
|
- Integrates design tokens
|
|
- Configures addons
|
|
|
|
## Instructions for Claude
|
|
|
|
When the user runs this command:
|
|
|
|
1. Validate action is valid (scan, generate, configure)
|
|
2. Use `dss_setup_storybook` tool with action and path
|
|
3. Present results based on action:
|
|
|
|
**For scan:**
|
|
- Show Storybook status
|
|
- List components with/without stories
|
|
- Recommend next steps
|
|
|
|
**For generate:**
|
|
- Show generated story files
|
|
- Display story code
|
|
- Provide usage instructions
|
|
|
|
**For configure:**
|
|
- Show configuration changes
|
|
- Display theme setup
|
|
- Provide run instructions
|
|
|
|
## Example Output
|
|
|
|
### Scan
|
|
```
|
|
Storybook Scan: /path/to/project
|
|
|
|
STATUS
|
|
- Storybook installed: Yes (v7.6.0)
|
|
- Stories found: 12
|
|
- Components without stories: 8
|
|
|
|
MISSING STORIES
|
|
- Accordion.tsx
|
|
- Avatar.tsx
|
|
- Badge.tsx
|
|
- Dropdown.tsx
|
|
- Pagination.tsx
|
|
- Progress.tsx
|
|
- Tabs.tsx
|
|
- Toast.tsx
|
|
|
|
Run /dss-storybook generate to create stories
|
|
```
|
|
|
|
### Generate
|
|
```
|
|
Storybook Story Generation
|
|
|
|
GENERATED STORIES
|
|
|
|
Button.stories.tsx:
|
|
- Primary variant
|
|
- Secondary variant
|
|
- Disabled state
|
|
- Loading state
|
|
- With icon
|
|
|
|
Card.stories.tsx:
|
|
- Default
|
|
- With image
|
|
- Interactive
|
|
|
|
Input.stories.tsx:
|
|
- Default
|
|
- With label
|
|
- With error
|
|
- Disabled
|
|
|
|
Run: npm run storybook
|
|
```
|
|
|
|
### Configure
|
|
```
|
|
Storybook Configuration
|
|
|
|
CONFIGURATION CREATED
|
|
|
|
.storybook/theme.js:
|
|
- Brand colors from tokens
|
|
- Typography from tokens
|
|
- Custom logo support
|
|
|
|
.storybook/preview.js:
|
|
- Token CSS imported
|
|
- Global decorators added
|
|
- Controls configured
|
|
|
|
Run: npm run storybook
|
|
Access: http://localhost:6006
|
|
```
|