opencodekit 0.3.3 → 0.5.0
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/dist/index.js +10 -1
- package/dist/template/.opencode/AGENTS.md +78 -55
- package/dist/template/.opencode/agent/build.md +20 -0
- package/dist/template/.opencode/agent/rush.md +27 -15
- package/dist/template/.opencode/agent/vision.md +95 -60
- package/dist/template/.opencode/command/accessibility-check.md +66 -0
- package/dist/template/.opencode/command/analyze-mockup.md +43 -0
- package/dist/template/.opencode/command/design-audit.md +53 -0
- package/dist/template/.opencode/command/edit-image.md +40 -0
- package/dist/template/.opencode/command/generate-diagram.md +48 -0
- package/dist/template/.opencode/command/generate-icon.md +40 -0
- package/dist/template/.opencode/command/generate-image.md +27 -0
- package/dist/template/.opencode/command/generate-pattern.md +41 -0
- package/dist/template/.opencode/command/generate-storyboard.md +41 -0
- package/dist/template/.opencode/command/init.md +176 -0
- package/dist/template/.opencode/command/new-feature.md +137 -0
- package/dist/template/.opencode/command/research-ui.md +34 -27
- package/dist/template/.opencode/command/restore-image.md +39 -0
- package/dist/template/.opencode/command/revert-feature.md +127 -0
- package/dist/template/.opencode/command/ui-review.md +26 -34
- package/dist/template/.opencode/memory/project/README.md +59 -0
- package/dist/template/.opencode/memory/project/architecture.md +26 -0
- package/dist/template/.opencode/memory/project/commands.md +26 -0
- package/dist/template/.opencode/memory/project/conventions.md +26 -0
- package/dist/template/.opencode/memory/project/gotchas.md +26 -0
- package/dist/template/.opencode/memory/user.example.md +21 -0
- package/dist/template/.opencode/memory/user.md +21 -0
- package/dist/template/.opencode/opencode.json +475 -457
- package/dist/template/.opencode/package.json +1 -2
- package/dist/template/.opencode/skills/accessibility-audit/SKILL.md +180 -0
- package/dist/template/.opencode/skills/design-system-audit/SKILL.md +141 -0
- package/dist/template/.opencode/skills/frontend-aesthetics/SKILL.md +40 -65
- package/dist/template/.opencode/skills/mockup-to-code/SKILL.md +158 -0
- package/dist/template/.opencode/skills/ui-ux-research/SKILL.md +60 -131
- package/dist/template/.opencode/skills/visual-analysis/SKILL.md +130 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -750,7 +750,7 @@ var cac = (name = "") => new CAC(name);
|
|
|
750
750
|
// package.json
|
|
751
751
|
var package_default = {
|
|
752
752
|
name: "opencodekit",
|
|
753
|
-
version: "0.
|
|
753
|
+
version: "0.5.0",
|
|
754
754
|
description: "CLI tool for bootstrapping and managing OpenCodeKit projects",
|
|
755
755
|
type: "module",
|
|
756
756
|
repository: {
|
|
@@ -2605,6 +2605,15 @@ async function editMCP(configPath) {
|
|
|
2605
2605
|
await addMCPServer(configPath, config);
|
|
2606
2606
|
return;
|
|
2607
2607
|
}
|
|
2608
|
+
console.log();
|
|
2609
|
+
console.log(import_picocolors7.default.bold(" MCP Servers"));
|
|
2610
|
+
for (const [name, server] of Object.entries(config.mcp)) {
|
|
2611
|
+
const status = server.enabled === false ? import_picocolors7.default.red("off") : import_picocolors7.default.green("on");
|
|
2612
|
+
const type = server.type === "remote" ? import_picocolors7.default.dim("remote") : import_picocolors7.default.dim("local");
|
|
2613
|
+
const endpoint = server.type === "remote" ? import_picocolors7.default.dim(` → ${server.url}`) : import_picocolors7.default.dim(` → ${(server.command || []).join(" ")}`);
|
|
2614
|
+
console.log(` ${status} ${name} ${type}${endpoint}`);
|
|
2615
|
+
}
|
|
2616
|
+
console.log();
|
|
2608
2617
|
const action = await ie({
|
|
2609
2618
|
message: "MCP Servers",
|
|
2610
2619
|
options: [
|
|
@@ -15,22 +15,38 @@
|
|
|
15
15
|
|
|
16
16
|
**Check before any tool call. Delegate if task involves search or research.**
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
| Architecture | @planner | design, architect, plan, structure, phases |
|
|
24
|
-
| UI/UX design | @vision | mockup, UI review, accessibility, aesthetics, visual |
|
|
18
|
+
- **@explore** - Code search: find, where is, search, how does X work, locate
|
|
19
|
+
- **@scout** - External research: research, compare, docs for, API for, best practices
|
|
20
|
+
- **@review** - Code review/debug: review, audit, debug, why broken, root cause
|
|
21
|
+
- **@planner** - Architecture: design, architect, plan, structure, phases
|
|
22
|
+
- **@vision** - UI/UX design: mockup, UI review, accessibility, aesthetics, visual
|
|
25
23
|
|
|
26
24
|
**Execute directly**: Single-file edits, explicit commands, answering from loaded context.
|
|
27
25
|
|
|
26
|
+
### Research Depth Levels
|
|
27
|
+
|
|
28
|
+
Specify depth when delegating to control tool call budget:
|
|
29
|
+
|
|
30
|
+
- **quick** (~5-10 calls) - Simple lookup, single answer, API syntax
|
|
31
|
+
- **medium** (~20-50 calls) - Moderate exploration, verify across files
|
|
32
|
+
- **thorough** (~100+ calls) - Comprehensive analysis, dependency mapping
|
|
33
|
+
|
|
34
|
+
**Examples**:
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
@explore (quick): Where is the auth middleware?
|
|
38
|
+
@explore (thorough): How does the entire auth system work?
|
|
39
|
+
@scout (quick): Syntax for React useEffect cleanup
|
|
40
|
+
@scout (thorough): How do production apps handle auth refresh tokens?
|
|
41
|
+
```
|
|
42
|
+
|
|
28
43
|
## Anti-Hallucination
|
|
29
44
|
|
|
30
45
|
- **Major features**: Check task exists (`bd show <id>`)
|
|
31
46
|
- **Bug fixes/edits**: Proceed directly; document clearly
|
|
32
47
|
- **Before commit**: Close task with reason (`bd close <id> --reason "..."`)
|
|
33
48
|
- **Find work**: Use `bd ready` for unblocked tasks
|
|
49
|
+
- **URLs**: Never generate or guess URLs. Only use URLs from user input, tool results, or verified documentation.
|
|
34
50
|
|
|
35
51
|
## Universal Standards
|
|
36
52
|
|
|
@@ -65,14 +81,10 @@
|
|
|
65
81
|
|
|
66
82
|
**GKG tools → AST tools → Built-in tools**
|
|
67
83
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
| 1 | `gkg_repo_map` | API-level overview |
|
|
73
|
-
| 2 | `ast-grep` | Semantic code search/replace (AST) |
|
|
74
|
-
| 3 | `grep`, `glob` | Pattern matching, file discovery |
|
|
75
|
-
| 3 | `read`, `edit`, `write` | File operations |
|
|
84
|
+
1. `gkg_search_codebase_definitions`, `gkg_get_references`, `gkg_repo_map` - Find symbols, usages, API overview
|
|
85
|
+
2. `ast-grep` - Semantic code search/replace (AST-based)
|
|
86
|
+
3. `grep`, `glob` - Pattern matching, file discovery
|
|
87
|
+
4. `read`, `edit`, `write` - File operations
|
|
76
88
|
|
|
77
89
|
**Rule**: Always `read` before `edit` to verify content.
|
|
78
90
|
|
|
@@ -95,18 +107,17 @@ ast-grep pattern="fetch($URL)" rewrite="await fetch($URL)" dryRun=false
|
|
|
95
107
|
|
|
96
108
|
## Research Tools
|
|
97
109
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
| `codesearch` | Real implementation patterns from GitHub | Public repo examples |
|
|
103
|
-
| `webfetch` | Specific URL user provided | Direct URL fetch |
|
|
110
|
+
- **context7** - Library docs (try first). Fast, external APIs.
|
|
111
|
+
- **websearch** - Docs not in Context7, recent releases, troubleshooting.
|
|
112
|
+
- **codesearch** - Real implementation patterns from GitHub.
|
|
113
|
+
- **webfetch** - Specific URL user provided.
|
|
104
114
|
|
|
105
115
|
## Error Handling
|
|
106
116
|
|
|
107
117
|
- **Transient** (network, timeout): Retry 2x with backoff
|
|
108
118
|
- **Rate limit**: Stop, report to user
|
|
109
119
|
- **Logic error**: Change strategy, don't repeat
|
|
120
|
+
- **Blocked by hook/CI**: Analyze error message, adjust approach, retry once. If still blocked, ask user to check hooks/config.
|
|
110
121
|
|
|
111
122
|
## Memory System
|
|
112
123
|
|
|
@@ -116,16 +127,37 @@ ast-grep pattern="fetch($URL)" rewrite="await fetch($URL)" dryRun=false
|
|
|
116
127
|
handoffs/ # Phase transitions
|
|
117
128
|
research/ # Research findings
|
|
118
129
|
observations/ # Structured observations
|
|
130
|
+
project/ # Persistent project knowledge
|
|
131
|
+
commands.md # Build, test, lint, deploy commands
|
|
132
|
+
conventions.md # Code patterns, commit style, PR process
|
|
133
|
+
gotchas.md # Footguns, edge cases, "don't forget this"
|
|
134
|
+
architecture.md # Key modules, directory structure
|
|
135
|
+
user.md # Identity, preferences, communication style
|
|
119
136
|
```
|
|
120
137
|
|
|
138
|
+
### Standard Memory Blocks
|
|
139
|
+
|
|
140
|
+
- **project/commands.md** - Build/test/lint commands. Update when discovering new command.
|
|
141
|
+
- **project/conventions.md** - Code patterns, style. Update when learning team pattern.
|
|
142
|
+
- **project/gotchas.md** - Footguns, warnings. Update when hitting unexpected behavior.
|
|
143
|
+
- **project/architecture.md** - Key modules, structure. Update when mapping new area.
|
|
144
|
+
- **user.md** - Preferences, workflow. Update when learning user preference.
|
|
145
|
+
|
|
146
|
+
### Explicit Memory Updates
|
|
147
|
+
|
|
148
|
+
Don't rely on implicit learning. Explicitly persist:
|
|
149
|
+
|
|
150
|
+
- Non-obvious project behavior → `project/gotchas.md`
|
|
151
|
+
- User preferences discovered → `user.md`
|
|
152
|
+
- New build/test commands → `project/commands.md`
|
|
153
|
+
- Code patterns to follow → `project/conventions.md`
|
|
154
|
+
|
|
121
155
|
### Memory Tools
|
|
122
156
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
| `memory-search` | Search across all memory files |
|
|
128
|
-
| `observation` | Create structured observations |
|
|
157
|
+
- **memory-read** - Load previous context, templates
|
|
158
|
+
- **memory-update** - Save learnings, handoffs
|
|
159
|
+
- **memory-search** - Search across all memory files
|
|
160
|
+
- **observation** - Create structured observations
|
|
129
161
|
|
|
130
162
|
### Observations
|
|
131
163
|
|
|
@@ -165,11 +197,9 @@ memory-search(query: "session", type: "handoffs")
|
|
|
165
197
|
|
|
166
198
|
Plugins run automatically in the background:
|
|
167
199
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
| **compactor** | Warns at 70%, 85%, 95% context usage - prevents rushed work |
|
|
172
|
-
| **truncator** | Dynamic output truncation based on context remaining |
|
|
200
|
+
- **enforcer** - OS notification when session idles with incomplete TODOs
|
|
201
|
+
- **compactor** - Warns at 70%, 85%, 95% context usage - prevents rushed work
|
|
202
|
+
- **truncator** - Dynamic output truncation based on context remaining
|
|
173
203
|
|
|
174
204
|
**Compactor thresholds**:
|
|
175
205
|
|
|
@@ -244,35 +274,28 @@ Use all three:
|
|
|
244
274
|
|
|
245
275
|
Use `find_skills` → `use_skill` when:
|
|
246
276
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
| UI/UX with images | `ui-ux-research` |
|
|
257
|
-
| Large codebase research | `gemini-large-context` |
|
|
277
|
+
- Creating something new → `brainstorming`
|
|
278
|
+
- Bug or unexpected behavior → `systematic-debugging`
|
|
279
|
+
- Implementing feature → `test-driven-development`
|
|
280
|
+
- Before commit/done → `verification-before-completion`
|
|
281
|
+
- Complex multi-step work → `writing-plans` → `executing-plans`
|
|
282
|
+
- Finished implementation → `requesting-code-review`
|
|
283
|
+
- Building UI → `frontend-aesthetics`
|
|
284
|
+
- UI/UX with images → `ui-ux-research`
|
|
285
|
+
- Large codebase research → `gemini-large-context`
|
|
258
286
|
|
|
259
287
|
Skip for simple questions, quick edits, or conversations.
|
|
260
288
|
|
|
261
|
-
|
|
289
|
+
### Progressive Skill Loading
|
|
262
290
|
|
|
263
|
-
|
|
291
|
+
Skills consume context. Manage them actively:
|
|
264
292
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
# Image analysis (interactive)
|
|
270
|
-
gemini
|
|
271
|
-
@mockup.png Analyze this UI design
|
|
272
|
-
```
|
|
293
|
+
1. **Load on-demand**: Only load skills when starting relevant work
|
|
294
|
+
2. **Read linked files lazily**: Don't load all skill references immediately—read only when needed
|
|
295
|
+
3. **Unload after completion**: When task completes, skill context is no longer needed
|
|
296
|
+
4. **One skill at a time**: Avoid loading multiple skills unless task requires it
|
|
273
297
|
|
|
274
|
-
**
|
|
275
|
-
**Fast**: `gemini-2.5-flash` with `-m gemini-2.5-flash`
|
|
298
|
+
**IMPORTANT**: Always unload irrelevant skills to free context space. Loaded skills that aren't actively needed are context debt.
|
|
276
299
|
|
|
277
300
|
## Core Constraints
|
|
278
301
|
|
|
@@ -78,3 +78,23 @@ Before claiming completion:
|
|
|
78
78
|
- Code review/debugging → @review
|
|
79
79
|
- Architecture planning → @planner
|
|
80
80
|
- UI/UX analysis, mockups → @vision
|
|
81
|
+
|
|
82
|
+
### Delegation Prompt Structure
|
|
83
|
+
|
|
84
|
+
When delegating, include ALL 7 sections:
|
|
85
|
+
|
|
86
|
+
1. **TASK**: Atomic, specific goal (one action per delegation)
|
|
87
|
+
2. **EXPECTED OUTCOME**: Concrete deliverables with success criteria
|
|
88
|
+
3. **REQUIRED SKILLS**: Which skill to invoke (if any)
|
|
89
|
+
4. **REQUIRED TOOLS**: Explicit tool whitelist (prevents sprawl)
|
|
90
|
+
5. **MUST DO**: Exhaustive requirements - leave NOTHING implicit
|
|
91
|
+
6. **MUST NOT DO**: Forbidden actions - anticipate rogue behavior
|
|
92
|
+
7. **CONTEXT**: File paths, existing patterns, constraints
|
|
93
|
+
|
|
94
|
+
After delegation completes, VERIFY:
|
|
95
|
+
|
|
96
|
+
- Did result match expected outcome?
|
|
97
|
+
- Were MUST DO / MUST NOT DO followed?
|
|
98
|
+
- Evidence provided (not just "done")?
|
|
99
|
+
|
|
100
|
+
Vague prompts = wasted tokens. Be exhaustive.
|
|
@@ -47,13 +47,9 @@ Fast execute-first agent. Speed over depth. Delegate anything complex.
|
|
|
47
47
|
|
|
48
48
|
**GKG tools FIRST, then AST-Grep, then built-in tools.**
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
| `gkg_get_references` | Find all usages |
|
|
54
|
-
| `ast-grep` | Semantic code search/replace |
|
|
55
|
-
| `grep` | Text strings, config values |
|
|
56
|
-
| `glob` | Find files by pattern |
|
|
50
|
+
1. `gkg_search_codebase_definitions`, `gkg_get_references` - Find symbols, usages
|
|
51
|
+
2. `ast-grep` - Semantic code search/replace
|
|
52
|
+
3. `grep`, `glob` - Text search, file patterns
|
|
57
53
|
|
|
58
54
|
## Pre-Action Checks
|
|
59
55
|
|
|
@@ -69,15 +65,31 @@ Before mutations (edit, write, delete):
|
|
|
69
65
|
- **Rate limits**: Stop, report to user
|
|
70
66
|
- **Logic errors**: Change strategy, don't repeat
|
|
71
67
|
|
|
72
|
-
## Delegation
|
|
68
|
+
## Delegation
|
|
73
69
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
70
|
+
- Codebase search → @explore
|
|
71
|
+
- Library docs, patterns → @scout
|
|
72
|
+
- Code review, debugging → @review
|
|
73
|
+
- Architecture, 3+ phases → @planner
|
|
74
|
+
- UI/UX, mockups, visuals → @vision
|
|
75
|
+
|
|
76
|
+
### Delegation Prompt Structure
|
|
77
|
+
|
|
78
|
+
When delegating, include ALL 7 sections:
|
|
79
|
+
|
|
80
|
+
1. **TASK**: Atomic, specific goal (one action per delegation)
|
|
81
|
+
2. **EXPECTED OUTCOME**: Concrete deliverables with success criteria
|
|
82
|
+
3. **REQUIRED SKILLS**: Which skill to invoke (if any)
|
|
83
|
+
4. **REQUIRED TOOLS**: Explicit tool whitelist (prevents sprawl)
|
|
84
|
+
5. **MUST DO**: Exhaustive requirements - leave NOTHING implicit
|
|
85
|
+
6. **MUST NOT DO**: Forbidden actions - anticipate rogue behavior
|
|
86
|
+
7. **CONTEXT**: File paths, existing patterns, constraints
|
|
87
|
+
|
|
88
|
+
After delegation completes, VERIFY:
|
|
89
|
+
|
|
90
|
+
- Did result match expected outcome?
|
|
91
|
+
- Were MUST DO / MUST NOT DO followed?
|
|
92
|
+
- Evidence provided (not just "done")?
|
|
81
93
|
|
|
82
94
|
## Execute Directly
|
|
83
95
|
|
|
@@ -30,96 +30,131 @@ Visual content specialist for multimodal analysis: images, mockups, PDFs, diagra
|
|
|
30
30
|
|
|
31
31
|
## Strengths
|
|
32
32
|
|
|
33
|
-
- Image and screenshot analysis
|
|
33
|
+
- Image and screenshot analysis
|
|
34
34
|
- PDF and document extraction
|
|
35
35
|
- Diagram interpretation (architecture, flowcharts, ERDs)
|
|
36
36
|
- Design system audit and consistency review
|
|
37
37
|
- Accessibility assessment (WCAG compliance)
|
|
38
38
|
- Anti-AI-slop aesthetic recommendations
|
|
39
39
|
|
|
40
|
-
##
|
|
40
|
+
## Analysis Modes
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
- Apply `frontend-aesthetics` skill to avoid generic AI aesthetics
|
|
44
|
-
- Apply `ui-ux-research` skill for systematic design analysis
|
|
45
|
-
- Read-only role: analyze and recommend, don't implement
|
|
46
|
-
- Delegate implementation to @build agent
|
|
42
|
+
### Quick Analysis
|
|
47
43
|
|
|
48
|
-
|
|
44
|
+
Fast visual assessment for simple queries.
|
|
49
45
|
|
|
50
|
-
**
|
|
46
|
+
**Use when:** Single image, specific question, time-sensitive
|
|
47
|
+
**Skill:** `visual-analysis` (quick mode)
|
|
51
48
|
|
|
52
|
-
### Image Analysis (Mockups, Screenshots)
|
|
53
|
-
|
|
54
|
-
```bash
|
|
55
|
-
gemini -m gemini-2.5-flash
|
|
56
|
-
@mockup.png Analyze this UI design for:
|
|
57
|
-
1. Typography choices and hierarchy
|
|
58
|
-
2. Color palette and contrast
|
|
59
|
-
3. Spacing and layout consistency
|
|
60
|
-
4. Accessibility concerns
|
|
61
49
|
```
|
|
62
|
-
|
|
63
|
-
### PDF/Document Analysis
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
gemini -m gemini-2.5-flash
|
|
67
|
-
@document.pdf Extract key information and summarize
|
|
50
|
+
Analyze image → Extract key observations → Provide focused answer
|
|
68
51
|
```
|
|
69
52
|
|
|
70
|
-
###
|
|
53
|
+
### Deep Audit
|
|
71
54
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
55
|
+
Comprehensive analysis with actionable recommendations.
|
|
56
|
+
|
|
57
|
+
**Use when:** Design review, accessibility audit, system consistency check
|
|
58
|
+
**Skills:** Combine multiple skills based on task:
|
|
76
59
|
|
|
77
|
-
|
|
60
|
+
| Task | Primary Skill | Supporting Skills |
|
|
61
|
+
| --------------- | --------------------- | --------------------- |
|
|
62
|
+
| UI/UX Review | `ui-ux-research` | `frontend-aesthetics` |
|
|
63
|
+
| Accessibility | `accessibility-audit` | `visual-analysis` |
|
|
64
|
+
| Design System | `design-system-audit` | `frontend-aesthetics` |
|
|
65
|
+
| Mockup Analysis | `mockup-to-code` | `visual-analysis` |
|
|
78
66
|
|
|
79
|
-
```
|
|
80
|
-
|
|
67
|
+
```
|
|
68
|
+
Load skill(s) → Systematic analysis → Structured findings → Recommendations
|
|
81
69
|
```
|
|
82
70
|
|
|
83
|
-
##
|
|
71
|
+
## Responsibilities
|
|
84
72
|
|
|
85
|
-
###
|
|
73
|
+
### DO
|
|
86
74
|
|
|
87
|
-
-
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
-
|
|
75
|
+
- Load appropriate skill before analysis (`use_skill`)
|
|
76
|
+
- Follow skill workflows systematically
|
|
77
|
+
- Provide structured output (Summary → Findings → Recommendations)
|
|
78
|
+
- Reference specific elements with coordinates/descriptions
|
|
79
|
+
- Cite WCAG criteria for accessibility issues
|
|
80
|
+
- Suggest concrete fixes, not vague improvements
|
|
92
81
|
|
|
93
|
-
###
|
|
82
|
+
### DON'T
|
|
94
83
|
|
|
95
|
-
-
|
|
96
|
-
-
|
|
97
|
-
-
|
|
98
|
-
-
|
|
84
|
+
- Embed CLI commands in responses (use skills/commands instead)
|
|
85
|
+
- Implement changes directly (delegate to @build)
|
|
86
|
+
- Make assumptions about intent without clarifying
|
|
87
|
+
- Skip skill loading for complex tasks
|
|
88
|
+
- Provide generic "looks good" assessments
|
|
99
89
|
|
|
100
|
-
##
|
|
90
|
+
## Skill Selection Guide
|
|
101
91
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
92
|
+
| User Request | Load This Skill |
|
|
93
|
+
| ----------------------------- | --------------------- |
|
|
94
|
+
| "Review this mockup" | `visual-analysis` |
|
|
95
|
+
| "Check accessibility" | `accessibility-audit` |
|
|
96
|
+
| "Audit our design system" | `design-system-audit` |
|
|
97
|
+
| "Convert this design to code" | `mockup-to-code` |
|
|
98
|
+
| "Is this too AI-looking?" | `frontend-aesthetics` |
|
|
99
|
+
| "Deep UI/UX analysis" | `ui-ux-research` |
|
|
107
100
|
|
|
108
101
|
## Tool Priority
|
|
109
102
|
|
|
110
|
-
1. **
|
|
111
|
-
2. **Read/Glob**
|
|
112
|
-
3. **
|
|
103
|
+
1. **Skills** (`use_skill`) - Load appropriate skill for the task
|
|
104
|
+
2. **Read/Glob** - Inspect existing components and styles
|
|
105
|
+
3. **GKG tools** - Find design-related code definitions
|
|
106
|
+
4. **Webfetch/Websearch** - Design inspiration and references
|
|
107
|
+
5. **Context7** - UI library documentation
|
|
113
108
|
|
|
114
109
|
## Output Format
|
|
115
110
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
111
|
+
All analyses should follow this structure:
|
|
112
|
+
|
|
113
|
+
```markdown
|
|
114
|
+
## Summary
|
|
115
|
+
|
|
116
|
+
[1-2 sentence overall assessment]
|
|
117
|
+
|
|
118
|
+
## Findings
|
|
119
|
+
|
|
120
|
+
### [Category 1]
|
|
121
|
+
|
|
122
|
+
- Observation with specific detail
|
|
123
|
+
- Another observation
|
|
124
|
+
|
|
125
|
+
### [Category 2]
|
|
126
|
+
|
|
127
|
+
- Observation
|
|
128
|
+
|
|
129
|
+
## Recommendations
|
|
130
|
+
|
|
131
|
+
1. [Actionable fix] - Priority: High/Medium/Low
|
|
132
|
+
2. [Another fix] - Priority: ...
|
|
133
|
+
|
|
134
|
+
## References
|
|
135
|
+
|
|
136
|
+
- [Link or pattern reference if relevant]
|
|
137
|
+
```
|
|
120
138
|
|
|
121
139
|
## Delegation
|
|
122
140
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
141
|
+
| Need | Delegate To |
|
|
142
|
+
| --------------------- | ----------- |
|
|
143
|
+
| Implement changes | @build |
|
|
144
|
+
| Research UI libraries | @scout |
|
|
145
|
+
| Review implementation | @review |
|
|
146
|
+
| Plan large redesign | @planner |
|
|
147
|
+
|
|
148
|
+
## Anti-Patterns to Flag
|
|
149
|
+
|
|
150
|
+
When reviewing designs, actively identify these AI-slop patterns:
|
|
151
|
+
|
|
152
|
+
- Inter/Roboto as primary fonts without justification
|
|
153
|
+
- Purple/blue gradient overuse
|
|
154
|
+
- Flat white backgrounds lacking texture
|
|
155
|
+
- Generic stock illustration style
|
|
156
|
+
- Cookie-cutter card layouts with no hierarchy
|
|
157
|
+
- Excessive rounded corners on everything
|
|
158
|
+
- Glassmorphism without purpose
|
|
159
|
+
|
|
160
|
+
**Alternative directions** are covered in `frontend-aesthetics` skill.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: WCAG accessibility audit
|
|
3
|
+
argument-hint: "<image-or-component-path> [level: A|AA|AAA]"
|
|
4
|
+
agent: vision
|
|
5
|
+
model: proxypal/gemini-3-flash-preview
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Accessibility Check: $ARGUMENTS
|
|
9
|
+
|
|
10
|
+
use_skill("accessibility-audit")
|
|
11
|
+
|
|
12
|
+
Perform WCAG accessibility audit.
|
|
13
|
+
|
|
14
|
+
## Instructions
|
|
15
|
+
|
|
16
|
+
Parse path and WCAG level from `$ARGUMENTS` (default: AA).
|
|
17
|
+
|
|
18
|
+
Determine input type:
|
|
19
|
+
|
|
20
|
+
- **Image/screenshot**: Visual accessibility analysis
|
|
21
|
+
- **Component path**: Code accessibility patterns
|
|
22
|
+
|
|
23
|
+
## Visual Analysis
|
|
24
|
+
|
|
25
|
+
Check:
|
|
26
|
+
|
|
27
|
+
1. **Color contrast** - Text/background ratios (AA: 4.5:1 normal, 3:1 large)
|
|
28
|
+
2. **Touch targets** - Interactive elements ≥44x44px
|
|
29
|
+
3. **Visual information** - Color-only cues, missing labels
|
|
30
|
+
4. **Content structure** - Heading hierarchy, reading order
|
|
31
|
+
5. **Interactive states** - Focus indicators, hover states
|
|
32
|
+
|
|
33
|
+
## Code Analysis
|
|
34
|
+
|
|
35
|
+
Search for:
|
|
36
|
+
|
|
37
|
+
- Missing alt text on images
|
|
38
|
+
- Click handlers on non-interactive elements
|
|
39
|
+
- Form inputs without labels
|
|
40
|
+
- Missing ARIA attributes
|
|
41
|
+
|
|
42
|
+
## Output
|
|
43
|
+
|
|
44
|
+
```markdown
|
|
45
|
+
## Accessibility Audit
|
|
46
|
+
|
|
47
|
+
**WCAG Level:** [level]
|
|
48
|
+
|
|
49
|
+
### Critical Issues
|
|
50
|
+
|
|
51
|
+
- [ ] Issue + WCAG ref + fix
|
|
52
|
+
|
|
53
|
+
### Major Issues
|
|
54
|
+
|
|
55
|
+
- [ ] Issue + WCAG ref + fix
|
|
56
|
+
|
|
57
|
+
### Minor Issues
|
|
58
|
+
|
|
59
|
+
- [ ] Issue + WCAG ref + fix
|
|
60
|
+
|
|
61
|
+
### Passed
|
|
62
|
+
|
|
63
|
+
- ✓ What passed
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Include code fix snippets for each issue.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Analyze UI mockup or screenshot
|
|
3
|
+
argument-hint: "<image-path> [focus: layout|colors|components|all]"
|
|
4
|
+
agent: vision
|
|
5
|
+
model: proxypal/gemini-3-flash-preview
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Analyze Mockup: $ARGUMENTS
|
|
9
|
+
|
|
10
|
+
use_skill("visual-analysis")
|
|
11
|
+
|
|
12
|
+
Analyze the provided UI mockup or screenshot.
|
|
13
|
+
|
|
14
|
+
## Instructions
|
|
15
|
+
|
|
16
|
+
Load the image from the path in `$ARGUMENTS`.
|
|
17
|
+
|
|
18
|
+
Determine focus area (default: all):
|
|
19
|
+
|
|
20
|
+
- **layout**: Grid, hierarchy, spacing, responsive considerations
|
|
21
|
+
- **colors**: Extract palette with hex values, suggest semantic naming
|
|
22
|
+
- **components**: Identify UI elements, variants, reusability
|
|
23
|
+
- **all**: Comprehensive analysis covering everything
|
|
24
|
+
|
|
25
|
+
## Output Format
|
|
26
|
+
|
|
27
|
+
```markdown
|
|
28
|
+
## Summary
|
|
29
|
+
|
|
30
|
+
[1-2 sentence overview]
|
|
31
|
+
|
|
32
|
+
## Findings
|
|
33
|
+
|
|
34
|
+
[Structured analysis based on focus area]
|
|
35
|
+
|
|
36
|
+
## Implementation Notes
|
|
37
|
+
|
|
38
|
+
- Technical considerations
|
|
39
|
+
- Component library suggestions
|
|
40
|
+
- CSS/Tailwind starting point
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Suggest follow-up commands if relevant.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit design system from screenshots or codebase
|
|
3
|
+
argument-hint: "<screenshots-path|codebase> [output: tokens|report|both]"
|
|
4
|
+
agent: vision
|
|
5
|
+
model: proxypal/gemini-3-pro-preview
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Design Audit: $ARGUMENTS
|
|
9
|
+
|
|
10
|
+
use_skill("design-system-audit")
|
|
11
|
+
|
|
12
|
+
Perform a comprehensive design system audit.
|
|
13
|
+
|
|
14
|
+
## Instructions
|
|
15
|
+
|
|
16
|
+
Determine source type from `$ARGUMENTS`:
|
|
17
|
+
|
|
18
|
+
- **Screenshots path**: Analyze images for visual inventory
|
|
19
|
+
- **"codebase"**: Analyze code for design tokens and patterns
|
|
20
|
+
|
|
21
|
+
Output format (default: both):
|
|
22
|
+
|
|
23
|
+
- **tokens**: JSON design tokens
|
|
24
|
+
- **report**: Markdown audit report
|
|
25
|
+
- **both**: Both formats
|
|
26
|
+
|
|
27
|
+
## For Screenshots
|
|
28
|
+
|
|
29
|
+
Analyze all images and extract:
|
|
30
|
+
|
|
31
|
+
1. Color palette (group by primary, secondary, neutral, semantic)
|
|
32
|
+
2. Typography scale (families, sizes, weights)
|
|
33
|
+
3. Spacing patterns
|
|
34
|
+
4. Component variants
|
|
35
|
+
5. Inconsistencies to consolidate
|
|
36
|
+
|
|
37
|
+
## For Codebase
|
|
38
|
+
|
|
39
|
+
Search for:
|
|
40
|
+
|
|
41
|
+
- Hardcoded colors and values
|
|
42
|
+
- Tailwind config
|
|
43
|
+
- CSS custom properties
|
|
44
|
+
- Design token files
|
|
45
|
+
|
|
46
|
+
## Output
|
|
47
|
+
|
|
48
|
+
Provide design tokens JSON and/or audit report with:
|
|
49
|
+
|
|
50
|
+
- Executive summary with metrics
|
|
51
|
+
- Findings by category
|
|
52
|
+
- Prioritized recommendations
|
|
53
|
+
- Consistency score
|