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
2.6 KiB
2.6 KiB
name, description, arguments
| name | description | arguments | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| dss-storybook | Set up and configure Storybook for design system components |
|
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:
- Validate action is valid (scan, generate, configure)
- Use
dss_setup_storybooktool with action and path - 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