omgkit 2.28.0 → 2.29.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,52 @@ 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 |
+
+#### 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

@@ -56,6 +56,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
@@ -74,6 +76,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
@@ -114,7 +118,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;
   }

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 • 161 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 };
 }
 
 /**