omnidesign 1.0.1 → 1.1.0

package/README.md

@@ -1,576 +1,418 @@
 # 🎨 OmniDesign
 
 <p align="center">
-  <img src="logo.jpg" alt="OmniDesign Logo" width="180">
+  <img src="logo.jpg" alt="OmniDesign Logo" width="160">
 </p>
 
 <p align="center">
-  <strong>The Universal Design System for AI Coding Assistants</strong>
+  <strong>Universal Design System with Tailwind CSS Integration</strong>
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/omnidesign"><img src="https://img.shields.io/npm/v/omnidesign?style=flat-square&color=blue" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/omnidesign"><img src="https://img.shields.io/npm/dm/omnidesign?style=flat-square&color=green" alt="npm downloads"></a>
-  <a href="LICENSE"><img src="https://img.shields.io/npm/l/omnidesign?style=flat-square" alt="License"></a>
-  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.0+-blue?style=flat-square&logo=typescript" alt="TypeScript"></a>
-  <a href="https://bun.sh/"><img src="https://img.shields.io/badge/Bun-1.0+-fbbf24?style=flat-square&logo=bun&logoColor=black" alt="Bun"></a>
+  One package. 10 IDEs. 25 themes. 176 colors. 39 Nerd Fonts. Tailwind-ready.
 </p>
 
 <p align="center">
-  <a href="#quick-start"><strong>Quick Start</strong></a> •
-  <a href="#supported-ides"><strong>Supported IDEs</strong></a> •
-  <a href="#themes"><strong>25 Themes</strong></a> •
-  <a href="#components"><strong>AI Components</strong></a>
+  <a href="https://www.npmjs.com/package/omnidesign"><img src="https://img.shields.io/npm/v/omnidesign?style=flat-square&color=blue" alt="npm"></a>
+  <a href="https://www.npmjs.com/package/omnidesign"><img src="https://img.shields.io/npm/dw/omnidesign?style=flat-square&color=green" alt="downloads"></a>
+  <a href="https://bun.sh"><img src="https://img.shields.io/badge/bun-runtime-fbf0df?logo=bun" alt="Bun"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/omnidesign?style=flat-square" alt="license"></a>
 </p>
 
 ---
 
-## ✨ What is OmniDesign?
+## ✨ What's New in v1.1.0
 
-**OmniDesign** is a comprehensive design system that works across **all major AI coding assistants**. One package, universal compatibility.
-
-### 🎯 One Command Install
-
-```bash
-npx omnidesign
-```
-
-That's it! OmniDesign auto-detects your IDE and installs the appropriate skill.
+🎨 **Tailwind CSS Integration** - Full token-to-utility mapping with ready-to-use config  
+🌈 **Extended Color Palette** - 16 color families × 11 shades = 176 colors  
+🔤 **39 Nerd Fonts** - Complete catalog with CDN links and install commands  
+📦 **Component Recipes** - Copy-paste Tailwind snippets for buttons, cards, inputs, alerts  
+🤖 **AI-Ready** - Agents can now generate production-ready Tailwind code instantly
 
 ---
 
 ## 🚀 Quick Start
 
-### Option 1: Auto-Install (Recommended)
+### Option 1: Install for Your IDE (Recommended)
 
 ```bash
-# In your project directory
 npx omnidesign
-
-# Or install globally
-npx omnidesign --global
 ```
 
-### Option 2: Manual Install
+Auto-detects and installs globally. That's it.
 
+**Manual install:**
 ```bash
-# Install for specific IDE
-npx omnidesign install --ide claude
-npx omnidesign install --ide cursor
-npx omnidesign install --ide opencode
-npx omnidesign install --ide vscode
-npx omnidesign install --ide aider
-npx omnidesign install --ide continue
-npx omnidesign install --ide zed
-npx omnidesign install --ide amp
-npx omnidesign install --ide kilo
-npx omnidesign install --ide antigravity
+npx omnidesign install --ide claude      # Claude Code
+npx omnidesign install --ide cursor      # Cursor
+npx omnidesign install --ide opencode    # OpenCode
+npx omnidesign install --ide vscode      # VS Code
+npx omnidesign install --ide zed         # Zed
 ```
 
-### Option 3: NPM Install
+### Option 2: Use in Your Project
 
 ```bash
-# Install as dependency
 npm install omnidesign
-
-# Or use without installing
-npx omnidesign@latest
 ```
 
----
-
-## 💻 Supported IDEs
-
-| IDE | Status | Install Command |
-|-----|--------|-----------------|
-| **Claude Code** | ✅ Full Support | `npx omnidesign` |
-| **Cursor** | ✅ Full Support | `npx omnidesign` |
-| **OpenCode** | ✅ Full Support | `npx omnidesign` |
-| **VS Code** | ✅ Full Support | `npx omnidesign` |
-| **Aider** | ✅ Full Support | `npx omnidesign` |
-| **Continue.dev** | ✅ Full Support | `npx omnidesign` |
-| **Zed** | ✅ Full Support | `npx omnidesign` |
-| **Amp Code** | ✅ Full Support | `npx omnidesign` |
-| **Kilo Code** | ✅ Full Support | `npx omnidesign` |
-| **Antigravity** | ✅ Full Support | `npx omnidesign` |
-| **Claude Desktop** | ✅ Via MCP | Manual config |
-| **GitHub Copilot** | ⚠️ Partial | VS Code extension |
-| **JetBrains** | ⚠️ Partial | Plugin available |
-
-### How It Works
-
-OmniDesign detects your IDE by looking for:
-- `.claude/` directory → **Claude Code**
-- `.cursor/` directory → **Cursor**
-- `.opencode/` directory → **OpenCode**
-- `.vscode/` directory → **VS Code**
-- `.zed/` directory → **Zed**
-- `.amp/` directory → **Amp Code**
-- `.kilo/` directory → **Kilo Code**
-- `.antigravity/` directory → **Antigravity**
-- `.aider.conf.yml` → **Aider**
-- `.continue/` directory → **Continue.dev**
-
----
+```javascript
+// tailwind.config.js
+const omnidesignConfig = require('omnidesign/tailwind');
 
-## 🎨 25 Beautiful Themes
-
-### Professional
-<div align="center">
-
-| Theme | Vibe | Preview |
-|-------|------|---------|
-| `corporate` | Enterprise blue | <span style="color:#0052CC">●</span> |
-| `navy` | Deep navy + gold | <span style="color:#1e3a5f">●</span> |
-| `slate` | Modern gray + teal | <span style="color:#475569">●</span> |
-| `forest` | Sustainability green | <span style="color:#166534">●</span> |
-| `ruby` | Luxury burgundy | <span style="color:#9f1239">●</span> |
-| `graphite` | Minimalist mono | <span style="color:#374151">●</span> |
-
-</div>
-
-### Creative
-<div align="center">
-
-| Theme | Vibe | Preview |
-|-------|------|---------|
-| `sunset` | Warm gradients | <span style="color:#f97316">●</span> |
-| `ocean` | Deep sea blue | <span style="color:#0ea5e9">●</span> |
-| `berry` | Raspberry pink | <span style="color:#db2777">●</span> |
-| `mint` | Fresh pastel | <span style="color:#22c55e">●</span> |
-| `coral` | Friendly peach | <span style="color:#fb7185">●</span> |
-| `lavender` | Soft purple | <span style="color:#a855f7">●</span> |
-
-</div>
-
-### Dark Mode
-<div align="center">
-
-| Theme | Vibe | Preview |
-|-------|------|---------|
-| `midnight` | True black | <span style="color:#0f172a">●</span> |
-| `noir` | High contrast | <span style="color:#000000">●</span> |
-| `cyberpunk` | Neon synthwave | <span style="color:#d946ef">●</span> |
-| `obsidian` | Dark gray | <span style="color:#1f2937">●</span> |
-| `deep-space` | Cosmic void | <span style="color:#2e1065">●</span> |
-| `brutalist` | Stark contrast | <span style="color:#171717">●</span> |
-
-</div>
-
-### Light Mode
-<div align="center">
-
-| Theme | Vibe | Preview |
-|-------|------|---------|
-| `daylight` | Bright blue | <span style="color:#3b82f6">●</span> |
-| `paper` | Warm off-white | <span style="color:#faf7f5">●</span> |
-| `cream` | Soft cream | <span style="color:#fef3c7">●</span> |
-| `snow` | Pure white | <span style="color:#ffffff">●</span> |
-| `spring` | Mint + pink | <span style="color:#86efac">●</span> |
-| `solar` | Yellow warmth | <span style="color:#facc15">●</span> |
-
-</div>
+module.exports = {
+  ...omnidesignConfig,
+  // Your customizations
+};
+```
 
-### Using Themes
+### Option 3: Direct CSS Import
 
 ```css
-/* Apply theme */
-[data-theme="cyberpunk"] {
-  /* All tokens update automatically */
-}
-```
-
-```typescript
-// Switch themes dynamically
-document.documentElement.setAttribute('data-theme', 'sunset');
+@import 'omnidesign/tokens';
 ```
 
 ---
 
-## 🤖 AI Industry Components
-
-### 1. Chat Interface
-Full ChatGPT/Claude-style chat UI:
-- Message bubbles with markdown
-- Code syntax highlighting
-- Streaming indicators
-- Copy/regenerate actions
-
-### 2. Prompt Input
-Smart prompt component:
-- Autocomplete suggestions
-- Token counter
-- Modifier chips (--ar, --v, --style)
-
-### 3. Agent Cards
-AI model/agent displays:
-- Status indicators
-- Capability tags
-- One-click selection
-
-### 4. Thinking Indicators
-5 animation styles:
-- Bouncing dots
-- Wave bars
-- Pulse rings
-- Shimmer skeletons
-- Progress steps
-
-### 5. Code Blocks
-Syntax-highlighted code:
-- Copy to clipboard
-- Download file
-- Diff view
-- Terminal styling
-
-### 6. File Upload
-Drag-and-drop upload:
-- Image previews
-- Progress bars
-- AI context preview
+## 🎨 Tailwind Integration
 
----
+### Token to Utility Mapping
 
-## 🎯 Design Tokens
+| Design Token | Tailwind Class | Usage |
+|--------------|----------------|-------|
+| `color.text-default` | `text-text` | Primary text |
+| `color.text-muted` | `text-text-muted` | Secondary text |
+| `color.surface-raised` | `bg-surface-raised` | Card backgrounds |
+| `color.interactive-primary` | `bg-primary` | Primary buttons |
+| `color.status-success` | `text-green-600` | Success states |
 
-### 100+ Tokens Available
+### Ready-to-Use Components
 
-**Colors:**
-```css
-var(--color-text-default)      /* Primary text */
-var(--color-text-muted)        /* Secondary text */
-var(--color-surface-raised)    /* Cards */
-var(--color-interactive-primary) /* Buttons */
-var(--color-status-success)    /* Success states */
+**Primary Button**
+```tsx
+<button className="bg-primary hover:bg-primary-hover text-text-inverted px-4 py-2 rounded-md font-medium shadow-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary">
+  Click me
+</button>
 ```
 
-**Spacing:**
-```css
-var(--spacing-4)   /* 4px */
-var(--spacing-8)   /* 8px */
-var(--spacing-16)  /* 16px */
-var(--spacing-32)  /* 32px */
+**Card**
+```tsx
+<div className="bg-surface-raised rounded-lg shadow-md p-6 border border-border-subtle">
+  <h3 className="text-xl font-semibold text-text mb-2">Card Title</h3>
+  <p className="text-text-muted">Card content with semantic colors.</p>
+</div>
 ```
 
-**Typography:**
-```css
-var(--font-sans)     /* Geist Sans, Inter */
-var(--font-mono)     /* JetBrains Mono */
-var(--font-display)  /* Space Grotesk */
+**Input**
+```tsx
+<input className="bg-surface-sunken text-text border border-border rounded-md px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter text..." />
 ```
 
----
+See full documentation in [SKILL.md](skills/opencode/omnidesign-tailwind.md)
 
-## 🔤 40+ Font Families
+---
 
-### Sans-Serif
-- Geist Sans (Vercel's modern geometric)
-- Inter (Highly legible)
-- Poppins, Plus Jakarta Sans, Satoshi, Manrope, Outfit
+## 🌈 Color Palette
 
-### Serif
-- Merriweather, DM Serif Display, Lora, Source Serif 4, Literata
+### Extended Color System
 
-### Monospace
-- Geist Mono, JetBrains Mono, Fira Code, Cascadia Code, SF Mono, IBM Plex Mono
+16 color families with 11 shades each (50-950):
 
-### Nerd Fonts (Code + Icons)
-- JetBrainsMono Nerd Font
-- FiraCode Nerd Font
-- Hack Nerd Font
-- CaskaydiaCove Nerd Font
+**Neutrals:** `neutral`, `slate`, `zinc`, `stone`  
+**Warm:** `red`, `orange`, `amber`, `yellow`  
+**Nature:** `lime`, `green`, `emerald`, `teal`  
+**Cool:** `cyan`, `sky`, `blue`, `indigo`  
+**Creative:** `violet`, `purple`, `fuchsia`, `pink`, `rose`
 
-### Display
-- Space Grotesk, Clash Display, Syne, Bungee, Archivo Black
+```css
+/* Tailwind classes for all shades */
+className="bg-blue-600 text-blue-100 border-blue-200"
+className="bg-emerald-500 text-emerald-50"
+className="bg-purple-600 text-purple-100"
+```
+
+### Themes
+
+25 production-ready themes:
+
+**Professional**
+
+| Theme | Palette | Primary Use |
+|-------|---------|-------------|
+| corporate | ![corporate](assets/palettes/corporate.svg) | Enterprise, SaaS |
+| navy | ![navy](assets/palettes/navy.svg) | Professional, trustworthy |
+| slate | ![slate](assets/palettes/slate.svg) | Modern tech, clean |
+| forest | ![forest](assets/palettes/forest.svg) | Natural, eco-friendly |
+| ruby | ![ruby](assets/palettes/ruby.svg) | Bold, confident |
+| graphite | ![graphite](assets/palettes/graphite.svg) | Minimal, sophisticated |
+
+**Creative**
+
+| Theme | Palette | Primary Use |
+|-------|---------|-------------|
+| sunset | ![sunset](assets/palettes/sunset.svg) | Warm, energetic |
+| ocean | ![ocean](assets/palettes/ocean.svg) | Calm, refreshing |
+| berry | ![berry](assets/palettes/berry.svg) | Playful, vibrant |
+| mint | ![mint](assets/palettes/mint.svg) | Fresh, clean |
+| coral | ![coral](assets/palettes/coral.svg) | Friendly, warm |
+| lavender | ![lavender](assets/palettes/lavender.svg) | Soft, creative |
+
+**Dark Mode**
+
+| Theme | Palette | Primary Use |
+|-------|---------|-------------|
+| midnight | ![midnight](assets/palettes/midnight.svg) | Classic dark |
+| noir | ![noir](assets/palettes/noir.svg) | High contrast |
+| cyberpunk | ![cyberpunk](assets/palettes/cyberpunk.svg) | Neon accents |
+| obsidian | ![obsidian](assets/palettes/obsidian.svg) | Deep purple |
+| deep-space | ![deep-space](assets/palettes/deep-space.svg) | Blue-tinted |
+| brutalist | ![brutalist](assets/palettes/brutalist.svg) | Raw, stark |
+
+**Light Mode**
+
+| Theme | Palette | Primary Use |
+|-------|---------|-------------|
+| daylight | ![daylight](assets/palettes/daylight.svg) | Bright, airy |
+| paper | ![paper](assets/palettes/paper.svg) | Reading-optimized |
+| cream | ![cream](assets/palettes/cream.svg) | Warm, vintage |
+| snow | ![snow](assets/palettes/snow.svg) | Clean white |
+| spring | ![spring](assets/palettes/spring.svg) | Fresh, hopeful |
+| solar | ![solar](assets/palettes/solar.svg) | Energy, brightness |
+
+**Specialty**
+
+| Theme | Palette | Primary Use |
+|-------|---------|-------------|
+| starry-night | ![starry-night](assets/palettes/starry-night.svg) | Artistic, dreamy |
 
 ---
 
-## 📦 Installation Methods
-
-### Method 1: npx (Recommended)
+## 🔤 Nerd Fonts Collection
 
-```bash
-# Auto-detect and install
-npx omnidesign
+39 patched fonts with coding ligatures and thousands of glyphs:
 
-# Install for specific IDE
-npx omnidesign install --ide cursor
+### Top Programming Fonts
 
-# Install globally
-npx omnidesign install --global
-```
+| Font | Google Fonts | Install |
+|------|--------------|---------|
+| **JetBrainsMono Nerd** | ✅ Yes | `brew install font-jetbrains-mono-nerd-font` |
+| **FiraCode Nerd** | ✅ Yes | `brew install font-fira-code-nerd-font` |
+| **Hack Nerd** | ❌ Download | `brew install font-hack-nerd-font` |
+| **CaskaydiaCove** | ❌ Download | `brew install font-caskaydia-cove-nerd-font` |
+| **Geist Mono** | ❌ NPM | `npm install geist` |
 
-### Method 2: npm
+### Quick Import
 
-```bash
-# Install as dev dependency
-npm install --save-dev omnidesign
-
-# Or install globally
-npm install -g omnidesign
-
-# Then run
-omnidesign install
+```css
+/* Google Fonts (recommended for web) */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
 ```
 
-### Method 3: bun
+```tsx
+// Next.js
+import { JetBrains_Mono } from 'next/font/google';
 
-```bash
-bunx omnidesign
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+});
 ```
 
----
-
-## 🛠️ CLI Commands
-
-```bash
-# Install skill for detected IDE
-npx omnidesign install
-
-# Install for specific IDE
-npx omnidesign install --ide <ide>
-
-# List supported IDEs and status
-npx omnidesign list
+### Categories
 
-# Uninstall skill
-npx omnidesign uninstall --ide <ide>
+- **Programming:** JetBrainsMono, FiraCode, CaskaydiaCove, ZedMono, CommitMono
+- **Terminal:** IosevkaTerm, MesloLG, Terminus
+- **Dense:** Iosevka (narrow, information-dense)
+- **Creative:** VictorMono (cursive italics), FantasqueSansMono (handwritten)
+- **Accessible:** Atkinson Hyperlegible, OpenDyslexic
+- **Retro:** 3270, BigBlueTerminal
 
-# Show help
-npx omnidesign --help
-```
+See full catalog: `tokens/typography/nerd-fonts-complete.json`
 
 ---
 
-## 📁 Project Structure
+## 📦 Package Structure
 
 ```
 omnidesign/
-├── 🎨 logo.jpg                 # Brand identity
-├── 📖 README.md                # This file
-├── 📦 package.json             # NPM manifest
-├── 🔧 bin/                     # CLI tools
-│   ├── cli.js                 # Main CLI
-│   ├── install.js             # Install script
-│   └── detect-ide.js          # IDE detection
-├── 🎨 tokens/                  # Design tokens
-│   ├── primitives/            # Base values
-│   ├── semantic/              # Contextual tokens
-│   ├── themes/                # 25 theme files
-│   └── typography/            # Font collection
-├── 🧩 components/              # React/Vue components
-│   ├── core/                  # Button, Card, Input
-│   ├── ai/                    # Chat, Prompt, AgentCard
-│   └── layout/                # Grid, Stack
-├── 📚 recipes/                 # Implementation guides
-│   └── components/            # Component patterns
-├── 🎯 skills/                  # IDE-specific skills
-│   ├── claude/                # Claude Code skill
-│   ├── cursor/                # Cursor skill
-│   ├── opencode/              # OpenCode skill
-│   ├── vscode/                # VS Code extension
-│   ├── aider/                 # Aider conventions
-│   ├── continue/              # Continue.dev config
-│   ├── zed/                   # Zed config
-│   ├── amp/                   # Amp Code skill
-│   ├── kilo/                  # Kilo Code skill
-│   └── antigravity/           # Antigravity skill
-└── 📦 packages/                # Built outputs
-    ├── tokens-css/
-    ├── tokens-ts/
-    └── react/
+├── tokens/
+│   ├── primitives/
+│   │   ├── colors-extended.json      # 16 color families
+│   │   └── ...
+│   ├── themes/                       # 25 themes
+│   └── typography/
+│       └── nerd-fonts-complete.json  # 39 fonts
+├── packages/
+│   ├── tokens-tailwind/              # Tailwind integration
+│   │   ├── dist/
+│   │   │   ├── tailwind.config.js    # Ready-to-use config
+│   │   │   ├── utility-mapping.json  # Token → class mapping
+│   │   │   └── tokens.css            # CSS variables
+│   │   └── package.json
+│   ├── tokens-css/
+│   └── tokens-ts/
+├── skills/
+│   └── opencode/
+│       └── omnidesign-tailwind.md    # AI skill documentation
+└── README.md
 ```
 
 ---
 
-## 🔗 IDE-Specific Instructions
-
-### Claude Code
-
-```bash
-npx omnidesign
-```
-
-Creates:
-- `.claude/skills/omnidesign.md`
-- `.claude/marketplace.json`
-
-Use: Type `/omnidesign` or ask "Use OmniDesign theme cyberpunk"
-
-### Cursor
-
-```bash
-npx omnidesign
-```
-
-Creates:
-- `.cursor/skills/omnidesign.md`
-
-Use: OmniDesign prompts appear in AI chat
-
-### OpenCode
+## 🛠️ CLI Commands
 
 ```bash
+# Auto-detect and install
 npx omnidesign
-```
-
-Creates:
-- `.opencode/skills/omnidesign.md`
-- Updates `.opencode/config.json`
 
-Use: Skill loads automatically
-
-### VS Code
+# List available IDEs
+npx omnidesign list
 
-```bash
-npx omnidesign
-```
+# Install for specific IDE
+npx omnidesign install --ide claude --global
 
-Creates:
-- `.vscode/settings.json` with OmniDesign config
+# Uninstall
+npx omnidesign uninstall --ide claude --global
 
-Or install from VS Code Marketplace: **"OmniDesign"**
+# List themes
+npm run themes:list
 
-### Zed
+# List fonts
+npm run fonts:list
 
-```bash
-npx omnidesign
+# List colors
+npm run colors:list
 ```
 
-Creates:
-- `.zed/omnidesign.json`
-
-Add to Zed settings to enable the assistant.
-
-### Amp Code
-
-```bash
-npx omnidesign
-```
+---
 
-Creates:
-- `.amp/omnidesign.md`
+## 🔧 Advanced Usage
 
-Amp Code will load the skill automatically.
+### Custom Tailwind Config
 
-### Kilo Code
+```javascript
+// tailwind.config.js
+const omnidesign = require('omnidesign/tailwind');
 
-```bash
-npx omnidesign
+module.exports = {
+  ...omnidesign,
+  theme: {
+    ...omnidesign.theme,
+    extend: {
+      ...omnidesign.theme.extend,
+      colors: {
+        ...omnidesign.theme.extend.colors,
+        brand: {
+          // Your custom brand colors
+          DEFAULT: '#FF6B6B',
+          dark: '#EE5A5A',
+        }
+      }
+    }
+  }
+};
 ```
 
-Creates:
-- `.kilo/omnidesign.md`
-
-Kilo Code will use the skill for design guidance.
+### Programmatic Access
 
-### Antigravity
+```javascript
+import colors from 'omnidesign/colors';
+import fonts from 'omnidesign/fonts';
+import mapping from 'omnidesign/tailwind-mapping';
 
-```bash
-npx omnidesign
-```
+// Get all blue shades
+const blueShades = colors.families.blue.shades;
 
-Creates:
-- `.antigravity/skills/omnidesign.md`
+// Get JetBrainsMono font info
+const jetbrains = fonts.fonts['jetbrains-mono-nerd'];
 
-Antigravity will apply the design system conventions.
-
-### Aider
-
-```bash
-npx omnidesign
+// Get Tailwind class for token
+const buttonClass = mapping.colors['interactive-primary'].tailwindUtility;
+// → "bg-primary hover:bg-primary-hover..."
 ```
 
-Creates:
-- `CONVENTIONS.md` with design guidelines
+---
 
-Use: Aider reads conventions automatically
+## 🤖 For AI Assistants
 
-### Continue.dev
+### Prompt Examples
 
-```bash
-npx omnidesign
+**Apply a theme:**
 ```
-
-Creates:
-- `.continue/omnidesign.yaml`
-
-Add to `.continue/config.yaml`:
-```yaml
-context:
-  - provider: file
-    params:
-      file: .continue/omnidesign.yaml
+"Use the cyberpunk theme for this component"
+→ AI applies cyberpunk color tokens
 ```
 
----
-
-## 🎓 Usage Examples
-
-### Apply a Theme
-
+**Create components:**
 ```
-User: "Use the cyberpunk theme"
-AI: [Applies cyberpunk color tokens automatically]
+"Create a login form with Tailwind"
+→ AI uses semantic tokens:
+   - bg-surface-raised for card
+   - bg-primary for submit button
+   - text-text-muted for helper text
 ```
 
-### Create a Component
-
+**Font selection:**
 ```
-User: "Create a button component"
-AI: [Generates button using --color-interactive-primary, --spacing-md, etc.]
+"Use JetBrains Mono for code blocks"
+→ AI applies font-mono with JetBrains Mono stack
 ```
 
-### Build AI Chat UI
+### Token Reference
 
-```
-User: "Build a chat interface"
-AI: [Uses AI Chat component patterns with streaming indicators]
-```
+**Colors:**
+- Semantic: `text-text`, `bg-surface-raised`, `border-border`
+- Primitive: `bg-blue-600`, `text-red-500`, `border-slate-200`
 
----
+**Spacing:**
+- `p-4` (16px), `gap-2` (8px), `m-6` (24px)
 
-## 📚 Documentation
+**Typography:**
+- `font-sans`, `font-mono`, `font-display`
 
-- **Full Docs**: https://omnidesign.dev
-- **Quick Reference**: [QUICKREF.md](./QUICKREF.md)
-- **Getting Started**: [GETTING_STARTED.md](./GETTING_STARTED.md)
-- **Contributing**: [CONTRIBUTING.md](./CONTRIBUTING.md)
+**Shadows:**
+- `shadow-md` (card), `shadow-lg` (dropdown), `shadow-xl` (modal)
 
 ---
 
-## 🤝 Contributing
+## 📝 Documentation
 
-We welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for:
-
-- Adding new themes
-- Creating component recipes
-- IDE integrations
-- Documentation improvements
+- [Tailwind Integration Guide](skills/opencode/omnidesign-tailwind.md)
+- [Improvement Specification](docs/OMNIDESIGN_IMPROVEMENT_SPEC.md)
+- [API Documentation](AGENTS.md)
+- [Quick Reference](QUICKREF.md)
 
 ---
 
-## 📄 License
-
-MIT License - see [LICENSE](./LICENSE)
+## 🔗 Supported IDEs
+
+| IDE | Install Command | Config Location |
+|-----|-----------------|-----------------|
+| Claude Code | `npx omnidesign` | `~/.claude/skills/omnidesign/` |
+| Cursor | `npx omnidesign` | `~/.cursor/skills/omnidesign/` |
+| OpenCode | `npx omnidesign` | `~/.config/opencode/skills/omnidesign/` |
+| VS Code | `npx omnidesign` | `~/.vscode/settings.json` |
+| Zed | `npx omnidesign` | `~/.zed/omnidesign/` |
+| Amp Code | `npx omnidesign` | `~/.config/agents/skills/omnidesign/` |
+| Kilo Code | `npx omnidesign` | `~/.kilocode/skills/omnidesign/` |
+| Antigravity | `npx omnidesign` | `~/.gemini/antigravity/skills/omnidesign/` |
+| Aider | `npx omnidesign` | `./CONVENTIONS.md` |
+| Continue.dev | `npx omnidesign` | `~/.continue/omnidesign/` |
 
 ---
 
-## 🙏 Acknowledgments
+## 📄 License
 
-- Design tokens following [DTCG specification](https://design-tokens.github.io/)
-- Font collection from Google Fonts and Nerd Fonts
-- AI components inspired by ChatGPT, Claude, and Midjourney
-- Universal skill pattern inspired by Vercel Skills
+MIT © [codewithkenzo](https://github.com/codewithkenzo)
 
 ---
 
 <p align="center">
-  <strong>Built with 💙 for the AI coding community</strong>
+  <a href="https://x.com/codewithkenzo">X @codewithkenzo</a> •
+  <a href="https://discord.gg/omnidesign">Discord</a> •
+  <a href="https://omnidesign.dev">Website</a>
 </p>
 
 <p align="center">
-  <a href="https://twitter.com/omnidesign">Twitter</a> •
-  <a href="https://discord.gg/omnidesign">Discord</a> •
-  <a href="https://omnidesign.dev">Website</a>
+  <sub>Built with ❤️ for AI assistants everywhere</sub>
 </p>