omgkit 2.29.0 → 2.31.0

package/README.md

@@ -37,11 +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** | 169 | Slash commands for every development task |
+| **Commands** | 174 | Slash commands for every development task |
 | **Workflows** | 69 | Complete development processes from idea to deploy |
-| **Skills** | 161 | Domain expertise modules across 24 categories |
+| **Skills** | 162 | Domain expertise modules across 24 categories |
 | **Modes** | 10 | Behavioral configurations for different contexts |
-| **Themes** | 30 | Curated design system themes for shadcn/ui |
+| **Themes** | 31 | Curated design system themes (V1 + V2 schemas) |
 | **Archetypes** | 14 | Project templates for autonomous development |
 
 ---
@@ -166,23 +166,38 @@ testing:
       target: 85
 ```
 
-### 6. Design System (New in 2.29.0)
+### 6. Design System (Enhanced in 2.30.0)
 
-OMGKIT includes a complete design system with 30 curated themes for shadcn/ui integration:
+OMGKIT includes a complete design system with 31 curated themes for shadcn/ui integration. Now supports both **V1** (flat colors) and **V2** (color scales, effects, animations) theme schemas.
 
 ```bash
 # Initialize with a theme (opt-in)
 omgkit init --theme neo-tokyo
 
+# Or use a V2 theme with advanced features
+omgkit init --theme electric-cyan-v2
+
 # Or explore themes first
 omgkit init --with-design
 ```
 
+#### Theme Schema Versions
+
+| Feature | V1 | V2 |
+|---------|----|----|
+| Flat colors | ✓ | ✓ |
+| 12-step color scales | - | ✓ |
+| $ref token references | - | ✓ |
+| Status colors (success/warning/info) | - | ✓ |
+| Effects (glass, glow, gradient) | - | ✓ |
+| Animations (keyframes) | - | ✓ |
+| Alpha variants | - | ✓ |
+
 #### 5 Theme Categories
 
 | Category | Themes | Description |
 |----------|--------|-------------|
-| **Tech & AI** | neo-tokyo, electric-cyan, neural-dark, matrix-green, quantum-purple, hologram | Futuristic, cyberpunk-inspired |
+| **Tech & AI** | neo-tokyo, electric-cyan, electric-cyan-v2, 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 |
@@ -192,7 +207,7 @@ omgkit init --with-design
 
 | Command | Description |
 |---------|-------------|
-| `/design:themes` | List all 30 curated themes |
+| `/design:themes` | List all 31 curated themes |
 | `/design:theme <id>` | Apply a theme to your project |
 | `/design:preview` | Preview current theme colors |
 | `/design:builder` | Build custom theme interactively |
@@ -200,6 +215,73 @@ omgkit init --with-design
 | `/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 |
+| `/design:export <format>` | Export to CSS, SCSS, Tailwind, Figma, Style Dictionary |
+| `/design:validate` | Validate theme structure |
+
+#### Theme Export (New in 2.30.0)
+
+Export your theme to various design tools and framework formats:
+
+```bash
+# Export CSS
+/design:export css
+
+# Export Figma tokens
+/design:export figma --output ./tokens/
+
+# Export all formats
+/design:export --all
+```
+
+Supported formats: `css`, `scss`, `tailwind`, `figma`, `style-dictionary`
+
+#### 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
+
+# Use V2 theme for advanced features
+omgkit design:rebuild electric-cyan-v2
+
+# 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
+- V2 themes generate 12-step color scales and status colors
+
+#### V2 Theme Features
+
+V2 themes provide additional CSS variables:
+
+```css
+/* 12-step color scales */
+--cyan-1 through --cyan-12
+--cyan-a1 through --cyan-a12  /* Alpha variants */
+
+/* Status colors */
+--success, --warning, --info
+
+/* Effects */
+--glass-blur, --glow
+
+/* Animations */
+@keyframes shimmer { ... }
+--animation-shimmer
+```
 
 #### How It Works
 
@@ -346,7 +428,7 @@ Agents are specialized AI team members, each with distinct expertise and respons
 
 ---
 
-## Commands (160)
+## Commands (174)
 
 Commands are slash-prefixed actions organized by namespace.
 
@@ -611,7 +693,7 @@ Workflows are orchestrated sequences of agents, commands, and skills.
 
 ---
 
-## Skills (161)
+## Skills (162)
 
 Skills are domain expertise modules organized in 24 categories.
 
@@ -963,7 +1045,7 @@ If any sync issue is detected (missing pages, wrong counts, broken links), the v
 
 ## Validation & Testing
 
-OMGKIT has 7300+ automated tests ensuring system integrity.
+OMGKIT has 8200+ automated tests ensuring system integrity.
 
 ### Run Tests
 

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);
@@ -69,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
@@ -91,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:
 
@@ -247,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

@@ -58,7 +58,7 @@ ${COLORS.magenta}╔════════════════════
 ║                                                              ║
 ║   🔮 OMGKIT - Omega-Level Development Kit                   ║
 ║                                                              ║
-║   41 Agents • 169 Commands • 161 Skills • 10 Modes          ║
+║   41 Agents • 169 Commands • 162 Skills • 10 Modes          ║
 ║   "Think Omega. Build Omega. Be Omega."                     ║
 ║                                                              ║
 ╚════════════════════════════════════════════════════════════╝${COLORS.reset}

package/lib/generators/css.generator.js

@@ -0,0 +1,151 @@
+/**
+ * CSS Generator
+ * Generates CSS variables from theme (v1 and v2 compatible)
+ *
+ * @module lib/generators/css
+ */
+
+import { detectThemeVersion, isV2Theme } from '../theme.js';
+import {
+  processTheme,
+  processAnimations,
+  generateKeyframesCSS
+} from '../theme-v2.js';
+
+/**
+ * Generate CSS from theme
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {Object} options - Generation options
+ * @param {boolean} options.includeBase - Include @layer base wrapper (default: true)
+ * @param {boolean} options.includeReset - Include border-box reset (default: true)
+ * @param {boolean} options.includeAnimations - Include keyframes (default: true)
+ * @returns {string} CSS content
+ */
+export function generateCSS(theme, options = {}) {
+  const {
+    includeBase = true,
+    includeReset = true,
+    includeAnimations = true
+  } = options;
+
+  const result = processTheme(theme);
+  const { light: lightVars, dark: darkVars } = result.variables;
+
+  // Generate variable declarations
+  const generateVars = (vars) => {
+    return Object.entries(vars)
+      .map(([key, value]) => `  --${key}: ${value};`)
+      .join('\n');
+  };
+
+  const lightCSS = generateVars(lightVars);
+  const darkCSS = generateVars(darkVars);
+
+  // Typography
+  const fontSans = theme.typography?.fontFamily?.sans ||
+                   theme.fontFamily?.sans ||
+                   'Inter, system-ui, sans-serif';
+  const fontMono = theme.typography?.fontFamily?.mono ||
+                   theme.fontFamily?.mono ||
+                   'JetBrains Mono, monospace';
+  const radius = theme.spacing?.radius || theme.radius || '0.5rem';
+
+  // Animations
+  let keyframesCSS = '';
+  let animationVars = '';
+
+  if (includeAnimations && theme.animations) {
+    const { keyframes, animations } = processAnimations(theme.animations);
+    keyframesCSS = generateKeyframesCSS(keyframes);
+    animationVars = Object.entries(animations)
+      .map(([name, value]) => `  --animation-${name}: ${value};`)
+      .join('\n');
+  }
+
+  // Build CSS
+  const version = detectThemeVersion(theme);
+  let css = `/* OMGKIT Theme: ${theme.name} */
+/* Theme ID: ${theme.id} */
+/* Category: ${theme.category} */
+/* Version: ${version} */
+/* Generated by OMGKIT Design System */
+
+`;
+
+  // Add keyframes
+  if (keyframesCSS) {
+    css += keyframesCSS + '\n';
+  }
+
+  // Root variables
+  if (includeBase) {
+    css += `@layer base {
+  :root {
+${lightCSS}
+  --radius: ${radius};
+  --font-sans: ${fontSans};
+  --font-mono: ${fontMono};
+${animationVars ? animationVars + '\n' : ''}}
+
+  .dark {
+${darkCSS}
+  }
+}
+`;
+  } else {
+    css += `:root {
+${lightCSS}
+  --radius: ${radius};
+  --font-sans: ${fontSans};
+  --font-mono: ${fontMono};
+${animationVars ? animationVars + '\n' : ''}}
+
+.dark {
+${darkCSS}
+}
+`;
+  }
+
+  // Reset styles
+  if (includeReset && includeBase) {
+    css += `
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+}
+`;
+  } else if (includeReset) {
+    css += `
+* {
+  border-color: hsl(var(--border));
+}
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+}
+`;
+  }
+
+  return css;
+}
+
+/**
+ * Generate CSS for a specific mode only
+ * @param {Object} theme - Theme object
+ * @param {string} mode - 'light' or 'dark'
+ * @returns {string} CSS content for that mode
+ */
+export function generateCSSForMode(theme, mode = 'light') {
+  const result = processTheme(theme, { mode });
+  const vars = result.variables[mode] || {};
+
+  return Object.entries(vars)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join('\n');
+}