omgkit 2.28.0 → 2.30.0

package/README.md

@@ -37,10 +37,11 @@ All coordinated through **Omega-level thinking** - a framework for finding break
 | Component | Count | Description |
 |-----------|-------|-------------|
 | **Agents** | 41 | Specialized AI team members with distinct roles |
-| **Commands** | 161 | Slash commands for every development task |
+| **Commands** | 169 | Slash commands for every development task |
 | **Workflows** | 69 | Complete development processes from idea to deploy |
 | **Skills** | 161 | Domain expertise modules across 24 categories |
 | **Modes** | 10 | Behavioral configurations for different contexts |
+| **Themes** | 30 | Curated design system themes for shadcn/ui |
 | **Archetypes** | 14 | Project templates for autonomous development |
 
 ---
@@ -165,6 +166,76 @@ testing:
       target: 85
 ```
 
+### 6. Design System (New in 2.29.0)
+
+OMGKIT includes a complete design system with 30 curated themes for shadcn/ui integration:
+
+```bash
+# Initialize with a theme (opt-in)
+omgkit init --theme neo-tokyo
+
+# Or explore themes first
+omgkit init --with-design
+```
+
+#### 5 Theme Categories
+
+| Category | Themes | Description |
+|----------|--------|-------------|
+| **Tech & AI** | neo-tokyo, electric-cyan, neural-dark, matrix-green, quantum-purple, hologram | Futuristic, cyberpunk-inspired |
+| **Minimal & Clean** | minimal-slate, paper, mono, zen, nordic, swiss | Simple, elegant, distraction-free |
+| **Corporate** | ocean-blue, corporate-indigo, finance, legal, healthcare, consulting | Professional, trustworthy |
+| **Creative & Bold** | coral-sunset, candy, neon, gradient-dream, retro, studio | Vibrant, expressive |
+| **Nature & Organic** | forest, ocean, desert, lavender, arctic, autumn | Earth tones, calming |
+
+#### Design Commands
+
+| Command | Description |
+|---------|-------------|
+| `/design:themes` | List all 30 curated themes |
+| `/design:theme <id>` | Apply a theme to your project |
+| `/design:preview` | Preview current theme colors |
+| `/design:builder` | Build custom theme interactively |
+| `/design:from-screenshot` | Extract theme from image |
+| `/design:from-url` | Extract theme from webpage |
+| `/design:add <comp>` | Add shadcn/ui components |
+| `/design:reset` | Reset to original theme |
+| `/design:rebuild <id>` | Rebuild entire project with new theme |
+| `/design:scan` | Scan for non-compliant colors |
+| `/design:rollback` | Rollback to previous theme |
+
+#### Theme Rebuild
+
+Rebuild your entire project's UI with a single command:
+
+```bash
+# Rebuild with new theme (scans and fixes hardcoded colors)
+omgkit design:rebuild neo-tokyo
+
+# Scan for non-compliant colors
+omgkit design:scan
+
+# Rollback if needed
+omgkit design:rollback
+```
+
+The rebuild feature:
+- Backs up current theme before changes
+- Scans `app/`, `components/`, `src/`, `pages/` directories
+- Replaces hardcoded colors (`bg-blue-500`) with theme variables (`bg-primary`)
+- Reports unfixable patterns for manual review
+
+#### How It Works
+
+OMGKIT provides CSS variables that shadcn/ui components consume:
+
+```
+.omgkit/design/theme.json  →  Theme configuration
+.omgkit/design/theme.css   →  CSS variables (:root + .dark)
+```
+
+After applying a theme, use `npx shadcn@latest add button` to add components that automatically use your theme colors.
+
 ---
 
 ## Installation

package/bin/omgkit.js

@@ -34,6 +34,13 @@ import {
   log
 } from '../lib/cli.js';
 
+import {
+  scanProjectColors,
+  rebuildProjectTheme,
+  rollbackTheme,
+  listThemeBackups
+} from '../lib/theme.js';
+
 // Set package root for CLI context
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -56,6 +63,8 @@ ${COLORS.bright}GLOBAL COMMANDS${COLORS.reset}
 
 ${COLORS.bright}PROJECT COMMANDS${COLORS.reset}
   ${COLORS.cyan}init${COLORS.reset}              Initialize .omgkit/ in current project
+  ${COLORS.cyan}init --with-design${COLORS.reset} Initialize with theme selection UI
+  ${COLORS.cyan}init --theme <id>${COLORS.reset} Initialize with specific theme (e.g., neo-tokyo)
   ${COLORS.cyan}project:upgrade${COLORS.reset}   Upgrade project to latest OMGKIT version
   ${COLORS.cyan}project:rollback${COLORS.reset}  Rollback project to previous backup
   ${COLORS.cyan}project:backups${COLORS.reset}   List available project backups
@@ -67,6 +76,12 @@ ${COLORS.bright}CONFIG COMMANDS${COLORS.reset}
   ${COLORS.cyan}config list [section]${COLORS.reset} List all config or specific section
   ${COLORS.cyan}config reset <key>${COLORS.reset}    Reset config key to default
 
+${COLORS.bright}DESIGN SYSTEM COMMANDS${COLORS.reset}
+  ${COLORS.cyan}design:rebuild <theme>${COLORS.reset}  Rebuild project UI with new theme
+  ${COLORS.cyan}design:scan${COLORS.reset}             Scan for non-compliant colors
+  ${COLORS.cyan}design:rollback [id]${COLORS.reset}    Rollback to previous theme
+  ${COLORS.cyan}design:backups${COLORS.reset}          List available theme backups
+
 ${COLORS.bright}UPGRADE OPTIONS${COLORS.reset}
   --dry        Show what would change without applying
   --force      Skip confirmation prompts
@@ -74,6 +89,8 @@ ${COLORS.bright}UPGRADE OPTIONS${COLORS.reset}
 ${COLORS.bright}EXAMPLES${COLORS.reset}
   omgkit install               # Install plugin globally
   omgkit init                  # Initialize project
+  omgkit init --theme neo-tokyo # Init with specific theme
+  omgkit init --with-design   # Init with theme selection UI
   omgkit project:upgrade       # Upgrade project config
   omgkit project:upgrade --dry # Preview upgrade changes
   omgkit project:rollback      # Rollback to last backup
@@ -87,6 +104,13 @@ ${COLORS.bright}CONFIG EXAMPLES${COLORS.reset}
   omgkit config list testing
   omgkit config reset testing.enforcement.level
 
+${COLORS.bright}DESIGN EXAMPLES${COLORS.reset}
+  omgkit design:rebuild neo-tokyo    # Rebuild with Neo Tokyo theme
+  omgkit design:rebuild --dry        # Preview what would change
+  omgkit design:scan                 # Scan for non-compliant colors
+  omgkit design:rollback             # Rollback to previous theme
+  omgkit design:backups              # List theme backups
+
 ${COLORS.bright}AFTER INSTALLATION${COLORS.reset}
   In Claude Code, type / to see all OMGKIT commands:
 
@@ -114,7 +138,12 @@ switch (command) {
     break;
   }
   case 'init': {
-    const result = initProject();
+    // Parse init options
+    const withDesign = args.includes('--with-design');
+    const themeIdx = args.indexOf('--theme');
+    const theme = themeIdx !== -1 ? args[themeIdx + 1] : null;
+
+    const result = initProject({ theme, withDesign });
     if (!result.success) process.exit(1);
     break;
   }
@@ -238,6 +267,164 @@ ${COLORS.bright}Examples:${COLORS.reset}
     }
     break;
   }
+  case 'design:rebuild': {
+    console.log(BANNER);
+    const themeId = args.find(a => !a.startsWith('--'));
+    const dryRun = args.includes('--dry');
+    const force = args.includes('--force');
+
+    if (!themeId) {
+      log.error('Usage: omgkit design:rebuild <theme-id> [--dry] [--force]');
+      log.info('Run /design:themes in Claude Code to see available themes');
+      log.info('Example: omgkit design:rebuild neo-tokyo');
+      process.exit(1);
+    }
+
+    console.log(`${COLORS.bright}🔮 Design Rebuild: ${themeId}${COLORS.reset}`);
+    console.log('━'.repeat(40));
+
+    if (dryRun) {
+      log.info('DRY RUN - No changes will be made\n');
+    }
+
+    const result = rebuildProjectTheme(process.cwd(), themeId, { dryRun, force });
+
+    if (!result.success) {
+      log.error(result.error);
+      process.exit(1);
+    }
+
+    if (!dryRun && result.backupId) {
+      console.log(`\n📦 ${COLORS.green}Backup created:${COLORS.reset} ${result.backupId}`);
+    }
+
+    console.log(`\n🎨 ${COLORS.bright}Theme Applied:${COLORS.reset} ${result.newTheme}`);
+
+    if (result.changedFiles.length > 0) {
+      console.log(`\n${COLORS.bright}Changed Files:${COLORS.reset}`);
+      for (const f of result.changedFiles) {
+        console.log(`  ${COLORS.green}✓${COLORS.reset} ${f}`);
+      }
+    }
+
+    if (result.fixedColors.length > 0) {
+      console.log(`\n${COLORS.bright}Fixed Colors:${COLORS.reset}`);
+      for (const fc of result.fixedColors) {
+        console.log(`  ${COLORS.cyan}${fc.file}${COLORS.reset}`);
+        for (const r of fc.replacements) {
+          if (r.count) {
+            console.log(`    ${r.from} → ${r.to} (${r.count}x)`);
+          } else {
+            console.log(`    ${r.from} → ${r.to}`);
+          }
+        }
+      }
+    }
+
+    if (result.warnings.length > 0) {
+      console.log(`\n${COLORS.yellow}⚠️  Warnings (manual review needed):${COLORS.reset}`);
+      for (const w of result.warnings.slice(0, 10)) {
+        console.log(`  ${w}`);
+      }
+      if (result.warnings.length > 10) {
+        console.log(`  ... and ${result.warnings.length - 10} more`);
+      }
+    }
+
+    if (dryRun) {
+      log.info('\nTo apply changes, run without --dry flag');
+    } else {
+      log.success('\nRebuild complete!');
+      log.info('To rollback: omgkit design:rollback');
+    }
+    break;
+  }
+
+  case 'design:scan': {
+    console.log(BANNER);
+    console.log(`${COLORS.bright}🔍 Scanning for non-compliant colors...${COLORS.reset}\n`);
+
+    const result = scanProjectColors(process.cwd());
+
+    console.log(`Scanned ${result.scannedFiles} files\n`);
+
+    if (result.nonCompliant.length === 0) {
+      log.success('All colors are theme-compliant!');
+    } else {
+      log.warn(`Found ${result.nonCompliant.length} non-compliant color references\n`);
+
+      // Group by file
+      const byFile = {};
+      for (const item of result.nonCompliant) {
+        if (!byFile[item.file]) byFile[item.file] = [];
+        byFile[item.file].push(item);
+      }
+
+      for (const [file, items] of Object.entries(byFile)) {
+        console.log(`${COLORS.cyan}📁 ${file}${COLORS.reset}`);
+        for (const item of items.slice(0, 5)) {
+          const suggestion = item.suggestion ? ` → ${COLORS.green}${item.suggestion}${COLORS.reset}` : ` ${COLORS.yellow}(manual review)${COLORS.reset}`;
+          console.log(`   Line ${item.line}: ${item.match}${suggestion}`);
+        }
+        if (items.length > 5) {
+          console.log(`   ... and ${items.length - 5} more`);
+        }
+        console.log();
+      }
+
+      console.log('━'.repeat(40));
+      console.log(`Total: ${result.nonCompliant.length} violations in ${Object.keys(byFile).length} files`);
+      console.log(`\nRun ${COLORS.cyan}omgkit design:rebuild <theme-id>${COLORS.reset} to auto-fix`);
+    }
+    break;
+  }
+
+  case 'design:rollback': {
+    console.log(BANNER);
+    const backupId = args[0];
+
+    console.log(`${COLORS.bright}🔄 Theme Rollback${COLORS.reset}\n`);
+
+    const result = rollbackTheme(process.cwd(), backupId);
+
+    if (!result.success) {
+      log.error(result.error);
+      if (result.error.includes('No theme backups')) {
+        log.info('No backups available. Rebuild a theme first to create backups.');
+      }
+      process.exit(1);
+    }
+
+    log.success(`Rolled back to: ${result.restoredTheme}`);
+    console.log(`\n${COLORS.bright}Restored Files:${COLORS.reset}`);
+    for (const f of result.restoredFiles) {
+      console.log(`  ${COLORS.green}✓${COLORS.reset} ${f}`);
+    }
+    console.log(`\nBackup used: ${result.backupUsed}`);
+    break;
+  }
+
+  case 'design:backups': {
+    console.log(BANNER);
+    console.log(`${COLORS.bright}📦 Theme Backups${COLORS.reset}\n`);
+
+    const backups = listThemeBackups(process.cwd());
+
+    if (backups.length === 0) {
+      log.info('No theme backups found');
+      log.info('Run omgkit design:rebuild <theme-id> to create backups');
+    } else {
+      for (const b of backups) {
+        console.log(`  ${COLORS.cyan}${b.id}${COLORS.reset}`);
+        console.log(`    ${b.previousTheme} → ${b.newTheme}`);
+        console.log(`    ${b.date} (${b.filesChanged} files)\n`);
+      }
+      console.log(`To rollback: ${COLORS.cyan}omgkit design:rollback${COLORS.reset}`);
+      console.log(`Or specify: ${COLORS.cyan}omgkit design:rollback <backup-id>${COLORS.reset}`);
+    }
+    break;
+  }
+
   case 'version':
   case '-v':
   case '--version': {

package/lib/cli.js

@@ -6,6 +6,13 @@
 import { existsSync, mkdirSync, cpSync, readFileSync, rmSync, readdirSync, statSync, writeFileSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import {
+  getThemeById,
+  getAllThemeIds,
+  applyThemeToProject,
+  loadAllThemes,
+  THEME_CATEGORIES
+} from './theme.js';
 
 // Package root detection
 let PACKAGE_ROOT;
@@ -51,7 +58,7 @@ ${COLORS.magenta}╔════════════════════
 ║                                                              ║
 ║   🔮 OMGKIT - Omega-Level Development Kit                   ║
 ║                                                              ║
-║   41 Agents • 160 Commands • 161 Skills • 10 Modes          ║
+║   41 Agents • 169 Commands • 162 Skills • 10 Modes          ║
 ║   "Think Omega. Build Omega. Be Omega."                     ║
 ║                                                              ║
 ╚════════════════════════════════════════════════════════════╝${COLORS.reset}
@@ -351,10 +358,12 @@ ${COLORS.magenta}🔮 Think Omega. Build Omega. Be Omega.${COLORS.reset}
  * @param {Object} options - Initialization options
  * @param {string} [options.cwd] - Working directory
  * @param {boolean} [options.silent] - Suppress output
+ * @param {string} [options.theme] - Theme ID to apply (opt-in)
+ * @param {boolean} [options.withDesign] - Show theme selection UI (opt-in)
  * @returns {Object} Result with success status and created files
  */
 export function initProject(options = {}) {
-  const { cwd = process.cwd(), silent = false } = options;
+  const { cwd = process.cwd(), silent = false, theme = null, withDesign = false } = options;
 
   if (!silent) {
     console.log(BANNER);
@@ -425,6 +434,47 @@ export function initProject(options = {}) {
     }
   });
 
+  // Apply theme if specified (opt-in design system)
+  let appliedTheme = null;
+  if (theme) {
+    const themeObj = getThemeById(theme);
+    if (themeObj) {
+      const themePaths = applyThemeToProject(themeObj, cwd);
+      appliedTheme = themeObj;
+      createdFiles.push('.omgkit/design/theme.json', '.omgkit/design/theme.css');
+      if (!silent) {
+        log.success(`Applied theme: ${themeObj.name}`);
+        log.info(`  → ${themePaths.themeJson}`);
+        log.info(`  → ${themePaths.themeCss}`);
+      }
+    } else {
+      if (!silent) log.warn(`Theme '${theme}' not found. Skipping theme setup.`);
+    }
+  } else if (withDesign && !silent) {
+    // Show available themes when --with-design is used
+    console.log(`
+${COLORS.bright}🎨 Design System Setup${COLORS.reset}
+To apply a theme, run: ${COLORS.cyan}omgkit init --theme <theme-id>${COLORS.reset}
+
+${COLORS.bright}Available Themes:${COLORS.reset}`);
+
+    const allThemes = loadAllThemes();
+    for (const [categoryId, themes] of Object.entries(allThemes)) {
+      const category = THEME_CATEGORIES[categoryId];
+      if (!category || themes.length === 0) continue;
+      console.log(`\n${category.emoji} ${COLORS.bright}${category.name}${COLORS.reset}`);
+      for (const t of themes) {
+        console.log(`  ${COLORS.cyan}${t.id}${COLORS.reset} - ${t.name}`);
+      }
+    }
+    console.log(`
+${COLORS.bright}Or use these commands later:${COLORS.reset}
+  ${COLORS.cyan}/design:themes${COLORS.reset}      List all themes
+  ${COLORS.cyan}/design:theme <id>${COLORS.reset}  Apply a theme
+  ${COLORS.cyan}/design:builder${COLORS.reset}     Build custom theme
+`);
+  }
+
   if (!silent) {
     console.log(`
 ${COLORS.bright}Project initialized!${COLORS.reset}
@@ -438,12 +488,16 @@ ${COLORS.bright}Quick commands:${COLORS.reset}
   /dev:feature [desc]   Build a feature
   /dev:fix [issue]      Fix a bug
   /omega:10x [topic]    Find 10x improvement
-
+${appliedTheme ? `
+${COLORS.bright}Design System:${COLORS.reset}
+  /design:preview       Preview current theme
+  /design:add <comp>    Add shadcn components
+` : ''}
 ${COLORS.magenta}🔮 Your Omega journey begins!${COLORS.reset}
 `);
   }
 
-  return { success: true, createdDirs, createdFiles };
+  return { success: true, createdDirs, createdFiles, theme: appliedTheme };
 }
 
 /**