omgkit 2.28.0 → 2.30.0

package/plugin/commands/design/rebuild.md

@@ -0,0 +1,153 @@
+---
+name: rebuild
+description: Rebuild entire project UI with a new theme, replacing hardcoded colors
+usage: /design:rebuild <theme-id> [--dry] [--force]
+args:
+  - name: theme-id
+    required: true
+    description: Theme ID to apply (use /design:themes to see options)
+  - name: --dry
+    required: false
+    description: Preview changes without applying
+  - name: --force
+    required: false
+    description: Skip confirmation prompt
+---
+
+# Design Rebuild
+
+Rebuild the entire project's UI with a new theme, automatically converting hardcoded Tailwind colors to theme variables.
+
+## What This Command Does
+
+1. **Creates Backup**
+   - Saves current theme.json and theme.css
+   - Backs up tailwind.config.ts
+   - Creates rollback point in `.omgkit/design/backups/`
+
+2. **Applies New Theme**
+   - Updates `.omgkit/design/theme.json`
+   - Regenerates `.omgkit/design/theme.css` with CSS variables
+   - Updates `tailwind.config.ts` with theme colors
+   - Ensures `globals.css` imports theme.css
+
+3. **Scans & Fixes Components**
+   - Scans `app/`, `components/`, `src/`, `pages/` directories
+   - Finds hardcoded Tailwind colors (e.g., `bg-blue-500`)
+   - Replaces with theme variables (e.g., `bg-primary`)
+   - Reports unfixable patterns for manual review
+
+## Color Mapping
+
+The following hardcoded colors are automatically converted:
+
+| Hardcoded | Theme Variable |
+|-----------|---------------|
+| `bg-white` | `bg-background` |
+| `bg-gray-50/100` | `bg-muted` |
+| `text-gray-900` | `text-foreground` |
+| `text-gray-500/600` | `text-muted-foreground` |
+| `border-gray-200` | `border-border` |
+| `bg-blue-500/600` | `bg-primary` |
+| `text-blue-600` | `text-primary` |
+| `bg-red-500/600` | `bg-destructive` |
+
+## Usage Examples
+
+### Basic Rebuild
+```bash
+/design:rebuild neo-tokyo
+```
+
+### Preview Changes (Dry Run)
+```bash
+/design:rebuild neo-tokyo --dry
+```
+
+### Force Rebuild (No Confirmation)
+```bash
+/design:rebuild neo-tokyo --force
+```
+
+## Available Themes
+
+Run `/design:themes` to see all 30 curated themes:
+
+- **Tech & AI**: neo-tokyo, electric-cyan, neural-dark, matrix-green, quantum-purple, hologram
+- **Minimal & Clean**: minimal-slate, paper, mono, zen, nordic, swiss
+- **Corporate**: ocean-blue, corporate-indigo, finance, legal, healthcare, consulting
+- **Creative & Bold**: coral-sunset, candy, neon, gradient-dream, retro, studio
+- **Nature & Organic**: forest, ocean, desert, lavender, arctic, autumn
+
+## Example Output
+
+```
+🔮 Design Rebuild: neo-tokyo
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📦 Creating backup...
+   Backup ID: 2024-01-08T14-30-00-neo-tokyo
+
+🎨 Applying theme...
+   ✓ .omgkit/design/theme.json
+   ✓ .omgkit/design/theme.css
+   ✓ tailwind.config.ts
+   ✓ app/globals.css
+
+🔍 Scanning components...
+   Found 45 files with color references
+   Fixed 38 non-compliant patterns
+
+Fixed Colors:
+  components/Button.tsx
+    bg-blue-500 → bg-primary (3x)
+    text-white → text-primary-foreground (3x)
+
+  app/page.tsx
+    bg-gray-50 → bg-muted (2x)
+    text-gray-600 → text-muted-foreground (4x)
+
+⚠️  Warnings (manual review needed):
+   - components/legacy/OldCard.tsx:12 - bg-emerald-400 (manual review needed)
+
+✅ Rebuild complete!
+   To rollback: omgkit design:rollback
+```
+
+## Rollback
+
+If the rebuild causes issues:
+
+```bash
+# Rollback to previous theme
+omgkit design:rollback
+
+# Or use slash command
+/design:rollback
+
+# Specify specific backup
+omgkit design:rollback 2024-01-08T14-30-00-neo-tokyo
+```
+
+## CLI Alternative
+
+This command is also available as a CLI command:
+
+```bash
+omgkit design:rebuild neo-tokyo
+omgkit design:rebuild neo-tokyo --dry
+```
+
+## Best Practices
+
+1. **Always preview first**: Use `--dry` flag to see what will change
+2. **Review warnings**: Manually check files with unmapped colors
+3. **Test after rebuild**: Verify UI looks correct in both light and dark modes
+4. **Keep backups**: Don't delete `.omgkit/design/backups/` folder
+
+## Related Commands
+
+- `/design:themes` - List all available themes
+- `/design:scan` - Scan for non-compliant colors without fixing
+- `/design:rollback` - Rollback to previous theme
+- `/design:preview` - Preview current theme

package/plugin/commands/design/reset.md

@@ -0,0 +1,65 @@
+---
+description: Reset to original theme
+allowed-tools: Read, Write
+argument-hint: [confirm]
+---
+
+# 🔄 Reset Theme: $ARGUMENTS
+
+Reset the project theme to the original configuration or remove theme customizations.
+
+## Process
+
+1. Check for theme backup (if exists)
+2. Prompt for confirmation (unless `confirm` passed)
+3. Restore original theme.json
+4. Regenerate theme.css
+5. Confirm reset complete
+
+## Options
+
+### Reset to Original
+If you modified a curated theme, restore the original:
+```bash
+/design:reset              # Prompts for confirmation
+/design:reset confirm      # Skip confirmation
+```
+
+### Reset to Default
+Remove all theme customizations and use default:
+```bash
+/design:reset default
+```
+
+## Files Affected
+
+- `.omgkit/design/theme.json` - Restored/reset
+- `.omgkit/design/theme.css` - Regenerated
+
+## Backup Behavior
+
+Before any theme change, OMGKIT creates a backup:
+- `.omgkit/design/theme.json.backup`
+
+Reset will restore from this backup if available.
+
+## Usage
+
+```bash
+/design:reset           # Interactive confirmation
+/design:reset confirm   # Skip confirmation
+/design:reset default   # Reset to default theme
+```
+
+## Recovery
+
+If you accidentally reset:
+1. Check git history for previous theme files
+2. Use `/design:theme <id>` to apply a curated theme
+3. Use `/design:builder` to recreate custom theme
+
+## Related Commands
+
+- `/design:theme <id>` - Apply a specific theme
+- `/design:builder` - Build new custom theme
+- `/design:preview` - Preview current theme

package/plugin/commands/design/rollback.md

@@ -0,0 +1,179 @@
+---
+name: rollback
+description: Rollback to a previous theme state from backup
+usage: /design:rollback [backup-id]
+args:
+  - name: backup-id
+    required: false
+    description: Specific backup ID to restore (defaults to most recent)
+---
+
+# Design Rollback
+
+Restore project to a previous theme state from backup. Created automatically when using `/design:rebuild`.
+
+## What This Command Does
+
+1. **Finds Backup**
+   - Defaults to most recent backup
+   - Or uses specified backup ID
+
+2. **Creates Safety Backup**
+   - Backs up current state before rollback
+   - Allows re-rollback if needed
+
+3. **Restores Files**
+   - `.omgkit/design/theme.json`
+   - `.omgkit/design/theme.css`
+   - `tailwind.config.ts` (if backed up)
+   - Any component files modified during rebuild
+
+## Usage Examples
+
+### Rollback to Latest Backup
+```bash
+/design:rollback
+```
+
+### Rollback to Specific Backup
+```bash
+/design:rollback 2024-01-08T14-30-00-neo-tokyo
+```
+
+### List Available Backups First
+```bash
+omgkit design:backups
+```
+
+## Example Output
+
+```
+🔄 Theme Rollback
+
+✓ Rolled back to: minimal-slate
+
+Restored Files:
+  ✓ .omgkit/design/theme.json
+  ✓ .omgkit/design/theme.css
+  ✓ tailwind.config.ts
+
+Backup used: 2024-01-08T14-30-00-neo-tokyo
+```
+
+## Backup Structure
+
+Backups are stored in `.omgkit/design/backups/`:
+
+```
+.omgkit/design/backups/
+├── 2024-01-08T14-30-00-neo-tokyo/
+│   ├── manifest.json       # Backup metadata
+│   ├── theme.json.bak      # Previous theme config
+│   ├── theme.css.bak       # Previous CSS variables
+│   └── tailwind.config.ts.bak  # Previous Tailwind config
+│
+└── 2024-01-07T10-15-00-minimal-slate/
+    ├── manifest.json
+    ├── theme.json.bak
+    └── ...
+```
+
+### Manifest Format
+
+```json
+{
+  "id": "2024-01-08T14-30-00-neo-tokyo",
+  "previousTheme": "minimal-slate",
+  "newTheme": "neo-tokyo",
+  "timestamp": "2024-01-08T14:30:00.000Z",
+  "changedFiles": [
+    { "path": ".omgkit/design/theme.json", "backup": "theme.json.bak" },
+    { "path": ".omgkit/design/theme.css", "backup": "theme.css.bak" },
+    { "path": "tailwind.config.ts", "backup": "tailwind.config.ts.bak" }
+  ]
+}
+```
+
+## CLI Commands
+
+```bash
+# Rollback to latest
+omgkit design:rollback
+
+# Rollback to specific backup
+omgkit design:rollback 2024-01-08T14-30-00-neo-tokyo
+
+# List available backups
+omgkit design:backups
+```
+
+## Listing Backups
+
+To see available backups:
+
+```bash
+omgkit design:backups
+```
+
+Output:
+```
+📦 Theme Backups
+
+  2024-01-08T14-30-00-neo-tokyo
+    minimal-slate → neo-tokyo
+    1/8/2024, 2:30:00 PM (3 files)
+
+  2024-01-07T10-15-00-minimal-slate
+    ocean-blue → minimal-slate
+    1/7/2024, 10:15:00 AM (3 files)
+
+To rollback: omgkit design:rollback
+Or specify: omgkit design:rollback <backup-id>
+```
+
+## Safety Features
+
+1. **Auto-backup before rollback**: Creates new backup before restoring
+2. **Backup preservation**: Original backups are never deleted
+3. **Chain rollback**: Can rollback from a rollback
+4. **Partial restore**: Only restores files that were backed up
+
+## When to Use Rollback
+
+- Theme rebuild caused visual issues
+- Want to return to previous color scheme
+- Testing different themes
+- Accidentally applied wrong theme
+
+## Limitations
+
+- Only restores files that were modified during rebuild
+- Component color replacements are not reversed (would need manual fix)
+- Requires existing backup
+
+## Error Handling
+
+### No Backups Found
+```
+✗ No theme backups found
+ℹ No backups available. Rebuild a theme first to create backups.
+```
+
+### Backup Not Found
+```
+✗ Backup not found: invalid-backup-id
+```
+
+## Related Commands
+
+- `/design:rebuild <theme-id>` - Apply new theme (creates backup)
+- `/design:scan` - Scan for non-compliant colors
+- `/design:themes` - List available themes
+- `/design:preview` - Preview current theme
+
+## Best Practices
+
+1. **Test before committing**: Always test after theme rebuild
+2. **Keep backups**: Don't delete `.omgkit/design/backups/`
+3. **Use dry-run**: Preview changes with `/design:rebuild <theme> --dry`
+4. **Git backup**: Commit before rebuilding for additional safety

package/plugin/commands/design/scan.md

@@ -0,0 +1,155 @@
+---
+name: scan
+description: Scan project for non-compliant color usage that should use theme variables
+usage: /design:scan [--fix]
+allowed-tools: Read, Glob, Grep
+args:
+  - name: --fix
+    required: false
+    description: Auto-fix simple violations (same as /design:rebuild)
+---
+
+# Design Scan
+
+Scan project files for hardcoded colors that should use theme CSS variables instead.
+
+## What This Command Does
+
+1. **Scans Source Files**
+   - Scans `app/`, `components/`, `src/`, `pages/` directories
+   - Checks `.tsx`, `.jsx`, `.ts`, `.js` files
+   - Excludes `node_modules`, `.git`, `.omgkit`, `dist`, `build`, `.next`
+
+2. **Detects Non-Compliant Patterns**
+   - Tailwind default colors (e.g., `bg-blue-500`, `text-gray-600`)
+   - Hardcoded hex colors in className (e.g., `bg-[#3B82F6]`)
+   - Inline style colors
+
+3. **Reports Findings**
+   - Groups violations by file
+   - Shows line numbers
+   - Suggests theme variable replacements
+
+## Detection Patterns
+
+### Tailwind Default Colors (Auto-Fixable)
+
+| Pattern | Example | Should Be |
+|---------|---------|-----------|
+| Gray scales | `bg-gray-100` | `bg-muted` |
+| Gray text | `text-gray-600` | `text-muted-foreground` |
+| Blue primary | `bg-blue-500` | `bg-primary` |
+| Red destructive | `bg-red-500` | `bg-destructive` |
+| Gray borders | `border-gray-200` | `border-border` |
+
+### Hardcoded Colors (Manual Review)
+
+| Pattern | Example | Action |
+|---------|---------|--------|
+| Hex in className | `bg-[#E11D48]` | Use CSS variable |
+| Arbitrary colors | `text-[#333333]` | Use theme foreground |
+| Inline styles | `style={{ color: 'red' }}` | Use theme class |
+
+## Usage Examples
+
+### Basic Scan
+```bash
+/design:scan
+```
+
+### Scan and Auto-Fix
+```bash
+/design:scan --fix
+```
+Note: `--fix` is equivalent to running `/design:rebuild` with current theme.
+
+## Example Output
+
+```
+🔍 Scanning project for non-compliant colors...
+
+Scanned 45 files
+
+⚠ Found 12 non-compliant color references
+
+📁 app/page.tsx
+   Line 15: bg-blue-500 → bg-primary
+   Line 23: text-gray-600 → text-muted-foreground
+   Line 45: bg-gray-50 → bg-muted
+
+📁 components/Header.tsx
+   Line 8: border-gray-200 → border-border
+   Line 12: bg-white → bg-background
+   Line 23: text-gray-900 → text-foreground
+
+📁 components/Card.tsx
+   Line 5: bg-[#ffffff] (manual review)
+   Line 18: hover:bg-gray-100 → hover:bg-accent
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Total: 12 violations in 3 files
+
+Run omgkit design:rebuild <theme-id> to auto-fix
+```
+
+## Compliance Categories
+
+### Fully Compliant (Good)
+```tsx
+// Using theme variables
+<div className="bg-background text-foreground">
+<button className="bg-primary text-primary-foreground">
+<span className="text-muted-foreground">
+<div className="border-border">
+```
+
+### Non-Compliant (Should Fix)
+```tsx
+// Hardcoded Tailwind colors
+<div className="bg-white text-gray-900">          // ❌
+<button className="bg-blue-500 text-white">       // ❌
+<span className="text-gray-500">                  // ❌
+<div className="border-gray-200">                 // ❌
+
+// Should be
+<div className="bg-background text-foreground">   // ✅
+<button className="bg-primary text-primary-foreground"> // ✅
+<span className="text-muted-foreground">          // ✅
+<div className="border-border">                   // ✅
+```
+
+## Color Mapping Reference
+
+| Hardcoded | Theme Variable | Context |
+|-----------|---------------|---------|
+| `bg-white` | `bg-background` | Page background |
+| `bg-gray-50` | `bg-muted` | Subtle background |
+| `bg-gray-100` | `bg-secondary` | Secondary background |
+| `text-gray-900` | `text-foreground` | Primary text |
+| `text-gray-600` | `text-muted-foreground` | Secondary text |
+| `text-gray-500` | `text-muted-foreground` | Muted text |
+| `border-gray-200` | `border-border` | Standard border |
+| `border-gray-300` | `border-input` | Input border |
+| `bg-blue-500` | `bg-primary` | Primary action |
+| `text-blue-600` | `text-primary` | Accent text |
+| `bg-red-500` | `bg-destructive` | Danger action |
+| `text-red-600` | `text-destructive` | Error text |
+| `ring-blue-500` | `ring-ring` | Focus ring |
+
+## CLI Alternative
+
+```bash
+omgkit design:scan
+```
+
+## After Scanning
+
+1. **Auto-fixable issues**: Run `/design:rebuild <theme-id>` to fix
+2. **Manual review issues**: Edit files directly to use theme variables
+3. **Re-scan**: Run `/design:scan` again to verify all fixed
+
+## Related Commands
+
+- `/design:rebuild <theme-id>` - Fix issues and apply new theme
+- `/design:themes` - List available themes
+- `/design:preview` - Preview current theme colors

package/plugin/commands/design/theme.md

@@ -0,0 +1,65 @@
+---
+description: Switch project to a different OMGKIT theme
+allowed-tools: Read, Write, Glob
+argument-hint: <theme-id>
+---
+
+# 🎨 Switch Theme: $ARGUMENTS
+
+Switch the project to a different OMGKIT design system theme.
+
+## Available Theme IDs
+
+**Tech & AI:**
+- `neo-tokyo`, `electric-cyan`, `neural-dark`, `matrix-green`, `quantum-purple`, `hologram`
+
+**Minimal & Clean:**
+- `minimal-slate`, `paper`, `mono`, `zen`, `nordic`, `swiss`
+
+**Corporate & Enterprise:**
+- `ocean-blue`, `corporate-indigo`, `finance`, `legal`, `healthcare`, `consulting`
+
+**Creative & Bold:**
+- `coral-sunset`, `candy`, `neon`, `gradient-dream`, `retro`, `studio`
+
+**Nature & Organic:**
+- `forest`, `ocean`, `desert`, `lavender`, `arctic`, `autumn`
+
+## Process
+
+1. Validate theme ID exists
+2. Load theme configuration from templates
+3. Generate CSS variables (light + dark mode)
+4. Write `.omgkit/design/theme.json`
+5. Write `.omgkit/design/theme.css`
+6. Show integration instructions
+
+## Files Created/Updated
+
+- `.omgkit/design/theme.json` - Theme configuration
+- `.omgkit/design/theme.css` - CSS variables
+
+## Integration
+
+After switching themes, integrate into your project:
+
+### Next.js / React
+```css
+/* In app/globals.css or styles/globals.css */
+@import '../.omgkit/design/theme.css';
+```
+
+### Or copy CSS variables directly
+Copy the `:root` and `.dark` blocks from `theme.css` into your global styles.
+
+## Usage
+
+```bash
+/design:theme neo-tokyo          # Switch to Neo Tokyo theme
+/design:theme minimal-slate      # Switch to Minimal Slate theme
+/design:theme forest             # Switch to Forest theme
+```
+
+## Verification
+
+After switching, run `/design:preview` to see the new theme colors.

package/plugin/commands/design/themes.md

@@ -0,0 +1,50 @@
+---
+description: List all available OMGKIT design themes
+allowed-tools: Read, Glob
+argument-hint: [category]
+---
+
+# 🎨 Design Themes: $ARGUMENTS
+
+List all available OMGKIT design themes organized by category.
+
+## Categories
+
+- **tech-ai** (6 themes): Neo Tokyo, Electric Cyan, Neural Dark, Matrix Green, Quantum Purple, Hologram
+- **minimal-clean** (6 themes): Minimal Slate, Paper, Mono, Zen, Nordic, Swiss
+- **corporate-enterprise** (6 themes): Ocean Blue, Corporate Indigo, Finance, Legal, Healthcare, Consulting
+- **creative-bold** (6 themes): Coral Sunset, Candy, Neon, Gradient Dream, Retro, Studio
+- **nature-organic** (6 themes): Forest, Ocean, Desert, Lavender, Arctic, Autumn
+
+## Process
+
+1. Load themes from `templates/design/themes/`
+2. Group by category
+3. Display with:
+   - Theme name and ID
+   - Category badge
+   - Primary color
+   - Brief description
+
+## Usage
+
+```bash
+/design:themes              # List all 30 themes
+/design:themes tech-ai      # List only tech-ai themes
+/design:themes minimal      # Filter by partial category name
+```
+
+## Output Format
+
+For each theme, show:
+- **ID** (used for selection)
+- **Name** (display name)
+- **Category**
+- **Primary color** (hex and HSL)
+- **Description**
+
+## Next Steps
+
+After browsing themes:
+- `/design:theme <id>` - Apply a theme to your project
+- `/design:preview` - Preview current theme

package/plugin/registry.yaml

@@ -1,9 +1,9 @@
 # OMGKIT Component Registry
 # Single Source of Truth for Agents, Skills, Commands, Workflows, and MCPs
-# Version: 2.26.1
-# Updated: 2026-01-06
+# Version: 2.30.0
+# Updated: 2026-01-08
 
-version: "2.28.0"
+version: "2.30.0"
 
 # =============================================================================
 # OPTIMIZED ALIGNMENT PRINCIPLE (OAP)
@@ -431,12 +431,24 @@ agents:
       - frontend/accessibility
       - frontend/responsive
       - frontend/tailwindcss
+      - frontend/design-system-context
     commands:
       - /design:screenshot
       - /design:cro
       - /design:enhance
       - /design:fast
       - /design:good
+      - /design:themes
+      - /design:theme
+      - /design:preview
+      - /design:add
+      - /design:from-screenshot
+      - /design:from-url
+      - /design:builder
+      - /design:reset
+      - /design:rebuild
+      - /design:scan
+      - /design:rollback
 
   api-designer:
     file: agents/api-designer.md