omgkit 2.29.0 → 2.30.0

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/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,6 +431,7 @@ agents:
       - frontend/accessibility
       - frontend/responsive
       - frontend/tailwindcss
+      - frontend/design-system-context
     commands:
       - /design:screenshot
       - /design:cro
@@ -445,6 +446,9 @@ agents:
       - /design:from-url
       - /design:builder
       - /design:reset
+      - /design:rebuild
+      - /design:scan
+      - /design:rollback
 
   api-designer:
     file: agents/api-designer.md

package/plugin/skills/frontend/design-system-context/SKILL.md

@@ -0,0 +1,252 @@
+---
+name: design-system-context
+description: Automatic design system context injection for UI consistency
+category: frontend
+level: foundational
+commands:
+  - /design:preview
+  - /design:themes
+---
+
+# Design System Context Injection
+
+This skill ensures all UI/UX work automatically follows the project's design system without explicit user specification.
+
+## Automatic Context Loading
+
+**CRITICAL**: Before ANY UI/component work, you MUST:
+
+1. Check if `.omgkit/design/theme.json` exists
+2. If exists, read it and use its colors
+3. If not exists, suggest running `/design:theme <id>` first
+
+```bash
+# Always check first
+if [ -f ".omgkit/design/theme.json" ]; then
+  # Read and use theme colors
+else
+  # Suggest: "No design system detected. Run /design:themes to select one."
+fi
+```
+
+## Theme Context Structure
+
+When theme.json exists, extract these key values:
+
+```json
+{
+  "name": "Theme Name",
+  "id": "theme-id",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "primary": "346.8 77.2% 49.8%",
+      "primary-foreground": "355.7 100% 97.3%",
+      "secondary": "240 4.8% 95.9%",
+      "muted": "240 4.8% 95.9%",
+      "accent": "240 4.8% 95.9%",
+      "destructive": "0 84.2% 60.2%",
+      "border": "240 5.9% 90%",
+      "ring": "346.8 77.2% 49.8%"
+    }
+  },
+  "radius": "0.5rem"
+}
+```
+
+## Mandatory Color Usage
+
+**NEVER hardcode colors**. Always use CSS variables via Tailwind:
+
+### ✅ CORRECT - Use Theme Variables
+```tsx
+// Backgrounds
+<div className="bg-background">       // Main background
+<div className="bg-card">             // Card background
+<div className="bg-muted">            // Subtle background
+<div className="bg-primary">          // Primary action background
+<div className="bg-secondary">        // Secondary background
+<div className="bg-destructive">      // Error/danger background
+
+// Text
+<p className="text-foreground">       // Primary text
+<p className="text-muted-foreground"> // Secondary/subtle text
+<p className="text-primary">          // Accent text
+<p className="text-destructive">      // Error text
+
+// Borders
+<div className="border-border">       // Standard border
+<div className="border-input">        // Input border
+<div className="ring-ring">           // Focus ring
+
+// Interactive states
+<button className="bg-primary hover:bg-primary/90">
+<button className="bg-secondary hover:bg-secondary/80">
+```
+
+### ❌ WRONG - Never Hardcode
+```tsx
+// NEVER do this
+<div className="bg-[#E11D48]">        // Hardcoded hex
+<div className="bg-rose-500">         // Tailwind default color
+<div className="text-gray-900">       // Not from theme
+<div style={{ color: '#333' }}>       // Inline style
+```
+
+## Component Generation Rules
+
+When generating ANY UI component:
+
+### 1. Button Component
+```tsx
+// Always use theme colors
+<Button className="bg-primary text-primary-foreground hover:bg-primary/90">
+  Primary Action
+</Button>
+
+<Button variant="secondary" className="bg-secondary text-secondary-foreground">
+  Secondary
+</Button>
+
+<Button variant="destructive" className="bg-destructive text-destructive-foreground">
+  Delete
+</Button>
+
+<Button variant="outline" className="border-border bg-background hover:bg-accent">
+  Outline
+</Button>
+```
+
+### 2. Card Component
+```tsx
+<Card className="bg-card text-card-foreground border-border">
+  <CardHeader>
+    <CardTitle className="text-foreground">Title</CardTitle>
+    <CardDescription className="text-muted-foreground">Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    Content with <span className="text-primary">accent</span> color
+  </CardContent>
+</Card>
+```
+
+### 3. Form Component
+```tsx
+<form className="space-y-4">
+  <div>
+    <Label className="text-foreground">Email</Label>
+    <Input
+      className="border-input bg-background focus:ring-ring"
+      placeholder="Enter email"
+    />
+  </div>
+  <Button className="bg-primary text-primary-foreground">
+    Submit
+  </Button>
+</form>
+```
+
+### 4. Navigation Component
+```tsx
+<nav className="bg-background border-b border-border">
+  <div className="flex items-center gap-4">
+    <a className="text-foreground hover:text-primary">Home</a>
+    <a className="text-muted-foreground hover:text-foreground">About</a>
+    <a className="text-muted-foreground hover:text-foreground">Contact</a>
+  </div>
+</nav>
+```
+
+### 5. Alert/Notification
+```tsx
+// Success - use primary or custom success color
+<Alert className="bg-primary/10 text-primary border-primary">
+  <CheckIcon className="text-primary" />
+  <AlertDescription>Success message</AlertDescription>
+</Alert>
+
+// Error - use destructive
+<Alert className="bg-destructive/10 text-destructive border-destructive">
+  <XIcon className="text-destructive" />
+  <AlertDescription>Error message</AlertDescription>
+</Alert>
+
+// Info - use muted
+<Alert className="bg-muted text-muted-foreground border-border">
+  <InfoIcon />
+  <AlertDescription>Info message</AlertDescription>
+</Alert>
+```
+
+## Dark Mode Handling
+
+Theme CSS includes `.dark` class overrides. Just ensure:
+
+```tsx
+// This automatically works - colors swap in dark mode
+<div className="bg-background text-foreground">
+  Content adapts to light/dark automatically
+</div>
+
+// For dark mode toggle
+<button onClick={() => document.documentElement.classList.toggle('dark')}>
+  Toggle Dark Mode
+</button>
+```
+
+## Border Radius Consistency
+
+Use theme's radius value via CSS variable:
+
+```tsx
+// These use --radius from theme
+<div className="rounded-lg">   // var(--radius)
+<div className="rounded-md">   // calc(var(--radius) - 2px)
+<div className="rounded-sm">   // calc(var(--radius) - 4px)
+```
+
+## Pre-Task Checklist
+
+Before generating ANY UI code, mentally check:
+
+- [ ] Read `.omgkit/design/theme.json` if exists
+- [ ] All colors use CSS variables (bg-primary, text-foreground, etc.)
+- [ ] No hardcoded hex values
+- [ ] No Tailwind default colors (gray-500, blue-600, etc.)
+- [ ] Border radius uses theme's radius
+- [ ] Dark mode compatible (no light-only or dark-only colors)
+
+## Error Prevention
+
+If you catch yourself writing:
+- `bg-blue-500` → Change to `bg-primary`
+- `text-gray-600` → Change to `text-muted-foreground`
+- `border-gray-200` → Change to `border-border`
+- `#E11D48` → Change to CSS variable reference
+
+## Integration with shadcn/ui
+
+shadcn/ui components automatically use CSS variables:
+
+```tsx
+// These already use theme colors
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+
+// Just use them - they read from theme.css
+<Button>Uses --primary automatically</Button>
+<Card>Uses --card automatically</Card>
+<Input />  // Uses --input, --border, --ring automatically
+```
+
+## Summary
+
+**The Golden Rule**: If you're writing a color class, it MUST be one of:
+- `bg-{background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|input|ring}`
+- `text-{foreground|card-foreground|popover-foreground|primary-foreground|secondary-foreground|muted-foreground|accent-foreground|destructive-foreground}`
+- `border-{border|input|ring}`
+- Opacity variants like `bg-primary/90`, `text-muted-foreground/80`
+
+**NO EXCEPTIONS**.