omgkit 2.28.0 → 2.29.0

package/plugin/commands/design/builder.md

@@ -0,0 +1,96 @@
+---
+description: Interactive theme builder
+allowed-tools: Read, Write
+argument-hint: [base-theme]
+---
+
+# 🔧 Theme Builder: $ARGUMENTS
+
+Build a custom theme interactively or customize an existing theme.
+
+## Process
+
+1. Start with base theme (optional) or neutral defaults
+2. Configure each color slot:
+   - Background / Foreground
+   - Primary / Primary Foreground
+   - Secondary / Secondary Foreground
+   - Muted / Muted Foreground
+   - Accent / Accent Foreground
+   - Destructive / Destructive Foreground
+   - Border / Input / Ring
+3. Configure typography (optional)
+4. Configure border radius
+5. Preview changes
+6. Generate theme files
+
+## Color Input Formats
+
+Accept colors in any format:
+- Hex: `#E11D48` or `E11D48`
+- HSL: `346.8 77.2% 49.8%`
+- RGB: `rgb(225, 29, 72)`
+- Named: `red`, `blue`, `emerald-500`
+
+## Quick Start Options
+
+### From Base Theme
+```bash
+/design:builder neo-tokyo      # Start with Neo Tokyo
+/design:builder minimal-slate  # Start with Minimal Slate
+```
+
+### From Scratch
+```bash
+/design:builder                # Start with neutral defaults
+```
+
+## Customization Steps
+
+### Step 1: Primary Color
+The main brand color used for buttons, links, and key elements.
+
+### Step 2: Secondary Color
+Background color for secondary actions and subtle surfaces.
+
+### Step 3: Accent Color
+Highlight color for hovers, selections, and emphasis.
+
+### Step 4: Mode Preference
+Choose default mode (light/dark) and generate the opposite.
+
+### Step 5: Border Radius
+- `0rem` - Sharp corners
+- `0.25rem` - Subtle rounding
+- `0.5rem` - Default
+- `0.75rem` - Rounded
+- `9999px` - Full/pill
+
+### Step 6: Typography (Optional)
+- Sans-serif font family
+- Monospace font family
+
+## Output
+
+- `.omgkit/design/theme.json` - Custom theme configuration
+- `.omgkit/design/theme.css` - CSS variables (light + dark)
+
+## Usage Examples
+
+```bash
+# Start fresh
+/design:builder
+
+# Customize existing theme
+/design:builder electric-cyan
+
+# Quick customization
+/design:builder --primary "#7C3AED" --radius "0.75rem"
+```
+
+## Integration
+
+After building your theme:
+1. Import theme.css in your globals.css
+2. Run `npx shadcn@latest init` if not done
+3. Add components with `/design:add`

package/plugin/commands/design/from-screenshot.md

@@ -0,0 +1,64 @@
+---
+description: Extract theme from screenshot using AI vision
+allowed-tools: Read, Write, Task
+argument-hint: <screenshot-path>
+---
+
+# 📸 Extract Theme from Screenshot: $ARGUMENTS
+
+Use Claude Vision to analyze a screenshot and extract a cohesive color theme.
+
+## Supported Formats
+
+- PNG, JPG, JPEG, WebP
+- Screenshots from websites, apps, or design tools
+- Dribbble shots, Figma exports, or any UI design
+
+## Process
+
+1. Load the screenshot image
+2. Analyze colors using Claude Vision
+3. Extract dominant colors:
+   - Background and foreground
+   - Primary brand color
+   - Secondary and accent colors
+   - Semantic colors (success, warning, error)
+4. Determine light/dark mode preference
+5. Generate complementary dark/light mode
+6. Create theme.json and theme.css
+
+## Color Extraction
+
+Claude Vision will identify:
+- **Backgrounds** - Main surface colors
+- **Text colors** - Primary and secondary text
+- **Brand colors** - CTAs, buttons, links
+- **Semantic colors** - Success, warning, error indicators
+- **Borders** - Dividers and boundaries
+
+## Output
+
+- `.omgkit/design/theme.json` - Extracted theme configuration
+- `.omgkit/design/theme.css` - CSS variables (light + dark)
+
+## Usage
+
+```bash
+/design:from-screenshot ./mockup.png
+/design:from-screenshot ~/Downloads/dribbble-shot.jpg
+/design:from-screenshot ./figma-export.webp
+```
+
+## Tips for Best Results
+
+1. **High contrast screenshots** - Clear color distinctions work best
+2. **Full UI screenshots** - More elements = better color extraction
+3. **Avoid gradients** - Solid colors extract more reliably
+4. **Include buttons/CTAs** - Helps identify primary colors
+
+## Post-Extraction
+
+After extraction, you can:
+- `/design:preview` - Review extracted colors
+- `/design:builder` - Adjust colors manually
+- `/design:theme <id>` - Switch to a curated theme instead

package/plugin/commands/design/from-url.md

@@ -0,0 +1,74 @@
+---
+description: Extract theme from webpage URL
+allowed-tools: WebFetch, Read, Write, Task
+argument-hint: <url>
+---
+
+# 🌐 Extract Theme from URL: $ARGUMENTS
+
+Analyze a webpage and extract its color theme for your project.
+
+## Process
+
+1. Fetch the webpage content
+2. Take a screenshot or analyze CSS
+3. Extract CSS custom properties if available
+4. Analyze computed styles for color patterns
+5. Generate OMGKIT theme from extracted colors
+
+## Extraction Methods
+
+### Method 1: CSS Variables (Best)
+If the site uses CSS custom properties:
+```css
+:root {
+  --primary: #...
+  --background: #...
+}
+```
+
+### Method 2: Computed Styles
+Analyze rendered element colors:
+- Body background
+- Heading colors
+- Link/button colors
+- Border colors
+
+### Method 3: Screenshot Analysis
+Fall back to visual analysis using Claude Vision.
+
+## Popular Sites for Inspiration
+
+```
+/design:from-url https://stripe.com
+/design:from-url https://linear.app
+/design:from-url https://vercel.com
+/design:from-url https://notion.so
+/design:from-url https://figma.com
+/design:from-url https://raycast.com
+```
+
+## Output
+
+- `.omgkit/design/theme.json` - Extracted theme configuration
+- `.omgkit/design/theme.css` - CSS variables (light + dark)
+
+## Usage
+
+```bash
+/design:from-url https://example.com
+/design:from-url https://your-inspiration-site.com
+```
+
+## Limitations
+
+- Some sites may block automated access
+- Highly dynamic sites may not extract well
+- Sites with many gradients may produce inconsistent results
+
+## Post-Extraction
+
+After extraction:
+- `/design:preview` - Review extracted colors
+- `/design:builder` - Adjust colors manually
+- `/design:theme <id>` - Switch to curated theme instead

package/plugin/commands/design/preview.md

@@ -0,0 +1,55 @@
+---
+description: Preview current project theme colors
+allowed-tools: Read
+argument-hint: [light|dark]
+---
+
+# 👁️ Preview Theme: $ARGUMENTS
+
+Preview the current project theme configuration and color palette.
+
+## Process
+
+1. Load `.omgkit/design/theme.json`
+2. Display theme metadata (name, category, description)
+3. Show color palette for light mode
+4. Show color palette for dark mode
+5. Display CSS variables
+
+## Output
+
+### Theme Information
+- Name and ID
+- Category
+- Description
+- Border radius
+- Font families
+
+### Color Palette (Light Mode)
+- Background / Foreground
+- Primary / Primary Foreground
+- Secondary / Secondary Foreground
+- Muted / Muted Foreground
+- Accent / Accent Foreground
+- Destructive / Destructive Foreground
+- Border / Input / Ring
+
+### Color Palette (Dark Mode)
+- Same colors as light mode (inverted)
+
+### CSS Variables
+- Show the generated `:root` and `.dark` CSS blocks
+
+## Usage
+
+```bash
+/design:preview         # Show full preview (both modes)
+/design:preview light   # Show light mode only
+/design:preview dark    # Show dark mode only
+```
+
+## Next Steps
+
+- `/design:theme <id>` - Switch to different theme
+- `/design:themes` - Browse available themes
+- `/design:builder` - Customize 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/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

@@ -437,6 +437,14 @@ agents:
       - /design:enhance
       - /design:fast
       - /design:good
+      - /design:themes
+      - /design:theme
+      - /design:preview
+      - /design:add
+      - /design:from-screenshot
+      - /design:from-url
+      - /design:builder
+      - /design:reset
 
   api-designer:
     file: agents/api-designer.md

package/templates/design/schema/theme.schema.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "OMGKIT Theme Schema",
+  "description": "Schema for OMGKIT design system themes (shadcn/ui compatible)",
+  "type": "object",
+  "required": ["name", "id", "category", "colors"],
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Display name of the theme"
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^[a-z0-9-]+$",
+      "description": "Unique identifier (kebab-case)"
+    },
+    "category": {
+      "type": "string",
+      "enum": ["tech-ai", "minimal-clean", "corporate-enterprise", "creative-bold", "nature-organic"],
+      "description": "Theme category"
+    },
+    "description": {
+      "type": "string",
+      "description": "Brief description of the theme aesthetic"
+    },
+    "colors": {
+      "type": "object",
+      "required": ["light", "dark"],
+      "properties": {
+        "light": { "$ref": "#/definitions/colorPalette" },
+        "dark": { "$ref": "#/definitions/colorPalette" }
+      }
+    },
+    "radius": {
+      "type": "string",
+      "default": "0.5rem",
+      "description": "Border radius for components"
+    },
+    "fontFamily": {
+      "type": "object",
+      "properties": {
+        "sans": { "type": "string", "default": "Inter, system-ui, sans-serif" },
+        "mono": { "type": "string", "default": "JetBrains Mono, monospace" }
+      }
+    }
+  },
+  "definitions": {
+    "colorPalette": {
+      "type": "object",
+      "required": [
+        "background", "foreground",
+        "primary", "primary-foreground",
+        "secondary", "secondary-foreground",
+        "muted", "muted-foreground",
+        "accent", "accent-foreground",
+        "destructive", "destructive-foreground",
+        "border", "input", "ring",
+        "card", "card-foreground",
+        "popover", "popover-foreground"
+      ],
+      "properties": {
+        "background": { "$ref": "#/definitions/hslColor" },
+        "foreground": { "$ref": "#/definitions/hslColor" },
+        "primary": { "$ref": "#/definitions/hslColor" },
+        "primary-foreground": { "$ref": "#/definitions/hslColor" },
+        "secondary": { "$ref": "#/definitions/hslColor" },
+        "secondary-foreground": { "$ref": "#/definitions/hslColor" },
+        "muted": { "$ref": "#/definitions/hslColor" },
+        "muted-foreground": { "$ref": "#/definitions/hslColor" },
+        "accent": { "$ref": "#/definitions/hslColor" },
+        "accent-foreground": { "$ref": "#/definitions/hslColor" },
+        "destructive": { "$ref": "#/definitions/hslColor" },
+        "destructive-foreground": { "$ref": "#/definitions/hslColor" },
+        "border": { "$ref": "#/definitions/hslColor" },
+        "input": { "$ref": "#/definitions/hslColor" },
+        "ring": { "$ref": "#/definitions/hslColor" },
+        "card": { "$ref": "#/definitions/hslColor" },
+        "card-foreground": { "$ref": "#/definitions/hslColor" },
+        "popover": { "$ref": "#/definitions/hslColor" },
+        "popover-foreground": { "$ref": "#/definitions/hslColor" },
+        "chart-1": { "$ref": "#/definitions/hslColor" },
+        "chart-2": { "$ref": "#/definitions/hslColor" },
+        "chart-3": { "$ref": "#/definitions/hslColor" },
+        "chart-4": { "$ref": "#/definitions/hslColor" },
+        "chart-5": { "$ref": "#/definitions/hslColor" },
+        "sidebar-background": { "$ref": "#/definitions/hslColor" },
+        "sidebar-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-primary": { "$ref": "#/definitions/hslColor" },
+        "sidebar-primary-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-accent": { "$ref": "#/definitions/hslColor" },
+        "sidebar-accent-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-border": { "$ref": "#/definitions/hslColor" },
+        "sidebar-ring": { "$ref": "#/definitions/hslColor" }
+      }
+    },
+    "hslColor": {
+      "type": "string",
+      "pattern": "^\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?%\\s+\\d+(\\.\\d+)?%$",
+      "description": "HSL color without hsl() wrapper, e.g., '220 14.3% 95.9%'"
+    }
+  }
+}

package/templates/design/themes/corporate-enterprise/consulting.json

@@ -0,0 +1,81 @@
+{
+  "name": "Consulting",
+  "id": "consulting",
+  "category": "corporate-enterprise",
+  "description": "Management consulting aesthetic like McKinsey and BCG",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222 47% 11%",
+      "primary": "222 80% 28%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "220 20% 96%",
+      "secondary-foreground": "222 47% 15%",
+      "muted": "220 20% 96%",
+      "muted-foreground": "220 15% 45%",
+      "accent": "35 80% 45%",
+      "accent-foreground": "0 0% 100%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "220 15% 90%",
+      "input": "220 15% 90%",
+      "ring": "222 80% 28%",
+      "card": "0 0% 100%",
+      "card-foreground": "222 47% 11%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222 47% 11%",
+      "chart-1": "222 80% 28%",
+      "chart-2": "35 80% 45%",
+      "chart-3": "160 70% 40%",
+      "chart-4": "0 70% 55%",
+      "chart-5": "270 60% 55%",
+      "sidebar-background": "220 20% 98%",
+      "sidebar-foreground": "222 47% 15%",
+      "sidebar-primary": "222 80% 28%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "220 20% 94%",
+      "sidebar-accent-foreground": "222 47% 15%",
+      "sidebar-border": "220 15% 90%",
+      "sidebar-ring": "222 80% 28%"
+    },
+    "dark": {
+      "background": "222 47% 6%",
+      "foreground": "220 20% 96%",
+      "primary": "222 60% 50%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "222 30% 15%",
+      "secondary-foreground": "220 20% 96%",
+      "muted": "222 30% 15%",
+      "muted-foreground": "220 15% 55%",
+      "accent": "35 80% 55%",
+      "accent-foreground": "222 47% 6%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "222 30% 18%",
+      "input": "222 30% 18%",
+      "ring": "222 60% 50%",
+      "card": "222 47% 8%",
+      "card-foreground": "220 20% 96%",
+      "popover": "222 47% 6%",
+      "popover-foreground": "220 20% 96%",
+      "chart-1": "222 60% 60%",
+      "chart-2": "35 80% 65%",
+      "chart-3": "160 70% 50%",
+      "chart-4": "0 70% 65%",
+      "chart-5": "270 60% 65%",
+      "sidebar-background": "222 47% 6%",
+      "sidebar-foreground": "220 20% 96%",
+      "sidebar-primary": "222 60% 50%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "222 30% 15%",
+      "sidebar-accent-foreground": "220 20% 96%",
+      "sidebar-border": "222 30% 18%",
+      "sidebar-ring": "222 60% 50%"
+    }
+  },
+  "radius": "0.375rem",
+  "fontFamily": {
+    "sans": "Inter, system-ui, sans-serif",
+    "mono": "JetBrains Mono, monospace"
+  }
+}