Revert "chore: Remove dss-claude-plugin directory"

This reverts commit 72cb7319f5.

dss-claude-plugin/commands/dss-generate.md

@@ -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
+```