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:
113
dss-claude-plugin/commands/dss-generate.md
Normal file
113
dss-claude-plugin/commands/dss-generate.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
name: dss-generate
|
||||
description: Generate theme files from design tokens
|
||||
arguments:
|
||||
- name: format
|
||||
description: "Output format: css, scss, json, or js"
|
||||
required: true
|
||||
- name: name
|
||||
description: Theme name (default is "default")
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Generate Command
|
||||
|
||||
Generate platform-specific theme files from design tokens using style-dictionary.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-generate <format> [name]
|
||||
```
|
||||
|
||||
Examples:
|
||||
```
|
||||
/dss-generate css
|
||||
/dss-generate scss dark-theme
|
||||
/dss-generate json
|
||||
/dss-generate js tokens
|
||||
```
|
||||
|
||||
## Supported Formats
|
||||
|
||||
| Format | Output | Use Case |
|
||||
|--------|--------|----------|
|
||||
| css | CSS custom properties | Web projects using CSS variables |
|
||||
| scss | SCSS variables | Projects using Sass |
|
||||
| json | JSON structure | Framework-agnostic, APIs |
|
||||
| js | JavaScript module | React, Vue, JS projects |
|
||||
|
||||
## What This Does
|
||||
|
||||
1. **Prepares Tokens**
|
||||
- Validates token structure
|
||||
- Organizes by category
|
||||
- Applies naming conventions
|
||||
|
||||
2. **Transforms via Style Dictionary**
|
||||
- Applies platform transforms
|
||||
- Generates output files
|
||||
- Creates documentation
|
||||
|
||||
3. **Returns Generated Files**
|
||||
- Theme file content
|
||||
- Usage instructions
|
||||
- Integration guide
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Verify format is valid (css, scss, json, js)
|
||||
2. Check if tokens are available (from previous extraction or ask for path)
|
||||
3. Use `dss_generate_theme` tool with format and theme name
|
||||
4. Display generated file content
|
||||
5. Provide integration instructions for the format
|
||||
6. Offer to generate additional formats
|
||||
|
||||
If no tokens available:
|
||||
- Ask user to run `/dss-extract` first
|
||||
- Or ask for path to tokens file
|
||||
|
||||
## Example Output
|
||||
|
||||
```
|
||||
Theme Generation: dark-theme (CSS)
|
||||
|
||||
GENERATED FILE: theme-dark.css
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #3385d6;
|
||||
--color-primary-light: #66a3e0;
|
||||
--color-primary-dark: #0066cc;
|
||||
--color-background: #1a1a1a;
|
||||
--color-surface: #2d2d2d;
|
||||
--color-text: #ffffff;
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: "Inter", sans-serif;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-base: 16px;
|
||||
--font-size-lg: 18px;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
}
|
||||
|
||||
USAGE
|
||||
|
||||
1. Import in your main CSS:
|
||||
@import 'theme-dark.css';
|
||||
|
||||
2. Use variables in components:
|
||||
.button {
|
||||
background: var(--color-primary);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
Generate another format? Try /dss-generate scss dark-theme
|
||||
```
|
||||
Reference in New Issue
Block a user