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

This reverts commit 72cb7319f5.

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

@@ -0,0 +1,82 @@
+---
+name: dss-analyze
+description: Analyze a project for design system patterns and opportunities
+arguments:
+  - name: path
+    description: Path to the project directory to analyze
+    required: false
+---
+
+# DSS Analyze Command
+
+Analyze a project directory for design system patterns, component usage, and tokenization opportunities.
+
+## Usage
+
+```
+/dss-analyze [path]
+```
+
+If no path is provided, analyzes the current working directory.
+
+## What This Does
+
+1. **Scans Project Structure**
+   - Identifies all style files (CSS, SCSS, Tailwind)
+   - Locates component files (React, Vue)
+   - Maps project dependencies
+
+2. **Analyzes Styles**
+   - Extracts color values and patterns
+   - Identifies typography usage
+   - Finds spacing patterns
+   - Detects shadows and borders
+
+3. **Analyzes Components**
+   - Maps React/Vue components
+   - Identifies repeated patterns
+   - Finds hardcoded values
+
+4. **Generates Report**
+   - Summary statistics
+   - Pattern identification
+   - Recommendations for improvement
+
+## Instructions for Claude
+
+When the user runs this command:
+
+1. Use the `dss_analyze_project` tool with the provided path (or current directory if not specified)
+2. Wait for analysis results
+3. Present findings in a clear, organized format:
+   - Summary section with key metrics
+   - Style patterns found
+   - Component analysis
+   - Top recommendations
+4. Offer to drill deeper into specific areas
+5. Suggest next steps (token extraction, component audit, etc.)
+
+## Example Output
+
+```
+Design System Analysis: /path/to/project
+
+SUMMARY
+- Files scanned: 127
+- Style files: 34
+- Components: 23
+- Unique colors: 156
+- Typography variations: 12
+
+TOP FINDINGS
+1. Color inconsistency: 156 colors could be 12 tokens
+2. Spacing: 8 different scales in use
+3. 3 button variants that could consolidate
+
+RECOMMENDATIONS
+1. Create color token system
+2. Standardize spacing scale
+3. Audit button components
+
+Next: Run /dss-extract to create tokens from these patterns
+```

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

@@ -0,0 +1,103 @@
+---
+name: dss-audit
+description: Audit React components for design system adoption
+arguments:
+  - name: path
+    description: Path to components directory
+    required: false
+---
+
+# DSS Audit Command
+
+Audit React/Vue components for design system readiness, identifying hardcoded values and consolidation opportunities.
+
+## Usage
+
+```
+/dss-audit [path]
+```
+
+Examples:
+```
+/dss-audit
+/dss-audit ./src/components
+/dss-audit ./src/ui
+```
+
+## What This Does
+
+1. **Scans Components**
+   - Finds all React/Vue components
+   - Parses component code
+   - Extracts styling information
+
+2. **Identifies Issues**
+   - Hardcoded color values
+   - Inline spacing values
+   - Inconsistent styling patterns
+   - Duplicate component patterns
+
+3. **Maps Dependencies**
+   - Component relationships
+   - Style imports
+   - Shared utilities
+
+4. **Generates Report**
+   - Issues by severity
+   - Consolidation opportunities
+   - Refactoring recommendations
+
+## Instructions for Claude
+
+When the user runs this command:
+
+1. Use `dss_audit_components` tool with the provided path
+2. Present findings organized by:
+   - Summary statistics
+   - Hardcoded values (table format)
+   - Consolidation opportunities
+   - Dependency issues
+3. Prioritize by impact and effort
+4. Provide specific fix recommendations
+5. Offer to create tokens for hardcoded values
+
+## Example Output
+
+```
+Component Audit: /src/components
+
+SUMMARY
+- Components analyzed: 45
+- Hardcoded values: 127
+- Consolidation opportunities: 8
+- Accessibility issues: 23
+
+HARDCODED VALUES (Top 10)
+
+| File | Line | Value | Suggested Token |
+|------|------|-------|-----------------|
+| Button.tsx | 12 | #0066cc | --color-primary |
+| Button.tsx | 15 | 16px | --spacing-md |
+| Card.tsx | 8 | #ffffff | --color-surface |
+| Card.tsx | 22 | 8px | --radius-md |
+| Modal.tsx | 34 | rgba(0,0,0,0.5) | --color-overlay |
+
+CONSOLIDATION OPPORTUNITIES
+
+1. Button Components (3 variants)
+   Files: PrimaryButton.tsx, SecondaryButton.tsx, GhostButton.tsx
+   Suggestion: Merge into Button.tsx with 'variant' prop
+
+2. Card Components (2 variants)
+   Files: Card.tsx, FeaturedCard.tsx
+   Suggestion: Add 'featured' prop to Card.tsx
+
+RECOMMENDATIONS
+
+1. [HIGH] Create color tokens for 89 hardcoded colors
+2. [HIGH] Implement spacing scale (34 values)
+3. [MEDIUM] Consolidate button variants
+4. [LOW] Add TypeScript types for tokens
+
+Next: Run /dss-extract to create tokens from these values
+```

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

@@ -0,0 +1,106 @@
+---
+name: dss-extract
+description: Extract design tokens from CSS, SCSS, Tailwind, or JSON sources
+arguments:
+  - name: path
+    description: Path to file or directory containing design tokens
+    required: false
+  - name: sources
+    description: "Comma-separated source types: css,scss,tailwind,json"
+    required: false
+---
+
+# DSS Extract Command
+
+Extract design tokens from various source formats and create a unified token collection.
+
+## Usage
+
+```
+/dss-extract [path] [sources]
+```
+
+Examples:
+```
+/dss-extract
+/dss-extract ./src/styles
+/dss-extract ./src css,scss
+/dss-extract ./tailwind.config.js tailwind
+```
+
+## What This Does
+
+1. **Scans Sources**
+   - CSS custom properties and values
+   - SCSS variables and maps
+   - Tailwind configuration
+   - JSON token files
+
+2. **Extracts Tokens**
+   - Colors (hex, rgb, hsl)
+   - Typography (fonts, sizes, weights)
+   - Spacing (margins, paddings, gaps)
+   - Sizing (widths, heights, radii)
+   - Shadows and effects
+
+3. **Merges Results**
+   - Combines tokens from all sources
+   - Resolves conflicts
+   - Normalizes naming
+
+4. **Returns Collection**
+   - Categorized tokens
+   - Metadata included
+   - Ready for theme generation
+
+## Instructions for Claude
+
+When the user runs this command:
+
+1. Parse the path argument (default to current directory)
+2. Parse sources argument (default to all: css, scss, tailwind, json)
+3. Use `dss_extract_tokens` tool with parsed arguments
+4. Present extracted tokens organized by category:
+   - Colors
+   - Typography
+   - Spacing
+   - Sizing
+   - Shadows
+   - Other
+5. Show token count and source breakdown
+6. Offer to generate theme files with `/dss-generate`
+
+## Example Output
+
+```
+Token Extraction: /path/to/project
+
+SOURCES SCANNED
+- CSS: 12 files
+- SCSS: 8 files
+- Tailwind: 1 file
+
+TOKENS EXTRACTED
+
+Colors (24 tokens):
+  primary:     #0066cc
+  secondary:   #6c757d
+  success:     #28a745
+  error:       #dc3545
+  ...
+
+Typography (8 tokens):
+  font-family-base: "Inter", sans-serif
+  font-size-base:   16px
+  ...
+
+Spacing (6 tokens):
+  xs: 4px
+  sm: 8px
+  md: 16px
+  ...
+
+TOTAL: 38 unique tokens
+
+Next: Run /dss-generate css to create theme files
+```

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

@@ -0,0 +1,138 @@
+---
+name: dss-figma
+description: Sync design tokens from Figma files
+arguments:
+  - name: file_key
+    description: Figma file key from the file URL
+    required: true
+---
+
+# DSS Figma Command
+
+Synchronize design tokens from Figma files using the Figma API.
+
+## Usage
+
+```
+/dss-figma <file_key>
+```
+
+Example:
+```
+/dss-figma abc123xyz456
+```
+
+## Finding Your File Key
+
+The file key is in your Figma URL:
+```
+https://www.figma.com/file/abc123xyz456/Design-System
+                            ^^^^^^^^^^^^
+                            This is the file key
+```
+
+## Prerequisites
+
+Set your Figma token as an environment variable:
+```bash
+export FIGMA_TOKEN=your-figma-personal-access-token
+```
+
+## What This Does
+
+1. **Connects to Figma API**
+   - Authenticates with your token
+   - Fetches file data
+   - Handles rate limiting
+
+2. **Extracts Tokens**
+   - Colors from fill styles
+   - Typography from text styles
+   - Spacing from auto-layout
+   - Shadows from effects
+   - Border radii
+
+3. **Normalizes Output**
+   - Converts Figma naming to tokens
+   - Organizes by category
+   - Adds metadata
+
+4. **Returns Token Collection**
+   - Ready for theme generation
+   - Merge-able with other sources
+
+## Instructions for Claude
+
+When the user runs this command:
+
+1. Check if file_key is provided
+2. Use `dss_sync_figma` tool with file_key
+3. If error about missing token:
+   - Explain how to get Figma token
+   - Show how to set environment variable
+4. On success:
+   - Display extracted tokens by category
+   - Show token count
+   - Offer to generate theme files
+5. Handle rate limiting gracefully
+
+## Example Output
+
+```
+Figma Sync: abc123xyz456
+
+CONNECTING TO FIGMA...
+File: Design System v2.0
+Last modified: 2024-01-15
+
+TOKENS EXTRACTED
+
+Colors (24 tokens):
+  primary/500: #0066CC
+  primary/400: #3385D6
+  primary/600: #0052A3
+  secondary/500: #6C757D
+  success/500: #28A745
+  warning/500: #FFC107
+  error/500: #DC3545
+
+Typography (8 styles):
+  heading/h1: Inter Bold 48px/56px
+  heading/h2: Inter Bold 36px/44px
+  heading/h3: Inter SemiBold 24px/32px
+  body/large: Inter Regular 18px/28px
+  body/regular: Inter Regular 16px/24px
+  body/small: Inter Regular 14px/20px
+
+Spacing (6 values):
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  2xl: 48px
+
+Effects (3 shadows):
+  shadow/sm: 0 1px 2px rgba(0,0,0,0.05)
+  shadow/md: 0 4px 6px rgba(0,0,0,0.1)
+  shadow/lg: 0 10px 15px rgba(0,0,0,0.1)
+
+TOTAL: 41 tokens extracted
+
+Next: Run /dss-generate css to create theme files
+```
+
+## Error Handling
+
+```
+ERROR: FIGMA_TOKEN not set
+
+To sync with Figma, you need a Personal Access Token:
+
+1. Go to Figma > Settings > Personal Access Tokens
+2. Create a new token
+3. Set it in your environment:
+   export FIGMA_TOKEN=your-token-here
+
+Then run /dss-figma again.
+```

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

dss-claude-plugin/commands/dss-quick-wins.md

@@ -0,0 +1,145 @@
+---
+name: dss-quick-wins
+description: Find quick win opportunities for design system adoption
+arguments:
+  - name: path
+    description: Path to project directory
+    required: false
+---
+
+# DSS Quick Wins Command
+
+Find low-effort, high-impact opportunities for design system adoption.
+
+## Usage
+
+```
+/dss-quick-wins [path]
+```
+
+Examples:
+```
+/dss-quick-wins
+/dss-quick-wins ./src
+```
+
+## What This Does
+
+1. **Analyzes Codebase**
+   - Scans styles and components
+   - Identifies patterns
+   - Measures usage frequency
+
+2. **Finds Opportunities**
+   - Color consolidation
+   - Spacing standardization
+   - Typography cleanup
+   - Border radius normalization
+   - Shadow standardization
+
+3. **Scores by Impact/Effort**
+   - Calculates potential impact
+   - Estimates implementation effort
+   - Ranks by ROI
+
+4. **Generates Recommendations**
+   - Prioritized list
+   - Specific actions
+   - Expected outcomes
+
+## Instructions for Claude
+
+When the user runs this command:
+
+1. Use `dss_find_quick_wins` tool with path
+2. Present quick wins in priority order
+3. For each quick win, show:
+   - Category (colors, spacing, etc.)
+   - Impact level (high/medium/low)
+   - Effort level (high/medium/low)
+   - Specific values to consolidate
+   - Files affected
+4. Provide total time estimate
+5. Offer to implement top quick wins
+
+## Example Output
+
+```
+Quick Win Analysis: /path/to/project
+
+TOP QUICK WINS
+
+1. COLOR CONSOLIDATION
+   Impact: HIGH | Effort: LOW
+
+   Found 47 color values reducible to 8 tokens
+   Files affected: 23
+
+   Consolidate:
+   #0066cc, #0067cd, #0065cb -> primary
+   #6c757d, #6b747c, #6d767e -> secondary
+
+   Estimated time: 2 hours
+
+2. SPACING STANDARDIZATION
+   Impact: HIGH | Effort: LOW
+
+   Found 34 spacing values reducible to 6 tokens
+   Files affected: 31
+
+   Consolidate to 4px grid:
+   4px, 8px, 16px, 24px, 32px, 48px
+
+   Estimated time: 3 hours
+
+3. BORDER RADIUS NORMALIZATION
+   Impact: MEDIUM | Effort: LOW
+
+   Found 12 radius values reducible to 4 tokens
+   Files affected: 15
+
+   Consolidate:
+   2px (sm), 4px (md), 8px (lg), 16px (xl)
+
+   Estimated time: 1 hour
+
+4. SHADOW CLEANUP
+   Impact: MEDIUM | Effort: LOW
+
+   Found 8 shadow definitions reducible to 3 tokens
+   Files affected: 12
+
+   Consolidate:
+   sm: 0 1px 2px rgba(0,0,0,0.05)
+   md: 0 4px 6px rgba(0,0,0,0.1)
+   lg: 0 10px 15px rgba(0,0,0,0.1)
+
+   Estimated time: 1 hour
+
+5. FONT SIZE SCALE
+   Impact: HIGH | Effort: MEDIUM
+
+   Found 15 font sizes reducible to 7 tokens
+   Files affected: 28
+
+   Consolidate to type scale:
+   12px, 14px, 16px, 18px, 24px, 32px, 48px
+
+   Estimated time: 3 hours
+
+SUMMARY
+
+Total quick wins: 5
+Total estimated time: 10 hours
+Expected impact: 60% reduction in style inconsistency
+
+RECOMMENDED ORDER
+
+1. Colors (biggest impact)
+2. Spacing (most widespread)
+3. Border radius (quick win)
+4. Shadows (contained scope)
+5. Font sizes (needs coordination)
+
+Ready to implement? I can create tokens for any of these.
+```

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

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