omnidesign 1.0.2 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/AGENTS.md +383 -0
  2. package/README.md +307 -98
  3. package/bin/cli.js +87 -46
  4. package/bin/detect-ide.js +57 -29
  5. package/package.json +22 -7
  6. package/packages/tokens-css/dist/tokens.css +162 -0
  7. package/packages/tokens-tailwind/dist/index.js +315 -0
  8. package/packages/tokens-tailwind/dist/tailwind.config.js +339 -0
  9. package/packages/tokens-tailwind/dist/tailwind.config.json +339 -0
  10. package/packages/tokens-tailwind/dist/tokens.css +313 -0
  11. package/packages/tokens-tailwind/dist/utility-mapping.json +145 -0
  12. package/packages/tokens-tailwind/package.json +47 -0
  13. package/packages/tokens-tailwind/scripts/build-tailwind.js +285 -0
  14. package/packages/tokens-ts/dist/tokens.ts +1307 -0
  15. package/skills/opencode/omnidesign-tailwind.md +450 -0
  16. package/tokens/primitives/colors-extended.json +455 -0
  17. package/tokens/typography/nerd-fonts-catalog.json +511 -0
  18. package/tokens/typography/nerd-fonts-complete.json +1858 -0
package/README.md CHANGED
@@ -5,24 +5,35 @@
5
5
  </p>
6
6
 
7
7
  <p align="center">
8
- <strong>Universal Design Skills System for AI Coding Assistants</strong>
8
+ <strong>Universal Design System with Tailwind CSS Integration</strong>
9
9
  </p>
10
10
 
11
11
  <p align="center">
12
- One package. 10 IDEs. 25 themes. 100+ design tokens.
12
+ One package. 10 IDEs. 25 themes. 176 colors. 39 Nerd Fonts. Tailwind-ready.
13
13
  </p>
14
14
 
15
15
  <p align="center">
16
16
  <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>
17
+ <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>
17
18
  <a href="https://bun.sh"><img src="https://img.shields.io/badge/bun-runtime-fbf0df?logo=bun" alt="Bun"></a>
18
19
  <a href="LICENSE"><img src="https://img.shields.io/npm/l/omnidesign?style=flat-square" alt="license"></a>
19
20
  </p>
20
21
 
21
22
  ---
22
23
 
23
- ## Quick Start
24
+ ## ✨ What's New in v1.1.0
24
25
 
25
- ### Install for Your IDE
26
+ 🎨 **Tailwind CSS Integration** - Full token-to-utility mapping with ready-to-use config
27
+ 🌈 **Extended Color Palette** - 16 color families × 11 shades = 176 colors
28
+ 🔤 **39 Nerd Fonts** - Complete catalog with CDN links and install commands
29
+ 📦 **Component Recipes** - Copy-paste Tailwind snippets for buttons, cards, inputs, alerts
30
+ 🤖 **AI-Ready** - Agents can now generate production-ready Tailwind code instantly
31
+
32
+ ---
33
+
34
+ ## 🚀 Quick Start
35
+
36
+ ### Option 1: Install for Your IDE (Recommended)
26
37
 
27
38
  ```bash
28
39
  npx omnidesign
@@ -37,138 +48,343 @@ npx omnidesign install --ide cursor # Cursor
37
48
  npx omnidesign install --ide opencode # OpenCode
38
49
  npx omnidesign install --ide vscode # VS Code
39
50
  npx omnidesign install --ide zed # Zed
40
- npx omnidesign install --ide amp # Amp Code
41
- npx omnidesign install --ide kilo # Kilo Code
42
- npx omnidesign install --ide antigravity # Antigravity
43
- npx omnidesign install --ide aider # Aider
44
- npx omnidesign install --ide continue # Continue.dev
45
51
  ```
46
52
 
47
- ### Install for Your Agent
53
+ ### Option 2: Use in Your Project
48
54
 
49
- Copy-paste to your AI assistant:
55
+ ```bash
56
+ npm install omnidesign
57
+ ```
50
58
 
51
- > Install OmniDesign skill: `npx omnidesign install --ide <your-ide> --global`
59
+ ```javascript
60
+ // tailwind.config.js
61
+ const omnidesignConfig = require('omnidesign/tailwind');
52
62
 
53
- Once installed, your agent has access to 25 themes, design tokens, and AI component patterns.
63
+ module.exports = {
64
+ ...omnidesignConfig,
65
+ // Your customizations
66
+ };
67
+ ```
68
+
69
+ ### Option 3: Direct CSS Import
70
+
71
+ ```css
72
+ @import 'omnidesign/tokens';
73
+ ```
54
74
 
55
75
  ---
56
76
 
57
- ## What's Included
77
+ ## 🎨 Tailwind Integration
78
+
79
+ ### Token to Utility Mapping
80
+
81
+ | Design Token | Tailwind Class | Usage |
82
+ |--------------|----------------|-------|
83
+ | `color.text-default` | `text-text` | Primary text |
84
+ | `color.text-muted` | `text-text-muted` | Secondary text |
85
+ | `color.surface-raised` | `bg-surface-raised` | Card backgrounds |
86
+ | `color.interactive-primary` | `bg-primary` | Primary buttons |
87
+ | `color.status-success` | `text-green-600` | Success states |
88
+
89
+ ### Ready-to-Use Components
90
+
91
+ **Primary Button**
92
+ ```tsx
93
+ <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">
94
+ Click me
95
+ </button>
96
+ ```
97
+
98
+ **Card**
99
+ ```tsx
100
+ <div className="bg-surface-raised rounded-lg shadow-md p-6 border border-border-subtle">
101
+ <h3 className="text-xl font-semibold text-text mb-2">Card Title</h3>
102
+ <p className="text-text-muted">Card content with semantic colors.</p>
103
+ </div>
104
+ ```
105
+
106
+ **Input**
107
+ ```tsx
108
+ <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..." />
109
+ ```
110
+
111
+ See full documentation in [SKILL.md](skills/opencode/omnidesign-tailwind.md)
112
+
113
+ ---
114
+
115
+ ## 🌈 Color Palette
116
+
117
+ ### Extended Color System
118
+
119
+ 16 color families with 11 shades each (50-950):
120
+
121
+ **Neutrals:** `neutral`, `slate`, `zinc`, `stone`
122
+ **Warm:** `red`, `orange`, `amber`, `yellow`
123
+ **Nature:** `lime`, `green`, `emerald`, `teal`
124
+ **Cool:** `cyan`, `sky`, `blue`, `indigo`
125
+ **Creative:** `violet`, `purple`, `fuchsia`, `pink`, `rose`
126
+
127
+ ```css
128
+ /* Tailwind classes for all shades */
129
+ className="bg-blue-600 text-blue-100 border-blue-200"
130
+ className="bg-emerald-500 text-emerald-50"
131
+ className="bg-purple-600 text-purple-100"
132
+ ```
133
+
134
+ ### Themes
135
+
136
+ 25 production-ready themes:
137
+
138
+ **Professional**
139
+
140
+ | Theme | Palette | Primary Use |
141
+ |-------|---------|-------------|
142
+ | corporate | ![corporate](assets/palettes/corporate.svg) | Enterprise, SaaS |
143
+ | navy | ![navy](assets/palettes/navy.svg) | Professional, trustworthy |
144
+ | slate | ![slate](assets/palettes/slate.svg) | Modern tech, clean |
145
+ | forest | ![forest](assets/palettes/forest.svg) | Natural, eco-friendly |
146
+ | ruby | ![ruby](assets/palettes/ruby.svg) | Bold, confident |
147
+ | graphite | ![graphite](assets/palettes/graphite.svg) | Minimal, sophisticated |
148
+
149
+ **Creative**
150
+
151
+ | Theme | Palette | Primary Use |
152
+ |-------|---------|-------------|
153
+ | sunset | ![sunset](assets/palettes/sunset.svg) | Warm, energetic |
154
+ | ocean | ![ocean](assets/palettes/ocean.svg) | Calm, refreshing |
155
+ | berry | ![berry](assets/palettes/berry.svg) | Playful, vibrant |
156
+ | mint | ![mint](assets/palettes/mint.svg) | Fresh, clean |
157
+ | coral | ![coral](assets/palettes/coral.svg) | Friendly, warm |
158
+ | lavender | ![lavender](assets/palettes/lavender.svg) | Soft, creative |
159
+
160
+ **Dark Mode**
161
+
162
+ | Theme | Palette | Primary Use |
163
+ |-------|---------|-------------|
164
+ | midnight | ![midnight](assets/palettes/midnight.svg) | Classic dark |
165
+ | noir | ![noir](assets/palettes/noir.svg) | High contrast |
166
+ | cyberpunk | ![cyberpunk](assets/palettes/cyberpunk.svg) | Neon accents |
167
+ | obsidian | ![obsidian](assets/palettes/obsidian.svg) | Deep purple |
168
+ | deep-space | ![deep-space](assets/palettes/deep-space.svg) | Blue-tinted |
169
+ | brutalist | ![brutalist](assets/palettes/brutalist.svg) | Raw, stark |
170
+
171
+ **Light Mode**
172
+
173
+ | Theme | Palette | Primary Use |
174
+ |-------|---------|-------------|
175
+ | daylight | ![daylight](assets/palettes/daylight.svg) | Bright, airy |
176
+ | paper | ![paper](assets/palettes/paper.svg) | Reading-optimized |
177
+ | cream | ![cream](assets/palettes/cream.svg) | Warm, vintage |
178
+ | snow | ![snow](assets/palettes/snow.svg) | Clean white |
179
+ | spring | ![spring](assets/palettes/spring.svg) | Fresh, hopeful |
180
+ | solar | ![solar](assets/palettes/solar.svg) | Energy, brightness |
181
+
182
+ **Specialty**
183
+
184
+ | Theme | Palette | Primary Use |
185
+ |-------|---------|-------------|
186
+ | starry-night | ![starry-night](assets/palettes/starry-night.svg) | Artistic, dreamy |
187
+
188
+ ---
189
+
190
+ ## 🔤 Nerd Fonts Collection
191
+
192
+ 39 patched fonts with coding ligatures and thousands of glyphs:
193
+
194
+ ### Top Programming Fonts
195
+
196
+ | Font | Google Fonts | Install |
197
+ |------|--------------|---------|
198
+ | **JetBrainsMono Nerd** | ✅ Yes | `brew install font-jetbrains-mono-nerd-font` |
199
+ | **FiraCode Nerd** | ✅ Yes | `brew install font-fira-code-nerd-font` |
200
+ | **Hack Nerd** | ❌ Download | `brew install font-hack-nerd-font` |
201
+ | **CaskaydiaCove** | ❌ Download | `brew install font-caskaydia-cove-nerd-font` |
202
+ | **Geist Mono** | ❌ NPM | `npm install geist` |
203
+
204
+ ### Quick Import
205
+
206
+ ```css
207
+ /* Google Fonts (recommended for web) */
208
+ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
209
+ ```
210
+
211
+ ```tsx
212
+ // Next.js
213
+ import { JetBrains_Mono } from 'next/font/google';
214
+
215
+ const jetbrainsMono = JetBrains_Mono({
216
+ subsets: ['latin'],
217
+ variable: '--font-mono',
218
+ });
219
+ ```
220
+
221
+ ### Categories
222
+
223
+ - **Programming:** JetBrainsMono, FiraCode, CaskaydiaCove, ZedMono, CommitMono
224
+ - **Terminal:** IosevkaTerm, MesloLG, Terminus
225
+ - **Dense:** Iosevka (narrow, information-dense)
226
+ - **Creative:** VictorMono (cursive italics), FantasqueSansMono (handwritten)
227
+ - **Accessible:** Atkinson Hyperlegible, OpenDyslexic
228
+ - **Retro:** 3270, BigBlueTerminal
229
+
230
+ See full catalog: `tokens/typography/nerd-fonts-complete.json`
231
+
232
+ ---
233
+
234
+ ## 📦 Package Structure
58
235
 
59
236
  ```
60
237
  omnidesign/
61
- ├── SKILL.md # Entry point for your AI
62
- ├── tokens/ # Design tokens
63
- │ ├── themes/ # 25 theme files
64
- │ ├── primitives/ # Base colors, spacing
65
- │ └── semantic/ # Contextual tokens
66
- └── recipes/ # Component patterns
67
- ├── components/ # AI chat, prompts, forms
68
- └── motion/ # Animation patterns
238
+ ├── tokens/
239
+ │ ├── primitives/
240
+ │ │ ├── colors-extended.json # 16 color families
241
+ │ │ └── ...
242
+ │ ├── themes/ # 25 themes
243
+ │ └── typography/
244
+ │ └── nerd-fonts-complete.json # 39 fonts
245
+ ├── packages/
246
+ │ ├── tokens-tailwind/ # Tailwind integration
247
+ │ │ ├── dist/
248
+ │ │ │ ├── tailwind.config.js # Ready-to-use config
249
+ │ │ │ ├── utility-mapping.json # Token → class mapping
250
+ │ │ │ └── tokens.css # CSS variables
251
+ │ │ └── package.json
252
+ │ ├── tokens-css/
253
+ │ └── tokens-ts/
254
+ ├── skills/
255
+ │ └── opencode/
256
+ │ └── omnidesign-tailwind.md # AI skill documentation
257
+ └── README.md
69
258
  ```
70
259
 
71
260
  ---
72
261
 
73
- ## Themes
262
+ ## 🛠️ CLI Commands
263
+
264
+ ```bash
265
+ # Auto-detect and install
266
+ npx omnidesign
267
+
268
+ # List available IDEs
269
+ npx omnidesign list
74
270
 
75
- 25 production-ready themes. Each includes complete color tokens (primary, surface, text, borders, status), shadows, and interactive states. Preview shows primary accent, background surface, and text colors.
271
+ # Install for specific IDE
272
+ npx omnidesign install --ide claude --global
76
273
 
77
- ### Professional
274
+ # Uninstall
275
+ npx omnidesign uninstall --ide claude --global
78
276
 
79
- | Theme | Palette |
80
- |-------|---------|
81
- | corporate | ![corporate](assets/palettes/corporate.svg) |
82
- | navy | ![navy](assets/palettes/navy.svg) |
83
- | slate | ![slate](assets/palettes/slate.svg) |
84
- | forest | ![forest](assets/palettes/forest.svg) |
85
- | ruby | ![ruby](assets/palettes/ruby.svg) |
86
- | graphite | ![graphite](assets/palettes/graphite.svg) |
277
+ # List themes
278
+ npm run themes:list
87
279
 
88
- ### Creative
280
+ # List fonts
281
+ npm run fonts:list
89
282
 
90
- | Theme | Palette |
91
- |-------|---------|
92
- | sunset | ![sunset](assets/palettes/sunset.svg) |
93
- | ocean | ![ocean](assets/palettes/ocean.svg) |
94
- | berry | ![berry](assets/palettes/berry.svg) |
95
- | mint | ![mint](assets/palettes/mint.svg) |
96
- | coral | ![coral](assets/palettes/coral.svg) |
97
- | lavender | ![lavender](assets/palettes/lavender.svg) |
283
+ # List colors
284
+ npm run colors:list
285
+ ```
98
286
 
99
- ### Dark Mode
287
+ ---
100
288
 
101
- | Theme | Palette |
102
- |-------|---------|
103
- | midnight | ![midnight](assets/palettes/midnight.svg) |
104
- | noir | ![noir](assets/palettes/noir.svg) |
105
- | cyberpunk | ![cyberpunk](assets/palettes/cyberpunk.svg) |
106
- | obsidian | ![obsidian](assets/palettes/obsidian.svg) |
107
- | deep-space | ![deep-space](assets/palettes/deep-space.svg) |
108
- | brutalist | ![brutalist](assets/palettes/brutalist.svg) |
289
+ ## 🔧 Advanced Usage
290
+
291
+ ### Custom Tailwind Config
292
+
293
+ ```javascript
294
+ // tailwind.config.js
295
+ const omnidesign = require('omnidesign/tailwind');
296
+
297
+ module.exports = {
298
+ ...omnidesign,
299
+ theme: {
300
+ ...omnidesign.theme,
301
+ extend: {
302
+ ...omnidesign.theme.extend,
303
+ colors: {
304
+ ...omnidesign.theme.extend.colors,
305
+ brand: {
306
+ // Your custom brand colors
307
+ DEFAULT: '#FF6B6B',
308
+ dark: '#EE5A5A',
309
+ }
310
+ }
311
+ }
312
+ }
313
+ };
314
+ ```
109
315
 
110
- ### Light Mode
316
+ ### Programmatic Access
111
317
 
112
- | Theme | Palette |
113
- |-------|---------|
114
- | daylight | ![daylight](assets/palettes/daylight.svg) |
115
- | paper | ![paper](assets/palettes/paper.svg) |
116
- | cream | ![cream](assets/palettes/cream.svg) |
117
- | snow | ![snow](assets/palettes/snow.svg) |
118
- | spring | ![spring](assets/palettes/spring.svg) |
119
- | solar | ![solar](assets/palettes/solar.svg) |
318
+ ```javascript
319
+ import colors from 'omnidesign/colors';
320
+ import fonts from 'omnidesign/fonts';
321
+ import mapping from 'omnidesign/tailwind-mapping';
120
322
 
121
- ### Specialty
323
+ // Get all blue shades
324
+ const blueShades = colors.families.blue.shades;
122
325
 
123
- | Theme | Palette |
124
- |-------|---------|
125
- | starry-night | ![starry-night](assets/palettes/starry-night.svg) |
326
+ // Get JetBrainsMono font info
327
+ const jetbrains = fonts.fonts['jetbrains-mono-nerd'];
126
328
 
127
- **Usage:** `"Use the cyberpunk theme"` or `"Apply ocean theme"`
329
+ // Get Tailwind class for token
330
+ const buttonClass = mapping.colors['interactive-primary'].tailwindUtility;
331
+ // → "bg-primary hover:bg-primary-hover..."
332
+ ```
128
333
 
129
334
  ---
130
335
 
131
- ## Usage
336
+ ## 🤖 For AI Assistants
132
337
 
133
- ### Apply a Theme
338
+ ### Prompt Examples
134
339
 
340
+ **Apply a theme:**
135
341
  ```
136
- User: "Use the cyberpunk theme"
137
- AI: [Applies cyberpunk color tokens to components]
342
+ "Use the cyberpunk theme for this component"
343
+ → AI applies cyberpunk color tokens
138
344
  ```
139
345
 
140
- ### Create Components
346
+ **Create components:**
347
+ ```
348
+ "Create a login form with Tailwind"
349
+ → AI uses semantic tokens:
350
+ - bg-surface-raised for card
351
+ - bg-primary for submit button
352
+ - text-text-muted for helper text
353
+ ```
141
354
 
355
+ **Font selection:**
142
356
  ```
143
- User: "Create a login form"
144
- AI: [Generates form using --color-interactive-primary, --spacing-md, --shadow-card]
357
+ "Use JetBrains Mono for code blocks"
358
+ → AI applies font-mono with JetBrains Mono stack
145
359
  ```
146
360
 
147
- ### Access Design Tokens
361
+ ### Token Reference
148
362
 
149
363
  **Colors:**
150
- - `color.text.default` — Primary text
151
- - `color.surface.raised` — Cards, elevated surfaces
152
- - `color.interactive.primary` — Buttons, links
153
- - `color.status.success/error/warning` — Status states
364
+ - Semantic: `text-text`, `bg-surface-raised`, `border-border`
365
+ - Primitive: `bg-blue-600`, `text-red-500`, `border-slate-200`
154
366
 
155
367
  **Spacing:**
156
- - `spacing.4` (4px), `spacing.8` (8px), `spacing.16` (16px)
157
- - `spacing.24` (24px), `spacing.32` (32px), `spacing.48` (48px)
368
+ - `p-4` (16px), `gap-2` (8px), `m-6` (24px)
158
369
 
159
370
  **Typography:**
160
- - `font.sans` — Geist Sans, Inter
161
- - `font.mono` — JetBrains Mono, Geist Mono
162
- - `font.display` — Space Grotesk
371
+ - `font-sans`, `font-mono`, `font-display`
163
372
 
164
373
  **Shadows:**
165
- - `shadow.card` — Cards, buttons
166
- - `shadow.dropdown` — Dropdowns, popovers
167
- - `shadow.modal` — Modals, dialogs
374
+ - `shadow-md` (card), `shadow-lg` (dropdown), `shadow-xl` (modal)
375
+
376
+ ---
377
+
378
+ ## 📝 Documentation
379
+
380
+ - [Tailwind Integration Guide](skills/opencode/omnidesign-tailwind.md)
381
+ - [Improvement Specification](docs/OMNIDESIGN_IMPROVEMENT_SPEC.md)
382
+ - [API Documentation](AGENTS.md)
383
+ - [Quick Reference](QUICKREF.md)
168
384
 
169
385
  ---
170
386
 
171
- ## Supported IDEs
387
+ ## 🔗 Supported IDEs
172
388
 
173
389
  | IDE | Install Command | Config Location |
174
390
  |-----|-----------------|-----------------|
@@ -185,18 +401,7 @@ AI: [Generates form using --color-interactive-primary, --spacing-md, --shadow-ca
185
401
 
186
402
  ---
187
403
 
188
- ## CLI Commands
189
-
190
- ```bash
191
- npx omnidesign # Auto-detect and install
192
- npx omnidesign list # List installed IDEs
193
- npx omnidesign install --ide <ide> --global # Install globally
194
- npx omnidesign uninstall --ide <ide> --global # Uninstall
195
- ```
196
-
197
- ---
198
-
199
- ## License
404
+ ## 📄 License
200
405
 
201
406
  MIT © [codewithkenzo](https://github.com/codewithkenzo)
202
407
 
@@ -207,3 +412,7 @@ MIT © [codewithkenzo](https://github.com/codewithkenzo)
207
412
  <a href="https://discord.gg/omnidesign">Discord</a> •
208
413
  <a href="https://omnidesign.dev">Website</a>
209
414
  </p>
415
+
416
+ <p align="center">
417
+ <sub>Built with ❤️ for AI assistants everywhere</sub>
418
+ </p>