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.
Files changed (36) hide show
  1. package/dist/index.js +10 -1
  2. package/dist/template/.opencode/AGENTS.md +78 -55
  3. package/dist/template/.opencode/agent/build.md +20 -0
  4. package/dist/template/.opencode/agent/rush.md +27 -15
  5. package/dist/template/.opencode/agent/vision.md +95 -60
  6. package/dist/template/.opencode/command/accessibility-check.md +66 -0
  7. package/dist/template/.opencode/command/analyze-mockup.md +43 -0
  8. package/dist/template/.opencode/command/design-audit.md +53 -0
  9. package/dist/template/.opencode/command/edit-image.md +40 -0
  10. package/dist/template/.opencode/command/generate-diagram.md +48 -0
  11. package/dist/template/.opencode/command/generate-icon.md +40 -0
  12. package/dist/template/.opencode/command/generate-image.md +27 -0
  13. package/dist/template/.opencode/command/generate-pattern.md +41 -0
  14. package/dist/template/.opencode/command/generate-storyboard.md +41 -0
  15. package/dist/template/.opencode/command/init.md +176 -0
  16. package/dist/template/.opencode/command/new-feature.md +137 -0
  17. package/dist/template/.opencode/command/research-ui.md +34 -27
  18. package/dist/template/.opencode/command/restore-image.md +39 -0
  19. package/dist/template/.opencode/command/revert-feature.md +127 -0
  20. package/dist/template/.opencode/command/ui-review.md +26 -34
  21. package/dist/template/.opencode/memory/project/README.md +59 -0
  22. package/dist/template/.opencode/memory/project/architecture.md +26 -0
  23. package/dist/template/.opencode/memory/project/commands.md +26 -0
  24. package/dist/template/.opencode/memory/project/conventions.md +26 -0
  25. package/dist/template/.opencode/memory/project/gotchas.md +26 -0
  26. package/dist/template/.opencode/memory/user.example.md +21 -0
  27. package/dist/template/.opencode/memory/user.md +21 -0
  28. package/dist/template/.opencode/opencode.json +475 -457
  29. package/dist/template/.opencode/package.json +1 -2
  30. package/dist/template/.opencode/skills/accessibility-audit/SKILL.md +180 -0
  31. package/dist/template/.opencode/skills/design-system-audit/SKILL.md +141 -0
  32. package/dist/template/.opencode/skills/frontend-aesthetics/SKILL.md +40 -65
  33. package/dist/template/.opencode/skills/mockup-to-code/SKILL.md +158 -0
  34. package/dist/template/.opencode/skills/ui-ux-research/SKILL.md +60 -131
  35. package/dist/template/.opencode/skills/visual-analysis/SKILL.md +130 -0
  36. 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.3.3",
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
- | Task Type | Delegate To | Trigger Words |
19
- | ----------------- | ----------- | ---------------------------------------------------- |
20
- | Code search | @explore | find, where is, search, how does X work, locate |
21
- | External research | @scout | research, compare, docs for, API for, best practices |
22
- | Code review/debug | @review | review, audit, debug, why broken, root cause |
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
- | Priority | Tools | Use For |
69
- | -------- | --------------------------------- | ---------------------------------- |
70
- | 1 | `gkg_search_codebase_definitions` | Find symbols by name |
71
- | 1 | `gkg_get_references` | Find all usages |
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
- | Tool | Use For | Performance Notes |
99
- | ------------ | ------------------------------------------------------ | -------------------- |
100
- | `context7` | Library docs (try first) | Fast, external APIs |
101
- | `websearch` | Docs not in Context7, recent releases, troubleshooting | General web search |
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
- | Tool | Use For |
124
- | --------------- | -------------------------------- |
125
- | `memory-read` | Load previous context, templates |
126
- | `memory-update` | Save learnings, handoffs |
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
- | Plugin | What it does |
169
- | ------------- | ----------------------------------------------------------- |
170
- | **enforcer** | OS notification when session idles with incomplete TODOs |
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
- | Situation | Skill |
248
- | -------------------------- | ----------------------------------- |
249
- | Creating something new | `brainstorming` |
250
- | Bug or unexpected behavior | `systematic-debugging` |
251
- | Implementing feature | `test-driven-development` |
252
- | Before commit/done | `verification-before-completion` |
253
- | Complex multi-step work | `writing-plans` → `executing-plans` |
254
- | Finished implementation | `requesting-code-review` |
255
- | Building UI | `frontend-aesthetics` |
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
- ## Gemini CLI (Large Context)
289
+ ### Progressive Skill Loading
262
290
 
263
- Use when analysis needs >100KB context or image analysis.
291
+ Skills consume context. Manage them actively:
264
292
 
265
- ```bash
266
- # Codebase analysis
267
- gemini -p "@src/ [your question]"
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
- **Default**: `gemini-2.5-pro` (1M tokens)
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
- | Tool | Use For |
51
- | --------------------------------- | ---------------------------- |
52
- | `gkg_search_codebase_definitions` | Find symbols by name |
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 Rules
68
+ ## Delegation
73
69
 
74
- | Task Type | Delegate To |
75
- | ----------------------- | ----------- |
76
- | Codebase search | @explore |
77
- | Library docs, patterns | @scout |
78
- | Code review, debugging | @review |
79
- | Architecture, 3+ phases | @planner |
80
- | UI/UX, mockups, visuals | @vision |
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 via Gemini CLI
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
- ## Guidelines
40
+ ## Analysis Modes
41
41
 
42
- - Use `gemini` CLI with `-m gemini-2.5-flash` for all visual analysis
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
- ## Gemini CLI Usage
44
+ Fast visual assessment for simple queries.
49
45
 
50
- **Always use gemini-2.5-flash model:**
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
- ### Diagram Interpretation
53
+ ### Deep Audit
71
54
 
72
- ```bash
73
- gemini -m gemini-2.5-flash
74
- @architecture.png Explain this system architecture diagram
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
- ### Codebase-Wide Design Audit
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
- ```bash
80
- gemini -m gemini-2.5-flash -p "@src/components/ Audit design system consistency"
67
+ ```
68
+ Load skill(s) Systematic analysis Structured findings → Recommendations
81
69
  ```
82
70
 
83
- ## Design Principles
71
+ ## Responsibilities
84
72
 
85
- ### Avoid AI Slop
73
+ ### DO
86
74
 
87
- - Inter/Roboto as primary fonts
88
- - Purple/blue gradients everywhere
89
- - Flat white backgrounds with no texture
90
- - Stock illustration style
91
- - Cookie-cutter card layouts
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
- ### Recommend Instead
82
+ ### DON'T
94
83
 
95
- - Distinctive typography (GT Walsheim, Söhne, custom fonts)
96
- - Purposeful color with texture and depth
97
- - Meaningful animations and transitions
98
- - Layout variety and visual hierarchy
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
- ## Accessibility Checklist
90
+ ## Skill Selection Guide
101
91
 
102
- - [ ] Color contrast meets WCAG AA (4.5:1 for text)
103
- - [ ] Focus indicators visible
104
- - [ ] Touch targets >= 44px
105
- - [ ] Motion respects prefers-reduced-motion
106
- - [ ] Keyboard navigation works
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. **Gemini CLI** (`-m gemini-2.5-flash`) for image, PDF, and codebase analysis
111
- 2. **Read/Glob** for component and style inspection
112
- 3. **Webfetch/Websearch** for design inspiration
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
- 1. **Summary**: Overall assessment (1-2 sentences)
117
- 2. **Findings**: Specific observations with details
118
- 3. **Recommendations**: Actionable next steps
119
- 4. **References**: Links to patterns if relevant
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
- - Implementation work @build
124
- - External library research → @scout
125
- - Code review after changes @review
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