Initial commit: Clean DSS implementation
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
This commit is contained in:
147
dss-claude-plugin/commands/dss-storybook.md
Normal file
147
dss-claude-plugin/commands/dss-storybook.md
Normal file
@@ -0,0 +1,147 @@
|
||||
---
|
||||
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
|
||||
```
|
||||
Reference in New Issue
Block a user