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.
- package/AGENTS.md +383 -0
- package/README.md +307 -98
- package/bin/cli.js +87 -46
- package/bin/detect-ide.js +57 -29
- package/package.json +22 -7
- package/packages/tokens-css/dist/tokens.css +162 -0
- package/packages/tokens-tailwind/dist/index.js +315 -0
- package/packages/tokens-tailwind/dist/tailwind.config.js +339 -0
- package/packages/tokens-tailwind/dist/tailwind.config.json +339 -0
- package/packages/tokens-tailwind/dist/tokens.css +313 -0
- package/packages/tokens-tailwind/dist/utility-mapping.json +145 -0
- package/packages/tokens-tailwind/package.json +47 -0
- package/packages/tokens-tailwind/scripts/build-tailwind.js +285 -0
- package/packages/tokens-ts/dist/tokens.ts +1307 -0
- package/skills/opencode/omnidesign-tailwind.md +450 -0
- package/tokens/primitives/colors-extended.json +455 -0
- package/tokens/typography/nerd-fonts-catalog.json +511 -0
- package/tokens/typography/nerd-fonts-complete.json +1858 -0
package/AGENTS.md
ADDED
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
# AGENTS.md
|
|
2
|
+
|
|
3
|
+
Guidance for AI coding agents working with the OmniDesign repository.
|
|
4
|
+
|
|
5
|
+
## Repository Overview
|
|
6
|
+
|
|
7
|
+
**OmniDesign** is a universal design skills system for AI coding assistants. It provides:
|
|
8
|
+
- 25 curated themes with complete design tokens
|
|
9
|
+
- 100+ design tokens (colors, spacing, typography, shadows)
|
|
10
|
+
- AI industry component recipes (chat, prompts, agents, forms)
|
|
11
|
+
- 40+ font families including Nerd Fonts
|
|
12
|
+
- Universal installer supporting 10+ IDEs
|
|
13
|
+
|
|
14
|
+
## Architecture
|
|
15
|
+
|
|
16
|
+
### Directory Structure
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
omnidesign/
|
|
20
|
+
├── README.md # Public-facing documentation
|
|
21
|
+
├── package.json # NPM manifest with CLI
|
|
22
|
+
├── AGENTS.md # This file - agent guidance
|
|
23
|
+
├── bin/ # CLI tools
|
|
24
|
+
│ ├── cli.js # Main installer CLI
|
|
25
|
+
│ ├── detect-ide.js # IDE detection
|
|
26
|
+
│ └── install.js # Install script
|
|
27
|
+
├── tokens/ # Design tokens (DTCG format)
|
|
28
|
+
│ ├── themes/ # 25 theme files
|
|
29
|
+
│ ├── primitives/ # Base values
|
|
30
|
+
│ ├── semantic/ # Contextual tokens
|
|
31
|
+
│ └── typography/ # Font collections
|
|
32
|
+
├── recipes/ # Component patterns
|
|
33
|
+
│ ├── components/ # AI chat, prompts, forms
|
|
34
|
+
│ ├── motion/ # Animation patterns
|
|
35
|
+
│ └── patterns/ # Design patterns
|
|
36
|
+
├── skills/ # IDE-specific skills
|
|
37
|
+
│ ├── claude/ # Claude Code skill
|
|
38
|
+
│ ├── cursor/ # Cursor skill
|
|
39
|
+
│ ├── opencode/ # OpenCode skill
|
|
40
|
+
│ ├── vscode/ # VS Code extension
|
|
41
|
+
│ ├── aider/ # Aider conventions
|
|
42
|
+
│ ├── continue/ # Continue.dev config
|
|
43
|
+
│ ├── zed/ # Zed config
|
|
44
|
+
│ ├── amp/ # Amp Code skill
|
|
45
|
+
│ ├── kilo/ # Kilo Code skill
|
|
46
|
+
│ └── antigravity/ # Antigravity skill
|
|
47
|
+
├── scripts/ # Build/maintenance scripts
|
|
48
|
+
│ ├── build-tokens.js
|
|
49
|
+
│ ├── validate-tokens.js
|
|
50
|
+
│ └── generate-palettes.js
|
|
51
|
+
└── assets/ # Static assets
|
|
52
|
+
└── palettes/ # Theme palette images
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Agent Skills Format
|
|
56
|
+
|
|
57
|
+
This repository follows the [Agent Skills](https://agentskills.io/) open standard.
|
|
58
|
+
|
|
59
|
+
### SKILL.md Format
|
|
60
|
+
|
|
61
|
+
Each skill in `skills/{ide}/` follows this structure:
|
|
62
|
+
|
|
63
|
+
```markdown
|
|
64
|
+
---
|
|
65
|
+
name: {skill-name}
|
|
66
|
+
description: {What it does and when to use it}
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
# {Title}
|
|
70
|
+
|
|
71
|
+
## Overview
|
|
72
|
+
|
|
73
|
+
## Usage
|
|
74
|
+
|
|
75
|
+
## Design Tokens
|
|
76
|
+
|
|
77
|
+
## Themes
|
|
78
|
+
|
|
79
|
+
## Components
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Required Frontmatter Fields
|
|
83
|
+
|
|
84
|
+
- **name**: lowercase, alphanumeric + hyphens, max 64 chars
|
|
85
|
+
- **description**: max 1024 chars, describes what and when to use
|
|
86
|
+
|
|
87
|
+
### Optional Fields
|
|
88
|
+
|
|
89
|
+
- **license**: License name or file reference
|
|
90
|
+
- **compatibility**: Environment requirements
|
|
91
|
+
- **metadata**: Arbitrary key-value pairs
|
|
92
|
+
|
|
93
|
+
### Progressive Disclosure
|
|
94
|
+
|
|
95
|
+
Skills use progressive disclosure for context efficiency:
|
|
96
|
+
|
|
97
|
+
1. **Metadata** (~100 tokens): `name` and `description` loaded at startup
|
|
98
|
+
2. **Instructions** (< 5000 tokens): Full `SKILL.md` loaded when activated
|
|
99
|
+
3. **Resources**: Files loaded only when referenced
|
|
100
|
+
|
|
101
|
+
## Creating New Skills
|
|
102
|
+
|
|
103
|
+
### 1. Research Phase
|
|
104
|
+
|
|
105
|
+
Before creating a skill, research:
|
|
106
|
+
- Target IDE's skill format and location
|
|
107
|
+
- Existing skill patterns in that ecosystem
|
|
108
|
+
- User pain points this skill solves
|
|
109
|
+
- Trigger phrases users might say
|
|
110
|
+
|
|
111
|
+
### 2. Directory Structure
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
skills/{ide}/
|
|
115
|
+
├── SKILL.md # Required: skill definition
|
|
116
|
+
├── scripts/ # Optional: executable scripts
|
|
117
|
+
├── references/ # Optional: additional docs
|
|
118
|
+
└── assets/ # Optional: static resources
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### 3. SKILL.md Template
|
|
122
|
+
|
|
123
|
+
```markdown
|
|
124
|
+
---
|
|
125
|
+
name: {skill-name}
|
|
126
|
+
description: {One sentence. Include trigger phrases like "Use X theme", "Create Y component"}
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
# {Skill Title}
|
|
130
|
+
|
|
131
|
+
{Brief description}
|
|
132
|
+
|
|
133
|
+
## When to Use
|
|
134
|
+
|
|
135
|
+
{Trigger conditions}
|
|
136
|
+
|
|
137
|
+
## Capabilities
|
|
138
|
+
|
|
139
|
+
- {Capability 1}
|
|
140
|
+
- {Capability 2}
|
|
141
|
+
|
|
142
|
+
## Usage Examples
|
|
143
|
+
|
|
144
|
+
### Example 1: {Use case}
|
|
145
|
+
```
|
|
146
|
+
User: "{Example prompt}"
|
|
147
|
+
AI: [Uses skill to accomplish task]
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## Reference
|
|
151
|
+
|
|
152
|
+
- [Detailed docs](references/REFERENCE.md)
|
|
153
|
+
- [Token system](tokens/)
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 4. IDE-Specific Guidelines
|
|
157
|
+
|
|
158
|
+
**Claude Code:**
|
|
159
|
+
- Location: `~/.claude/skills/{skill-name}/`
|
|
160
|
+
- Entry: `SKILL.md` (or `omnidesign.md` for legacy)
|
|
161
|
+
- Config: `~/.claude/marketplace.json`
|
|
162
|
+
|
|
163
|
+
**Cursor:**
|
|
164
|
+
- Location: `~/.cursor/skills/{skill-name}/`
|
|
165
|
+
- Entry: `SKILL.md`
|
|
166
|
+
|
|
167
|
+
**OpenCode:**
|
|
168
|
+
- Location: `~/.config/opencode/skills/{skill-name}/`
|
|
169
|
+
- Entry: `SKILL.md`
|
|
170
|
+
- Config: `~/.config/opencode/config.json` (plugins array)
|
|
171
|
+
|
|
172
|
+
**VS Code:**
|
|
173
|
+
- Location: `~/.vscode/settings.json`
|
|
174
|
+
- Format: Settings-based configuration
|
|
175
|
+
|
|
176
|
+
**Zed:**
|
|
177
|
+
- Location: `~/.zed/{skill-name}/`
|
|
178
|
+
- Entry: Config JSON + supporting files
|
|
179
|
+
|
|
180
|
+
**Amp Code:**
|
|
181
|
+
- Location: `~/.config/agents/skills/{skill-name}/`
|
|
182
|
+
- Entry: `SKILL.md`
|
|
183
|
+
|
|
184
|
+
**Kilo Code:**
|
|
185
|
+
- Location: `~/.kilocode/skills/{skill-name}/`
|
|
186
|
+
- Entry: `SKILL.md`
|
|
187
|
+
|
|
188
|
+
**Antigravity:**
|
|
189
|
+
- Location: `~/.gemini/antigravity/skills/{skill-name}/`
|
|
190
|
+
- Entry: `SKILL.md`
|
|
191
|
+
|
|
192
|
+
**Aider:**
|
|
193
|
+
- Location: Project root
|
|
194
|
+
- Entry: `CONVENTIONS.md`
|
|
195
|
+
- Supporting: `.omnidesign/` directory
|
|
196
|
+
|
|
197
|
+
**Continue.dev:**
|
|
198
|
+
- Location: `~/.continue/{skill-name}/`
|
|
199
|
+
- Entry: YAML config + supporting files
|
|
200
|
+
|
|
201
|
+
## CLI Architecture
|
|
202
|
+
|
|
203
|
+
### Installation Flow
|
|
204
|
+
|
|
205
|
+
1. **Detect IDE**: Check for IDE directories in home folder
|
|
206
|
+
2. **Copy Skill Content**:
|
|
207
|
+
- Copy skill-specific files
|
|
208
|
+
- Copy `tokens/` directory
|
|
209
|
+
- Copy `recipes/` directory
|
|
210
|
+
3. **Update Config**: Update IDE-specific config files
|
|
211
|
+
4. **Verify**: Confirm installation success
|
|
212
|
+
|
|
213
|
+
### Path Resolution
|
|
214
|
+
|
|
215
|
+
```javascript
|
|
216
|
+
// Global installation paths
|
|
217
|
+
const paths = {
|
|
218
|
+
claude: '~/.claude/skills/omnidesign/',
|
|
219
|
+
cursor: '~/.cursor/skills/omnidesign/',
|
|
220
|
+
opencode: '~/.config/opencode/skills/omnidesign/',
|
|
221
|
+
vscode: '~/.vscode/settings.json',
|
|
222
|
+
zed: '~/.zed/omnidesign/',
|
|
223
|
+
amp: '~/.config/agents/skills/omnidesign/',
|
|
224
|
+
kilo: '~/.kilocode/skills/omnidesign/',
|
|
225
|
+
antigravity: '~/.gemini/antigravity/skills/omnidesign/',
|
|
226
|
+
aider: './CONVENTIONS.md',
|
|
227
|
+
continue: '~/.continue/omnidesign/'
|
|
228
|
+
};
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## Design Token System
|
|
232
|
+
|
|
233
|
+
### Token Structure (DTCG Format)
|
|
234
|
+
|
|
235
|
+
```json
|
|
236
|
+
{
|
|
237
|
+
"token-name": {
|
|
238
|
+
"$type": "color|dimension|shadow|fontFamily",
|
|
239
|
+
"$value": "#hex|px|...",
|
|
240
|
+
"$description": "Human-readable description"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### Token Categories
|
|
246
|
+
|
|
247
|
+
1. **Primitives**: Base values (colors, spacing, typography)
|
|
248
|
+
2. **Semantic**: Contextual tokens (text-default, surface-raised)
|
|
249
|
+
3. **Themes**: Complete theme definitions
|
|
250
|
+
4. **Typography**: Font families and scales
|
|
251
|
+
|
|
252
|
+
### Theme Format
|
|
253
|
+
|
|
254
|
+
Each theme includes:
|
|
255
|
+
- Color tokens (text, surface, border, interactive, status)
|
|
256
|
+
- Shadow tokens (card, dropdown, modal, focus)
|
|
257
|
+
- Complete palette for light/dark variants
|
|
258
|
+
|
|
259
|
+
## Component Recipes
|
|
260
|
+
|
|
261
|
+
### Recipe Structure
|
|
262
|
+
|
|
263
|
+
```markdown
|
|
264
|
+
# Component Name
|
|
265
|
+
|
|
266
|
+
## Overview
|
|
267
|
+
|
|
268
|
+
## Usage
|
|
269
|
+
|
|
270
|
+
## Design Tokens Used
|
|
271
|
+
|
|
272
|
+
## Example
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### Available Recipes
|
|
276
|
+
|
|
277
|
+
- **ai-chat**: Full chat interface with streaming
|
|
278
|
+
- **prompt-input**: Smart input with modifiers
|
|
279
|
+
- **agent-card**: Model/agent displays
|
|
280
|
+
- **thinking-indicator**: Loading states
|
|
281
|
+
- **code-block**: Syntax highlighting
|
|
282
|
+
- **file-upload**: Drag-and-drop upload
|
|
283
|
+
- **forms**: Input patterns
|
|
284
|
+
- **hero-section**: Landing page hero
|
|
285
|
+
- **navbar**: Navigation patterns
|
|
286
|
+
- **bento-grid**: Content grids
|
|
287
|
+
|
|
288
|
+
## Branding Guidelines
|
|
289
|
+
|
|
290
|
+
### Logo
|
|
291
|
+
- File: `logo.jpg`
|
|
292
|
+
- Usage: README, documentation
|
|
293
|
+
- Size: 160px width in README
|
|
294
|
+
|
|
295
|
+
### Colors
|
|
296
|
+
- Primary: `#0052CC` (corporate blue)
|
|
297
|
+
- Accent: `#00B8D9` (cyan)
|
|
298
|
+
- Dark background: `#0d1117`
|
|
299
|
+
- Light text: `#e6edf3`
|
|
300
|
+
|
|
301
|
+
### Typography
|
|
302
|
+
- Headings: System sans-serif
|
|
303
|
+
- Code: JetBrains Mono, monospace
|
|
304
|
+
|
|
305
|
+
### Badges
|
|
306
|
+
```markdown
|
|
307
|
+

|
|
308
|
+

|
|
309
|
+

|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
## Publishing
|
|
313
|
+
|
|
314
|
+
### NPM Release
|
|
315
|
+
|
|
316
|
+
```bash
|
|
317
|
+
npm version patch|minor|major
|
|
318
|
+
npm publish --access public
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### GitHub Release
|
|
322
|
+
|
|
323
|
+
1. Update version in `package.json`
|
|
324
|
+
2. Commit: `git commit -m "release: vX.Y.Z"`
|
|
325
|
+
3. Tag: `git tag vX.Y.Z`
|
|
326
|
+
4. Push: `git push && git push --tags`
|
|
327
|
+
|
|
328
|
+
## Testing
|
|
329
|
+
|
|
330
|
+
### Manual Testing Checklist
|
|
331
|
+
|
|
332
|
+
- [ ] Install works for each IDE
|
|
333
|
+
- [ ] Uninstall removes all files
|
|
334
|
+
- [ ] Tokens are accessible
|
|
335
|
+
- [ ] Recipes load correctly
|
|
336
|
+
- [ ] CLI list shows correct status
|
|
337
|
+
|
|
338
|
+
### Test Commands
|
|
339
|
+
|
|
340
|
+
```bash
|
|
341
|
+
# Test install
|
|
342
|
+
node bin/cli.js install --ide claude --global
|
|
343
|
+
|
|
344
|
+
# Test uninstall
|
|
345
|
+
node bin/cli.js uninstall --ide claude --global
|
|
346
|
+
|
|
347
|
+
# List status
|
|
348
|
+
node bin/cli.js list --global
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
## Common Tasks
|
|
352
|
+
|
|
353
|
+
### Adding a New Theme
|
|
354
|
+
|
|
355
|
+
1. Create `tokens/themes/{theme-name}.json`
|
|
356
|
+
2. Run `node scripts/generate-palettes.js`
|
|
357
|
+
3. Update README theme tables
|
|
358
|
+
4. Test theme application
|
|
359
|
+
|
|
360
|
+
### Adding a New IDE
|
|
361
|
+
|
|
362
|
+
1. Create `skills/{ide}/SKILL.md`
|
|
363
|
+
2. Add path helper in `bin/cli.js`
|
|
364
|
+
3. Add install/uninstall functions
|
|
365
|
+
4. Update README supported IDEs table
|
|
366
|
+
5. Test install/uninstall cycle
|
|
367
|
+
|
|
368
|
+
### Updating Skill Content
|
|
369
|
+
|
|
370
|
+
1. Modify files in `tokens/` or `recipes/`
|
|
371
|
+
2. Test locally
|
|
372
|
+
3. Version bump
|
|
373
|
+
4. Publish
|
|
374
|
+
|
|
375
|
+
## Resources
|
|
376
|
+
|
|
377
|
+
- [Agent Skills Spec](https://agentskills.io/specification)
|
|
378
|
+
- [DTCG Token Format](https://design-tokens.github.io/)
|
|
379
|
+
- [NPM Publishing Guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry)
|
|
380
|
+
|
|
381
|
+
## License
|
|
382
|
+
|
|
383
|
+
MIT © [codewithkenzo](https://github.com/codewithkenzo)
|