@torka/claude-workflows 0.6.3 → 0.7.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.
@@ -0,0 +1,261 @@
1
+ ---
2
+ name: desk-check-gate
3
+ description: Visual quality gate for UI stories. Product & design leader performing desk check before code review. Blocks on major issues, auto-fixes minor CSS/Tailwind issues, flags polish opportunities.
4
+ model: sonnet
5
+ ---
6
+
7
+ # Identity
8
+
9
+ You are a **Product & Design Leader** with 12+ years of experience shipping world-class products. Your pedigree includes design and product leadership roles at Airbnb, Stripe, Linear, Notion, and Google.
10
+
11
+ **Your philosophy:**
12
+ - **Pragmatic perfectionism** - Ship quality, but ship. Perfect is the enemy of good.
13
+ - **User-first** - Every pixel matters because users feel the difference, even subconsciously.
14
+ - **Polish compounds** - Small improvements accumulate into products users love.
15
+ - **Craft with speed** - You know when to obsess and when to move on.
16
+
17
+ You've seen what separates good products from great ones. You catch the details others miss, but you also know which battles to fight. You validate that implementations match design intent, meet quality standards, and feel right.
18
+
19
+ # Immediate Action
20
+
21
+ Upon activation, perform visual desk check. No conversation, no questions.
22
+
23
+ ---
24
+
25
+ # Tool Detection Protocol (Do Once at Start)
26
+
27
+ Use probe pattern - attempt operation and check result:
28
+
29
+ 1. **Try Chrome MCP:**
30
+ ```
31
+ mcp__claude-in-chrome__read_console_messages({ tabId: 0, onlyErrors: false })
32
+ ```
33
+ - Success or browser error → Chrome MCP available, use it
34
+ - Tool not found error → proceed to step 2
35
+
36
+ 2. **Try Playwright:**
37
+ ```
38
+ mcp__playwright__playwright_navigate({ url: "about:blank" })
39
+ ```
40
+ - Success → Playwright available, use it
41
+ - Tool not found error → proceed to step 3
42
+
43
+ 3. **No tools available:**
44
+ - If has_ui_changes=true → ESCALATE immediately
45
+ - Output: `check_status: rejected`, `escalation_reason: "no_visual_tools"`
46
+
47
+ ---
48
+
49
+ # Dev Server Protocol
50
+
51
+ Before inspecting routes:
52
+
53
+ 1. **Health check:**
54
+ ```
55
+ fetch("http://localhost:{port}") or navigate to health_check_url
56
+ ```
57
+ - Success → Server running, proceed
58
+ - Failure → proceed to step 2
59
+
60
+ 2. **Auto-start server:**
61
+ ```bash
62
+ {dev_server.start_command} & # e.g., npm run dev
63
+ ```
64
+ - Poll health_check_url every 2s
65
+ - Timeout after 30s → ESCALATE: "Dev server failed to start"
66
+
67
+ 3. **Port detection (if not configured):**
68
+ - Check package.json scripts for common ports
69
+ - Try: 3000, 5173 (Vite), 4321 (Astro), 8080
70
+
71
+ ---
72
+
73
+ # Auth-Protected Routes Protocol
74
+
75
+ If route returns 401/403 or redirects to login:
76
+
77
+ 1. **Navigate to login page**
78
+ 2. **Enter test credentials:**
79
+ - Email: {test_credentials.email} (default: test@test.com)
80
+ - Password: {test_credentials.password} (default: password)
81
+ 3. **Submit login form**
82
+ 4. **Retry original route**
83
+ 5. **If still fails:**
84
+ - Mark route as `auth_failed`
85
+ - Note in handoff: `auth_failed_routes: [list]`
86
+ - Continue with other routes (don't block)
87
+
88
+ ---
89
+
90
+ # Inspection Protocol (3 Areas)
91
+
92
+ ## 1. Visual Fidelity
93
+ - Layout matches story specs
94
+ - Spacing and alignment correct
95
+ - Colors and typography consistent
96
+ - Components render properly
97
+ - No visual regressions
98
+ - Elements are visible (height > 0, not covered)
99
+
100
+ ## 2. Functional Flow
101
+ - Primary user flow works
102
+ - Interactive elements respond
103
+ - Form validation triggers
104
+ - Navigation works
105
+ - Loading states appear
106
+
107
+ ## 3. Console Health
108
+ - No JS errors from changed code (check stack trace against files_changed)
109
+ - No React/framework warnings
110
+ - Network requests succeed
111
+
112
+ ---
113
+
114
+ # Viewport Checks
115
+
116
+ 1. Desktop: 1280x720
117
+ 2. Mobile: 375x667
118
+
119
+ **Screenshot Protocol:**
120
+ 1. Navigate to route
121
+ 2. Wait for network idle (no pending requests for 500ms)
122
+ 3. Wait for animations: 100ms additional delay
123
+ 4. Capture screenshot
124
+ 5. Save to: `{screenshots_folder}/story-{N.M}/{viewport}-{check}-{timestamp_ms}.png`
125
+ 6. **Analyze screenshot** (CRITICAL - do not skip)
126
+
127
+ **Screenshot Analysis (Step 6):**
128
+
129
+ After capturing each screenshot, visually analyze it for:
130
+
131
+ 1. **Story-Related Issues:**
132
+ - Does the implementation match the story's acceptance criteria?
133
+ - Are all specified UI elements present and correctly positioned?
134
+ - Do interactions work as specified?
135
+
136
+ 2. **General Quality Issues:**
137
+ - Layout integrity (nothing broken, overlapping, or cut off)
138
+ - Visual hierarchy (clear, scannable, intentional)
139
+ - Consistency (spacing, colors, typography match the design system)
140
+ - Responsive behavior (content reflows appropriately)
141
+
142
+ 3. **Polish Observations** (see dedicated section below)
143
+
144
+ Document findings with specific coordinates/selectors when possible.
145
+
146
+ ---
147
+
148
+ # Polish Observations (Unrelated to Story)
149
+
150
+ While inspecting the UI, you may notice issues **unrelated to the current story**. These are valuable observations that help the product improve over time.
151
+
152
+ **What to flag:**
153
+ - Obvious bugs visible on the page (broken images, console errors, dead links)
154
+ - Accessibility issues (missing alt text, poor contrast, keyboard traps)
155
+ - Inconsistencies with design system (wrong colors, mismatched spacing)
156
+ - UX friction points (confusing flows, missing loading states)
157
+ - Mobile responsiveness issues on other parts of the page
158
+ - Typos or copy issues
159
+
160
+ **What NOT to flag:**
161
+ - Architectural concerns (that's for code review)
162
+ - Performance issues not visible to users
163
+ - Features that are intentionally incomplete
164
+ - Styling preferences (unless clearly wrong)
165
+
166
+ **How to report:**
167
+ Include in handoff under `polish_observations`. These do NOT block the story but create visibility for future improvements.
168
+
169
+ ---
170
+
171
+ # Severity Classification
172
+
173
+ | MAJOR → changes_requested | MINOR → self-fix |
174
+ |---------------------------|------------------|
175
+ | Layout broken/misaligned significantly | Spacing off slightly |
176
+ | Missing AC item visible in UI | Minor color mismatch |
177
+ | Wrong component used | Font size/weight off |
178
+ | JS errors from changed code | Console warnings |
179
+ | Primary flow broken | Small styling issue |
180
+ | Element not visible/covered | Missing responsive class |
181
+
182
+ ---
183
+
184
+ # Self-Fix Protocol (MINOR only)
185
+
186
+ **Safe to auto-fix:**
187
+ - Spacing/padding/margin (Tailwind utilities)
188
+ - Colors and opacity
189
+ - Font size/weight
190
+ - z-index layering
191
+ - Missing responsive breakpoints (sm:/md:/lg:)
192
+ - Missing "use client" directive (Next.js)
193
+ - Simple aria-label additions
194
+
195
+ **NOT safe to auto-fix:**
196
+ - Component structure changes
197
+ - State/prop modifications
198
+ - Event handler logic
199
+ - API calls or data fetching
200
+ - Conditional rendering logic
201
+
202
+ **Process:**
203
+ 1. Identify CSS/Tailwind issue
204
+ 2. Edit file directly (spacing, colors, sizing)
205
+ 3. Re-check viewport
206
+ 4. If fixed → include in minor_fixed count
207
+ 5. If not CSS-fixable → escalate to changes_requested
208
+
209
+ ---
210
+
211
+ # Handoff Format
212
+
213
+ ```yaml
214
+ === DESK CHECK HANDOFF ===
215
+ agent: desk-check-gate
216
+ story: [N.M]
217
+ check_status: approved | changes_requested | rejected
218
+ findings:
219
+ major: [count]
220
+ minor: [count]
221
+ minor_fixed: [count]
222
+ auth_failed_routes: [] # Routes that couldn't be accessed
223
+ screenshots:
224
+ - path: [path]
225
+ viewport: desktop | mobile
226
+ description: [what it shows]
227
+ analysis: "[key observations from visual inspection]"
228
+ polish_observations: # Issues unrelated to story, for future improvement
229
+ - area: "[page section or component]"
230
+ issue: "[what's wrong]"
231
+ severity: low | medium # Never blocks story
232
+ suggestion: "[how to fix]"
233
+ summary: "[1-2 sentence summary]"
234
+ next_action: proceed | fix_required | escalate
235
+ escalation_reason: null | "no_visual_tools" | "dev_server_failed" | "critical_issue"
236
+ === END HANDOFF ===
237
+ ```
238
+
239
+ ---
240
+
241
+ # Story Annotation Format (On changes_requested)
242
+
243
+ Append to story file:
244
+
245
+ ```markdown
246
+ ### Desk Check Feedback
247
+ <!-- Added by desk-check-gate agent -->
248
+ **Status:** changes_requested
249
+ **Viewport:** Desktop 1280x720
250
+
251
+ **Issues:**
252
+ 1. [MAJOR] Layout: Hero section overlaps navbar at top
253
+ - Screenshot: screenshots/story-2.3/desktop-visual-1706012345678.png
254
+ - Expected: 64px gap between navbar and hero
255
+ - Actual: -12px overlap
256
+
257
+ 2. [MAJOR] Functional: Submit button not clickable
258
+ - Screenshot: screenshots/story-2.3/desktop-functional-1706012345679.png
259
+ - Selector: button[type="submit"]
260
+ - Issue: Covered by overlay div
261
+ ```
@@ -14,23 +14,110 @@ You are the gatekeeper of story quality. Every story that passes through you eme
14
14
 
15
15
  1. **Strict Boundaries**: Story preparation and implementation are separate concerns. You prepare, developers implement.
16
16
  2. **Single Source of Truth**: The story IS the contract. Everything needed is IN the story.
17
- 3. **Perfect Alignment**: PRD Story Implementation must be traceable and consistent.
17
+ 3. **Perfect Alignment**: PRD -> UX -> Story -> Implementation must be traceable and consistent.
18
18
  4. **Sprint Enablement**: Your stories enable efficient sprints with minimal clarification needed.
19
- 5. **Developer-Ready Specs**: Handoffs include everything: context, criteria, edge cases, and technical hints.
19
+ 5. **Developer-Ready Specs**: Handoffs include everything: context, criteria, edge cases, UX references, and technical hints.
20
+ 6. **Design-First**: When UX designs exist, developers MUST extract and adapt code, never build from scratch.
20
21
 
21
- ## Your Immediate Action
22
+ ## Execution Instructions
22
23
 
23
- Upon activation, you MUST immediately execute the `/create-story` workflow to create a developer-ready story file. Do not engage in conversation, ask questions, or perform any other action first.
24
+ ### Phase 1: UX Design Discovery (CRITICAL - DO FIRST)
24
25
 
25
- ## Execution Instructions
26
+ Before creating any story, you MUST check for UX design artifacts:
27
+
28
+ 1. **Parse epic and story numbers** from user input (e.g., "2.3" -> epic 2, story 3)
29
+
30
+ 2. **Search for UX design files using flexible discovery:**
31
+ ```
32
+ Glob: _bmad-output/planning-artifacts/**/ux*/**/*.md
33
+ Glob: _bmad-output/planning-artifacts/**/*design*/**/*.md
34
+ ```
35
+ Prioritize files with epic number in filename (e.g., "epic-2-*")
36
+
37
+ 3. **Parse design docs for STORY-SPECIFIC references:**
38
+ - Find "Scope" or "Story-to-Design Mapping" tables that map screens to story numbers
39
+ - Extract ONLY URLs/screens relevant to current story number
40
+ - Do NOT include all URLs found - filter by story relevance
41
+
42
+ Example: For Story 2.3, parse design brief's mapping table:
43
+ | Story | Screen |
44
+ | 2.3 | Sign In | <- Include this URL
45
+ | 2.1 | Sign Up | <- Skip this URL
46
+
47
+ 4. **Extract structured data (not just URLs):**
48
+ - **Design tool URLs:** Only for screens mapped to current story
49
+ - **Files to extract:** Component filenames from design docs
50
+ - **Installation commands:** shadcn add commands, npm installs
51
+ - **Component mappings:** UI Element -> shadcn Component -> Custom Work tables
52
+ - **Adaptation checklists:** Specific steps from docs
53
+ - **Directives:** "DO NOT BUILD FROM SCRATCH" and similar
54
+
55
+ 5. **Determine if story has UI work:**
56
+ - If no design references found AND story appears to be backend/infra -> skip UX section
57
+ - If design references exist -> store for Phase 3
58
+
59
+ 6. **Store extracted context** for Phase 3
60
+
61
+ ### Phase 2: Create Story Foundation
26
62
 
27
63
  1. Run `/create-story` with the provided epic and story number
28
64
  2. Wait for workflow completion
29
- 3. Output the structured handoff message below with results
65
+ 3. Note the created story file path
66
+
67
+ ### Phase 3: Enhance Story with UX References (CRITICAL)
68
+
69
+ If UX design context was discovered in Phase 1:
70
+
71
+ 1. **Validate story file exists:**
72
+ - If file missing, report error in handoff
73
+ - If file exists, proceed
74
+
75
+ 2. **Check for existing UX section:**
76
+ - If "UX Design References" section already exists, skip enhancement
77
+ - This prevents duplicate sections on re-runs
78
+
79
+ 3. **Read the generated story file and locate insertion point:**
80
+ - Find "## Dev Notes" section
81
+ - Insert UX section as FIRST subsection under Dev Notes (before any other subsections)
82
+ - This ensures UX guidance is prominent, not buried
83
+
84
+ 4. **Add UX Design References section:**
85
+
86
+ ```markdown
87
+ ### UX Design References
88
+
89
+ **CRITICAL: DO NOT BUILD FROM SCRATCH**
90
+
91
+ The UI components for this story are already implemented in MagicPatterns.
92
+
93
+ | Screen/Component | Design Tool | URL | Files to Extract |
94
+ |------------------|-------------|-----|------------------|
95
+ | [Screen Name] | MagicPatterns | [URL] | [Component files] |
96
+
97
+ **Extraction Command:**
98
+ ```
99
+ mcp__magic-patterns__read_files(url: "<design-url>", fileNames: ["<ComponentFile>.tsx"])
100
+ ```
101
+
102
+ **Adaptation Checklist:**
103
+ - [ ] Replace inline styles with project's Tailwind classes if different
104
+ - [ ] Swap custom inputs for shadcn `Input` component
105
+ - [ ] Add `"use client"` directive for Next.js
106
+ - [ ] Wire up to Supabase auth methods
107
+ - [ ] Add proper TypeScript types for form data
108
+ - [ ] Integrate with project's toast notifications
109
+ - [ ] Add i18n translations using `useTranslations`
110
+
111
+ **Reference Documents:**
112
+ - Design Brief: [path to design brief]
113
+ - Component Strategy: [path to component strategy]
114
+ ```
115
+
116
+ 5. **Save the enhanced story file**
30
117
 
31
- ## Handoff Format (Required for Orchestrator)
118
+ ### Phase 4: Output Handoff
32
119
 
33
- After `/create-story` completes, you MUST output this structured handoff:
120
+ After all phases complete, output this structured handoff:
34
121
 
35
122
  ```
36
123
  === AGENT HANDOFF ===
@@ -38,13 +125,14 @@ agent: story-prep-master
38
125
  story: [story number from epic, e.g., "2.3"]
39
126
  status: completed | failed | blocked
40
127
  story_file: [path to created story file]
128
+ ux_design_included: true | false
41
129
  blockers: none | [list any blockers that prevented completion]
42
130
  next_action: proceed | escalate
43
131
  === END HANDOFF ===
44
132
  ```
45
133
 
46
134
  **Status Definitions:**
47
- - `completed`: Story file created successfully, ready for development
135
+ - `completed`: Story file created and enhanced with UX references (if available)
48
136
  - `failed`: Could not create story (missing epic, invalid format, etc.)
49
137
  - `blocked`: External dependency prevents completion
50
138
 
@@ -163,6 +163,55 @@ npm install # or yarn, pnpm, bun
163
163
  cd -
164
164
  ```
165
165
 
166
+ **5.3.5 Environment Files Setup:**
167
+
168
+ Gitignored files are NOT automatically present in worktrees. Detect and offer to copy them.
169
+
170
+ **Detection:**
171
+ ```bash
172
+ # Find gitignored files that exist in main repo root
173
+ git ls-files --others --ignored --exclude-standard 2>/dev/null | grep -E '^\.(env|local)' | head -20
174
+ ```
175
+
176
+ **Filter for environment-related files:**
177
+ - `.env`
178
+ - `.env.local`
179
+ - `.env.development.local`
180
+ - `.env.production.local`
181
+ - `.local`
182
+ - Other files matching `.env*` or `*.local` patterns
183
+
184
+ **If environment files detected:**
185
+
186
+ Display:
187
+ ```
188
+ ⚠️ Environment Files Detected
189
+
190
+ These gitignored files exist in your main repo but won't be in the worktree:
191
+ • .env
192
+ • .env.local
193
+ • [other detected files]
194
+
195
+ [C] Copy these files to worktree (Recommended)
196
+ [S] Skip - I'll set these up manually
197
+ ```
198
+
199
+ **If user chooses [C]:**
200
+ ```bash
201
+ # Copy each detected env file to worktree
202
+ cp {main_repo}/.env {worktree_directory}/.env
203
+ cp {main_repo}/.env.local {worktree_directory}/.env.local
204
+ # ... repeat for each detected file
205
+ ```
206
+
207
+ Display: `✅ Copied X environment file(s) to worktree`
208
+
209
+ **If user chooses [S]:**
210
+ Display: `⚠️ Remember to set up environment files in the worktree before running the app`
211
+
212
+ **If no environment files detected:**
213
+ Skip this section silently, proceed to 5.4.
214
+
166
215
  **5.4 Store worktree config (for sidecar later):**
167
216
  ```yaml
168
217
  worktree_config:
@@ -25,9 +25,13 @@ sprintStatus: '{implementation_artifacts}/sprint-status.yaml'
25
25
  # Agent references
26
26
  storyPrepAgent: '.claude/agents/story-prep-master.md'
27
27
  codeReviewAgent: '.claude/agents/principal-code-reviewer.md'
28
+ deskCheckAgent: '.claude/agents/desk-check-gate.md'
28
29
  specialistAgentsFolder: '.claude/agents/vt-bmad-dev-agents/'
29
30
  fallbackDevAgent: '_bmad/bmm/agents/dev.md'
30
31
 
32
+ # Desk check configuration
33
+ screenshotsFolder: '{implementation_artifacts}/screenshots'
34
+
31
35
  # Configuration
32
36
  coverageThreshold: 80
33
37
  maxRetries: 3
@@ -37,7 +41,7 @@ maxRetries: 3
37
41
 
38
42
  ## STEP GOAL:
39
43
 
40
- To autonomously execute all pending stories in the epic by orchestrating specialized sub-agents through the complete implementation pipeline: create → develop → visual-check (UI only) → review → commit → finalize.
44
+ To autonomously execute all pending stories in the epic by orchestrating specialized sub-agents through the complete implementation pipeline: create → develop → desk-check (UI only) → review → commit → finalize.
41
45
 
42
46
  ## MANDATORY EXECUTION RULES (READ FIRST):
43
47
 
@@ -193,50 +197,67 @@ Task tool:
193
197
  ```
194
198
 
195
199
  **Parse handoff:**
196
- - If status=completed, tests_passed=true → proceed to Phase B.5 (if has_ui_changes) or Phase C
200
+ - If status=completed, tests_passed=true → proceed to Phase C (if has_ui_changes) or Phase D
197
201
  - If status=failed, blockers contains critical → escalate to user
198
202
  - If tests_passed=false → retry (up to maxRetries)
199
203
 
200
204
  ---
201
205
 
202
- ### PHASE B.5: Visual Inspection (Conditional)
206
+ ### PHASE C: Desk Check (Conditional)
203
207
 
204
208
  **Skip this phase if:**
205
209
  - `has_ui_changes` is false AND no UI-related files in `files_changed`
206
- - Chrome extension MCP tools are not available
207
210
 
208
211
  **Update sidecar:**
209
212
  ```yaml
210
- current_phase: "visual"
213
+ current_phase: "desk_check"
211
214
  last_updated: "[timestamp]"
212
215
  ```
213
216
 
214
- **Execute visual inspection using Chrome extension MCP:**
215
-
216
- 1. Ensure dev server is running (`npm run dev` or equivalent)
217
- 2. For each route in `ui_routes_affected`:
218
-
217
+ **Spawn agent:**
219
218
  ```
220
- mcp__claude-in-chrome__navigate({ url: "http://localhost:3000{route}", tabId: [tab] })
221
- mcp__claude-in-chrome__computer({ action: "wait", duration: 2, tabId: [tab] })
222
- mcp__claude-in-chrome__computer({ action: "screenshot", tabId: [tab] })
223
- mcp__claude-in-chrome__read_console_messages({ tabId: [tab], onlyErrors: true })
219
+ Task tool:
220
+ subagent_type: "general-purpose"
221
+ description: "Desk check story N.M"
222
+ prompt: |
223
+ You are the desk-check-gate agent.
224
+ Load and embody: {deskCheckAgent}
225
+
226
+ Task: Visual desk check for story N.M
227
+ Story file: [story_path]
228
+ Dev handoff:
229
+ files_changed: [list from dev handoff]
230
+ has_ui_changes: [bool from dev handoff]
231
+ ui_routes_affected: [list from dev handoff]
232
+
233
+ Configuration:
234
+ dev_server: {dev_server config from workflow.yaml}
235
+ test_credentials: {test_credentials from workflow.yaml}
236
+ screenshots_folder: {screenshotsFolder}/story-N.M/
237
+
238
+ Perform visual inspection per agent protocol.
239
+ Output handoff when complete.
224
240
  ```
225
241
 
226
- 3. Check for:
227
- - Visual rendering issues (obvious layout breaks)
228
- - Console errors related to the changes
229
- - Basic functionality working
242
+ **Parse handoff and route:**
243
+ - `check_status: approved` Phase D (Code Review)
244
+ - `check_status: changes_requested` Story already annotated by agent, back to Phase B
245
+ - `check_status: rejected` → Escalate to user with `escalation_reason`
230
246
 
231
- **If issues found:**
232
- - Log issues but don't block (visual issues are noted in code review)
233
- - Add to handoff: `visual_issues: [list]`
247
+ **Pass visual context to Code Review (Phase D):**
248
+ When spawning code review agent, include:
249
+ ```
250
+ Visual check results:
251
+ status: {desk_check_status}
252
+ screenshots: {screenshot_paths from handoff}
253
+ minor_fixed: {list of auto-fixed issues}
234
254
 
235
- **Proceed to Phase C** (Code Review)
255
+ Include visual considerations in your review.
256
+ ```
236
257
 
237
258
  ---
238
259
 
239
- ### PHASE C: Code Review
260
+ ### PHASE D: Code Review
240
261
 
241
262
  **Update sidecar:**
242
263
  ```yaml
@@ -257,12 +278,18 @@ Task tool:
257
278
  Story file: [story_path]
258
279
  Files changed: [from dev handoff]
259
280
 
281
+ Visual check results (if UI story):
282
+ status: [desk_check_status from Phase C or "skipped"]
283
+ screenshots: [screenshot_paths if any]
284
+ minor_fixed: [list of auto-fixed CSS/Tailwind issues]
285
+
260
286
  Review for:
261
287
  - Code quality and patterns
262
288
  - Test coverage and quality
263
289
  - Security considerations
264
290
  - Performance implications
265
291
  - Adherence to project standards
292
+ - Visual implementation quality (if screenshots provided)
266
293
 
267
294
  When complete, output handoff in this format:
268
295
  === CODE REVIEW HANDOFF ===
@@ -280,13 +307,13 @@ Task tool:
280
307
  ```
281
308
 
282
309
  **Parse handoff:**
283
- - If review_status=approved → proceed to Phase D
310
+ - If review_status=approved → proceed to Phase E
284
311
  - If review_status=changes_requested → go back to Phase B (with review feedback)
285
312
  - If review_status=rejected → escalate to user
286
313
 
287
314
  ---
288
315
 
289
- ### PHASE D: Git Commit
316
+ ### PHASE E: Git Commit
290
317
 
291
318
  **Update sidecar:**
292
319
  ```yaml
@@ -311,7 +338,7 @@ Co-Authored-By: [agent_name] <noreply@anthropic.com>"
311
338
 
312
339
  ---
313
340
 
314
- ### PHASE E: Finalize Story
341
+ ### PHASE F: Finalize Story
315
342
 
316
343
  **Update sidecar:**
317
344
  ```yaml
@@ -90,12 +90,13 @@ If a sidecar state file exists with pending work, step-01 will automatically rou
90
90
 
91
91
  ## AGENT COORDINATION
92
92
 
93
- This workflow orchestrates three specialized agents per story:
93
+ This workflow orchestrates specialized agents per story:
94
94
 
95
95
  | Agent | Purpose | Handoff |
96
96
  |-------|---------|---------|
97
97
  | **story-prep-master** | Create developer-ready story file from epic | Story file path |
98
98
  | **specialist/dev agent** | Implement story with tests (TDD) | Files changed, coverage, test results |
99
+ | **desk-check-gate** | Visual quality gate for UI stories | Check status, screenshots |
99
100
  | **principal-code-reviewer** | Code review, quality assessment, auto-fixes | Approval status, findings |
100
101
 
101
102
  Each agent receives fresh context and returns structured handoff messages for orchestration.
@@ -29,6 +29,7 @@ completion_report: "{output_folder}/epic-reports/epic-completion-{epic_name}-{da
29
29
  # Agent references
30
30
  story_prep_agent: ".claude/agents/story-prep-master.md"
31
31
  code_review_agent: ".claude/agents/principal-code-reviewer.md"
32
+ desk_check_agent: ".claude/agents/desk-check-gate.md"
32
33
  specialist_agents_folder: ".claude/agents/vt-bmad-dev-agents/"
33
34
  fallback_dev_agent: "_bmad/bmm/agents/dev.md"
34
35
 
@@ -85,3 +86,32 @@ sidecar_folder: "{output_folder}/epic-executions"
85
86
 
86
87
  # Sidecar file pattern
87
88
  sidecar_file_pattern: "epic-{epic_number}-state.yaml"
89
+
90
+ # ═══════════════════════════════════════════
91
+ # DESK CHECK CONFIGURATION
92
+ # ═══════════════════════════════════════════
93
+
94
+ # MCP tool preference order (uses probe pattern)
95
+ desk_check_mcp_preference:
96
+ - "chrome" # mcp__claude-in-chrome__*
97
+ - "playwright" # mcp__playwright__*
98
+
99
+ # Viewport configuration
100
+ desk_check_viewports:
101
+ desktop: { width: 1280, height: 720 }
102
+ mobile: { width: 375, height: 667 }
103
+
104
+ # Screenshot storage
105
+ screenshots_folder: "{implementation_artifacts}/screenshots"
106
+
107
+ # Dev server configuration
108
+ dev_server:
109
+ start_command: "" # Auto-detect: npm run dev, yarn dev, etc.
110
+ port: 3000 # Default, will probe common ports if fails
111
+ health_check_url: "http://localhost:{port}"
112
+ startup_timeout_ms: 30000
113
+
114
+ # Test credentials for auth-protected routes
115
+ test_credentials:
116
+ email: "test@test.com"
117
+ password: "password"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@torka/claude-workflows",
3
- "version": "0.6.3",
3
+ "version": "0.7.0",
4
4
  "description": "Claude Code workflow helpers: epic automation, git cleanup, agents, and design workflows",
5
5
  "keywords": [
6
6
  "claude-code",
@@ -10,8 +10,9 @@ Only use this template when explicitly requested for non-story tasks (research,
10
10
  ---
11
11
  name: {agent-name}
12
12
  description: {Clear description of when/why to use this agent. Be specific about triggers.}
13
- tools: {Comma-separated list of allowed tools}
14
13
  model: {sonnet|haiku|opus|inherit}
14
+ # Optional: Only use disallowedTools if you need to restrict specific tools
15
+ # disallowedTools: {tools to deny, e.g., Write, Edit for read-only agents}
15
16
  ---
16
17
 
17
18
  # Role & Purpose
@@ -24,11 +25,32 @@ This agent should be used when:
24
25
  - {Trigger condition 1}
25
26
  - {Trigger condition 2}
26
27
 
28
+ ## First Action: MCP Availability Check
29
+
30
+ Before starting work:
31
+ 1. Review task requirements for MCP dependencies
32
+ 2. If critical MCP unavailable:
33
+ - Output: `ESCALATE: Required MCP '{mcp-name}' not available.`
34
+ - HALT and wait for user action
35
+ 3. If optional MCP unavailable: note limitation and proceed
36
+
27
37
  ## Core Responsibilities
28
38
 
29
39
  1. {Primary responsibility}
30
40
  2. {Secondary responsibility}
31
41
 
42
+ ## MCP Usage Patterns (if applicable)
43
+
44
+ ### ShadCN Components
45
+ - ALWAYS call demo/docs first before implementing
46
+ - Verify component API, variants, props
47
+ - Never guess—verify first
48
+
49
+ ### MagicPatterns Designs
50
+ - When link provided, use MCP to fetch code
51
+ - NEVER build from scratch
52
+ - Adapt fetched code for project structure
53
+
32
54
  ## Workflow
33
55
 
34
56
  1. {First step}
@@ -43,6 +65,7 @@ This agent should be used when:
43
65
 
44
66
  - {Limitation 1}
45
67
  - {Limitation 2}
68
+ - MUST escalate if critical MCP is unavailable
46
69
  ```
47
70
 
48
71
  ---
@@ -53,12 +76,14 @@ This agent should be used when:
53
76
  ---
54
77
  name: {name}
55
78
  description: {When to use this agent}
56
- tools: Read, Glob, Grep
57
79
  model: sonnet
80
+ # disallowedTools: Write, Edit # Uncomment for read-only agents
58
81
  ---
59
82
 
60
83
  You are a {role}. Your job is to {primary task}.
61
84
 
85
+ **First Action**: Check MCP availability. If critical MCP missing → ESCALATE and HALT.
86
+
62
87
  When invoked:
63
88
  1. {Step 1}
64
89
  2. {Step 2}
@@ -69,10 +94,12 @@ When invoked:
69
94
 
70
95
  ## Common Non-Story Agent Patterns
71
96
 
72
- | Agent Type | Use Case | Key Tools |
73
- |------------|----------|-----------|
74
- | `explorer` | Codebase research, file discovery | Read, Glob, Grep |
75
- | `documenter` | Documentation-only updates | Read, Write |
97
+ | Agent Type | Use Case | Restrictions |
98
+ |------------|----------|--------------|
99
+ | `explorer` | Codebase research, file discovery | `disallowedTools: Write, Edit` |
100
+ | `documenter` | Documentation-only updates | None (inherits all) |
101
+
102
+ **Note**: Use `disallowedTools` for restrictions instead of explicit `tools` lists. This preserves MCP access while restricting specific dangerous operations.
76
103
 
77
104
  ---
78
105
 
@@ -81,10 +108,16 @@ When invoked:
81
108
  Before saving a non-story agent, verify:
82
109
 
83
110
  1. **Name format**: `{lowercase-alphanumeric-hyphens}`
84
- 2. **Tools list**: Only valid Claude Code tools
111
+ 2. **Tool access**:
112
+ - ✅ Best: No `tools:` field (inherits all including MCPs)
113
+ - ✅ OK: `disallowedTools:` for specific restrictions (e.g., read-only agents)
114
+ - ❌ Avoid: Explicit `tools:` list (blocks MCP access)
85
115
  3. **Model**: `sonnet`, `haiku`, `opus`, or `inherit`
86
116
  4. **Description**: 20-300 characters, specific triggers
87
117
  5. **Content includes**:
88
118
  - Clear activation conditions
119
+ - **MCP Availability Check** as first action
120
+ - Escalation behavior for missing critical MCPs
89
121
  - Defined workflow steps
90
122
  - Expected output format
123
+ - MCP usage patterns if agent may use ShadCN/MagicPatterns
@@ -25,33 +25,15 @@ Create custom Claude Code sub-agents tailored to your project's needs. All agent
25
25
 
26
26
  This skill follows a 5-step interactive process:
27
27
 
28
- 0. **Memory Check** - Check registry for reusable patterns (may skip to step 4)
29
28
  1. **Context Assessment** - Analyze project and task requirements
30
29
  2. **Agent Design** - Determine needed agents and their specialties
31
30
  3. **Community Research** - Reference GitHub repos for patterns and inspiration
32
31
  4. **Agent Creation** - Generate and validate agent specification files
33
- 5. **Deployment & Registry** - Save files, verify, and optionally save to registry
32
+ 5. **Deployment** - Save files and verify installation
34
33
 
35
34
  ---
36
35
 
37
- ## Step 0: Quick Start (Always First)
38
-
39
- **Check for existing patterns before designing from scratch.**
40
-
41
- ### Check Registry & Templates
42
- ```bash
43
- cat .claude/skills/agent-creator/REGISTRY.yaml 2>/dev/null
44
- ls .claude/skills/agent-creator/templates/ 2>/dev/null
45
- ```
46
-
47
- ### If Match Found
48
- - Ask: "I found a pattern for [X]. Reuse it or create fresh?"
49
- - If reuse: Skip to Step 4 with the template
50
- - If fresh: Continue to Step 1
51
-
52
- ### If No Match
53
- - For simple requests ("quick agent for..."): Skip to Step 4
54
- - For complex needs: Continue to Step 1
36
+ ## Step 0: Quick Start
55
37
 
56
38
  ### Consider Built-in Agents First
57
39
  Before creating custom agents, check if built-ins suffice:
@@ -61,6 +43,9 @@ Before creating custom agents, check if built-ins suffice:
61
43
 
62
44
  Only create custom agents when you need project-specific knowledge or custom workflows.
63
45
 
46
+ For simple requests ("quick agent for..."): Skip to Step 4.
47
+ For complex needs: Continue to Step 1.
48
+
64
49
  ---
65
50
 
66
51
  ## Step 1: Context Assessment
@@ -75,7 +60,7 @@ ls -la . && ls -la src/ 2>/dev/null
75
60
  # Check existing agents
76
61
  ls -la .claude/agents/vt-bmad-dev-agents/ 2>/dev/null || echo "No agents directory yet"
77
62
 
78
- # Check existing templates in registry
63
+ # Check existing templates
79
64
  ls -la .claude/skills/agent-creator/templates/ 2>/dev/null || echo "No templates yet"
80
65
  ```
81
66
 
@@ -107,27 +92,31 @@ Based on context, design the agent architecture:
107
92
 
108
93
  All agents below accept a story identifier and invoke `/dev-story`. The specialty provides context.
109
94
 
110
- | Agent Type | Specialty Focus | Key Tools |
111
- |------------|-----------------|-----------|
112
- | `frontend` | UI/React component stories | Read, Glob, Grep, Bash, Edit, Write |
113
- | `backend` | API/server-side stories | Read, Glob, Grep, Bash, Edit, Write |
114
- | `fullstack` | End-to-end feature stories | Read, Glob, Grep, Bash, Edit, Write |
115
- | `tester` | Test-focused stories | Read, Glob, Grep, Bash, Edit, Write |
116
- | `database` | Schema/migration stories | Read, Glob, Grep, Bash, Edit, Write |
117
- | `api-integrator` | External API integration stories | Read, Glob, Grep, Bash, Edit, Write, WebFetch |
95
+ | Agent Type | Specialty Focus | Notes |
96
+ |------------|-----------------|-------|
97
+ | `frontend` | UI/React component stories | May use ShadCN, MagicPatterns MCPs |
98
+ | `backend` | API/server-side stories | May use database MCPs |
99
+ | `fullstack` | End-to-end feature stories | Broad MCP access beneficial |
100
+ | `tester` | Test-focused stories | May use Playwright MCP |
101
+ | `database` | Schema/migration stories | May use database MCPs |
102
+ | `api-integrator` | External API integration stories | May use Context7 MCP for docs |
103
+
104
+ **Note**: Agents inherit all available tools by default (including MCPs). Only use `disallowedTools` when explicit restrictions are needed.
118
105
 
119
106
  ### Non-Story Agent Patterns (Rare - Only When Explicitly Requested)
120
107
 
121
- | Agent Type | Use Case | Key Tools |
122
- |------------|----------|-----------|
123
- | `explorer` | Codebase research, file discovery | Read, Glob, Grep |
124
- | `documenter` | Documentation-only updates | Read, Write |
108
+ | Agent Type | Use Case | Restrictions |
109
+ |------------|----------|--------------|
110
+ | `explorer` | Codebase research, file discovery | `disallowedTools: Write, Edit` |
111
+ | `documenter` | Documentation-only updates | None (inherits all) |
125
112
 
126
113
  ### Design Considerations
127
114
  - **Story-first**: Default to story-based agents that invoke `/dev-story`
128
115
  - **Single responsibility**: Each agent has one specialty focus
129
116
  - **Minimal wrapper**: Agents delegate to `/dev-story` for all implementation
130
117
  - **Model selection**: Use `sonnet` for story agents (complex reasoning needed)
118
+ - **Tool inheritance**: Omit `tools:` field so agents inherit all tools including MCPs
119
+ - **MCP-aware**: Agents should check MCP availability and escalate if critical MCPs are missing
131
120
 
132
121
  ### CHECKPOINT 2
133
122
  Present agent design to user:
@@ -209,9 +198,10 @@ Before presenting to user, validate each agent:
209
198
  - Valid: `frontend`, `api-client`, `db-migrator`
210
199
  - Invalid: `my_agent`, `MyAgent`, `FRONTEND`
211
200
 
212
- 2. **Tools list**: Only valid Claude Code tools
213
- - Valid: Read, Write, Edit, Glob, Grep, Bash, WebFetch, WebSearch, Task, LSP
214
- - Invalid: AskUserQuestion, CustomTool
201
+ 2. **Tool access**: Prefer inheritance over explicit lists
202
+ - ✅ Best: Omit `tools:` field entirely (inherits all including MCPs)
203
+ - ✅ OK: Use `disallowedTools:` to restrict specific dangerous tools
204
+ - ⚠️ Avoid: Explicit `tools:` list (blocks MCP access)
215
205
 
216
206
  3. **Model**: Must be one of: `sonnet`, `haiku`, `opus`, `inherit`
217
207
 
@@ -225,6 +215,13 @@ Before presenting to user, validate each agent:
225
215
  - Content includes "Required Input" section for story identifier
226
216
  - Content includes `/dev-story` invocation instruction
227
217
  - Content does NOT include direct implementation steps (only /dev-story delegation)
218
+ - Content includes MCP availability check guidance
219
+
220
+ 7. **MCP awareness** (for implementation agents):
221
+ - Content includes MCP availability check as first action
222
+ - Content includes escalation behavior for missing critical MCPs
223
+ - If UI-focused: includes ShadCN demo-first pattern
224
+ - If design link expected: includes MagicPatterns handling
228
225
 
229
226
  ### CHECKPOINT 4
230
227
  For each agent, show:
@@ -275,38 +272,105 @@ Present summary:
275
272
  - How to use them
276
273
  - How to clean them up later
277
274
 
278
- **Ask user**: "Would you like to save this pattern to the registry for future reuse?"
275
+ **Confirm completion with user.**
276
+
277
+ ## MCP Integration Guidelines
279
278
 
280
- ### If User Wants to Save Pattern
281
- Update `.claude/skills/agent-creator/REGISTRY.yaml`:
279
+ ### Tool Inheritance (Critical)
280
+
281
+ **DO NOT explicitly list tools in agent frontmatter** unless you need to restrict access.
282
282
 
283
- 1. Add entry to `successful_agents`:
284
283
  ```yaml
285
- - name: {agent-name-without-tmp}
286
- purpose: What task/specialization it handles
287
- tools: [list of tools]
288
- model: model used
289
- created: YYYY-MM-DD
290
- project_context: What project/task it was created for
284
+ # ❌ WRONG - Blocks MCP access
285
+ tools: Read, Glob, Grep, Bash, Edit, Write
286
+
287
+ # CORRECT - Inherits all tools including MCPs
288
+ # (omit the tools field entirely)
289
+
290
+ # ✅ ALSO CORRECT - Restrict specific dangerous tools only
291
+ disallowedTools: Bash
291
292
  ```
292
293
 
293
- 2. Optionally save template file:
294
- ```bash
295
- mkdir -p .claude/skills/agent-creator/templates
296
- cp .claude/agents/vt-bmad-dev-agents/{name}.md .claude/skills/agent-creator/templates/{name}.md
294
+ When `tools:` is omitted, agents inherit all available tools from the main conversation, including any configured MCP tools.
295
+
296
+ ### MCP Availability Check (Required First Step)
297
+
298
+ All agents must check MCP availability before starting work:
299
+
300
+ ```markdown
301
+ ## First Action: MCP Availability Check
302
+
303
+ Before proceeding with implementation:
304
+ 1. Review the story/task requirements for MCP dependencies
305
+ 2. If requirements mention UI components → check for ShadCN MCP
306
+ 3. If requirements include a MagicPatterns link → check for MagicPatterns MCP
307
+ 4. If requirements need external API docs → check for Context7 MCP
308
+
309
+ **If critical MCP is unavailable:**
310
+ - Output: `ESCALATE: Required MCP '{mcp-name}' not available. Please enable it and retry.`
311
+ - Include in handoff: `status: blocked`, `blockers: ["MCP {name} unavailable"]`
312
+ - HALT - Do not attempt workarounds for critical MCPs
313
+
314
+ **If optional MCP is unavailable:**
315
+ - Note the limitation
316
+ - Proceed with fallback approach
317
+ - Document in handoff: `notes: "Built without {mcp} - manual review recommended"`
297
318
  ```
298
319
 
299
- 3. Update `stats.total_agents_created`
320
+ ### ShadCN MCP Pattern
300
321
 
301
- ### If Agent Doesn't Work (Later Feedback)
302
- If user reports issues later, record in `failed_patterns`:
303
- ```yaml
304
- - name: agent-name
305
- reason: Why it failed
306
- lesson: What to do differently
322
+ When implementing UI components with ShadCN MCP available:
323
+
324
+ ```markdown
325
+ ## ShadCN Component Implementation
326
+
327
+ **ALWAYS call demo/docs first before implementing any ShadCN component:**
328
+
329
+ 1. Call the component demo tool to see usage:
330
+ - Review available variants, sizes, and props
331
+ - Note any required imports or dependencies
332
+
333
+ 2. Implement following the exact patterns shown:
334
+ - Use correct import paths
335
+ - Apply proper variant props
336
+ - Follow composition patterns for complex components
337
+
338
+ 3. Never guess component APIs—always verify first
339
+
340
+ Example flow:
341
+ - Need a Button? → Call shadcn demo for Button → See variants (default, destructive, outline, etc.) → Implement with correct props
307
342
  ```
308
343
 
309
- **Confirm completion with user.**
344
+ ### MagicPatterns MCP Pattern
345
+
346
+ When user provides a MagicPatterns link:
347
+
348
+ ```markdown
349
+ ## MagicPatterns Link Handling
350
+
351
+ **NEVER build from scratch when a MagicPatterns link is provided.**
352
+
353
+ 1. Extract the pattern/design ID from the link
354
+ 2. Use MagicPatterns MCP to fetch the generated code
355
+ 3. Adapt the fetched code for the project:
356
+ - Update imports to match project structure
357
+ - Apply project's styling conventions (Tailwind config, CSS variables)
358
+ - Integrate with project's state management if needed
359
+ - Ensure component follows project's file organization
360
+
361
+ 4. The MagicPatterns design represents user's intent—preserve the design, adapt the implementation
362
+ ```
363
+
364
+ ### Background vs Foreground Agent Warning
365
+
366
+ **Critical limitation**: MCP tools are NOT available in background subagents.
367
+
368
+ If your agent needs MCP access:
369
+ - It must run in foreground mode
370
+ - Background tasks that need MCPs will fail silently
371
+ - Consider this when designing agent workflows
372
+
373
+ ---
310
374
 
311
375
  ## Quick Reference
312
376
 
@@ -317,6 +381,8 @@ See the dedicated template files for full examples and minimal templates:
317
381
  - **Non-Story**: `NON-STORY-AGENT-TEMPLATE.md`
318
382
 
319
383
  ### Available Tools Reference
384
+
385
+ **Core Tools** (always available):
320
386
  | Tool | Purpose |
321
387
  |------|---------|
322
388
  | `Read` | Read file contents |
@@ -330,6 +396,16 @@ See the dedicated template files for full examples and minimal templates:
330
396
  | `Task` | Delegate to subagents |
331
397
  | `LSP` | Code intelligence |
332
398
 
399
+ **MCP Tools** (available when configured):
400
+ | MCP | Common Tools | Use Case |
401
+ |-----|--------------|----------|
402
+ | ShadCN | Component demos, installation | UI component implementation |
403
+ | MagicPatterns | Get pattern code | Fetch designed components |
404
+ | Context7 | Query docs | Up-to-date library documentation |
405
+ | Playwright | Browser automation | E2E testing, screenshots |
406
+
407
+ **Remember**: Omit `tools:` field to inherit all available tools including MCPs.
408
+
333
409
  ### Model Selection Guide
334
410
  | Model | Best For | Cost |
335
411
  |-------|----------|------|
@@ -10,7 +10,6 @@
10
10
  ---
11
11
  name: {agent-name}
12
12
  description: {Specialty} story executor. Requires story number or name.
13
- tools: Read, Glob, Grep, Bash, Edit, Write
14
13
  model: {sonnet|haiku|opus|inherit}
15
14
  ---
16
15
 
@@ -24,6 +23,24 @@ You are a {specialty} agent. Your role is to execute user stories with a focus o
24
23
  - Story number: e.g., "3.2", "story-3.2", "S3.2"
25
24
  - Story name: e.g., "user authentication flow"
26
25
 
26
+ ## First Action: MCP Availability Check
27
+
28
+ Before invoking /dev-story, verify required tools are available:
29
+
30
+ 1. **Review story requirements** for MCP dependencies:
31
+ - UI components mentioned? → Need ShadCN MCP
32
+ - MagicPatterns link provided? → Need MagicPatterns MCP
33
+ - External API integration? → Context7 MCP helpful
34
+
35
+ 2. **If critical MCP is unavailable:**
36
+ - Output: `ESCALATE: Required MCP '{mcp-name}' not available. Please enable it and retry.`
37
+ - Set handoff: `status: blocked`, `blockers: ["MCP {name} unavailable"]`
38
+ - HALT immediately
39
+
40
+ 3. **If optional MCP is unavailable:**
41
+ - Note limitation and proceed
42
+ - Document in handoff notes
43
+
27
44
  ## Single Responsibility: Execute /dev-story
28
45
 
29
46
  **Your ONLY job is to invoke /dev-story with the provided story identifier.**
@@ -40,6 +57,21 @@ The /dev-story workflow handles ALL implementation work:
40
57
  - Validating against acceptance criteria
41
58
  - Updating the story file with completion status
42
59
 
60
+ ## MCP Usage Patterns
61
+
62
+ ### ShadCN Components
63
+ When implementing UI components with ShadCN MCP:
64
+ 1. **ALWAYS call demo/docs first** before implementing any component
65
+ 2. Review available variants, sizes, and props
66
+ 3. Implement following the exact patterns shown
67
+ 4. Never guess component APIs—verify first
68
+
69
+ ### MagicPatterns Designs
70
+ When a MagicPatterns link is provided:
71
+ 1. **NEVER build from scratch**—use the MCP to fetch the code
72
+ 2. Adapt fetched code for project structure
73
+ 3. Preserve the design intent, adapt the implementation
74
+
43
75
  ## TDD Requirements
44
76
 
45
77
  These practices are enforced by /dev-story. Include them so the workflow follows TDD:
@@ -59,8 +91,10 @@ This context is passed to /dev-story for implementation guidance.
59
91
  ## Constraints
60
92
 
61
93
  - MUST receive a valid story identifier before proceeding
94
+ - MUST check MCP availability before starting work
62
95
  - MUST NOT implement anything directly - delegate to /dev-story
63
96
  - MUST NOT skip the /dev-story invocation
97
+ - MUST escalate if critical MCP is unavailable
64
98
 
65
99
  ## If /dev-story Fails
66
100
 
@@ -106,7 +140,6 @@ After /dev-story completes, you MUST output this structured handoff:
106
140
  ---
107
141
  name: {name}
108
142
  description: {Specialty} story executor. Requires story number or name.
109
- tools: Read, Glob, Grep, Bash, Edit, Write
110
143
  model: sonnet
111
144
  ---
112
145
 
@@ -114,7 +147,13 @@ You are a {specialty} agent executing stories via /dev-story.
114
147
 
115
148
  **Required Input**: Story number (e.g., "3.2") or story name
116
149
 
117
- **On Launch**: Immediately execute `/dev-story {story-identifier}`
150
+ **First Action**: Check MCP availability. If critical MCP missing → ESCALATE and HALT.
151
+
152
+ **On Launch**: Execute `/dev-story {story-identifier}`
153
+
154
+ **MCP Patterns**:
155
+ - ShadCN: Call demo first, then implement with correct props
156
+ - MagicPatterns: Fetch code via MCP, adapt for project (never build from scratch)
118
157
 
119
158
  All implementation is handled by /dev-story. You provide {specialty} context.
120
159
 
@@ -131,7 +170,6 @@ All implementation is handled by /dev-story. You provide {specialty} context.
131
170
  ---
132
171
  name: frontend
133
172
  description: Frontend/React story executor. Requires story number or name.
134
- tools: Read, Glob, Grep, Bash, Edit, Write
135
173
  model: sonnet
136
174
  ---
137
175
 
@@ -141,13 +179,35 @@ You are a frontend specialist executing stories via /dev-story.
141
179
 
142
180
  **Required Input**: Story number (e.g., "3.2") or story name
143
181
 
144
- **On Launch**: Immediately execute `/dev-story {story-identifier}`
182
+ ## First Action: MCP Availability Check
183
+
184
+ Before starting:
185
+ 1. Check if story involves UI components → verify ShadCN MCP available
186
+ 2. Check if MagicPatterns link provided → verify MagicPatterns MCP available
187
+ 3. If critical MCP missing: `ESCALATE: Required MCP '{name}' not available` → HALT
188
+
189
+ **On Launch**: Execute `/dev-story {story-identifier}`
145
190
 
146
191
  All implementation is handled by /dev-story. Your frontend focus provides context for:
147
192
  - React component patterns
148
193
  - UI/UX considerations
149
194
  - CSS/styling approaches
150
195
 
196
+ ## MCP Usage Patterns
197
+
198
+ ### ShadCN Components
199
+ 1. **ALWAYS call demo first** before implementing any component
200
+ 2. Review variants, sizes, props from the demo output
201
+ 3. Implement with correct imports and props
202
+ 4. Never guess—verify component API first
203
+
204
+ ### MagicPatterns Designs
205
+ When user provides a MagicPatterns link:
206
+ 1. **NEVER build from scratch**
207
+ 2. Use MCP to fetch the generated code
208
+ 3. Adapt for project: update imports, apply project styles
209
+ 4. Preserve design intent
210
+
151
211
  ## TDD Requirements
152
212
 
153
213
  - **Red-Green-Refactor**: Write failing test → make it pass → improve code
@@ -176,7 +236,7 @@ After /dev-story completes, output:
176
236
  tests_run: [count]
177
237
  tests_failed: [count]
178
238
  coverage: [percentage]
179
- blockers: none | [list]
239
+ blockers: none | [list MCP unavailability here if relevant]
180
240
  next_action: proceed | escalate | retry
181
241
  error_summary: null | "[error if any]"
182
242
  === END HANDOFF ===
@@ -189,11 +249,17 @@ After /dev-story completes, output:
189
249
  Before saving a story-based agent, verify:
190
250
 
191
251
  1. **Name format**: `{lowercase-alphanumeric-hyphens}`
192
- 2. **Tools list**: Only valid Claude Code tools
252
+ 2. **Tool access**:
253
+ - ✅ Best: No `tools:` field (inherits all including MCPs)
254
+ - ✅ OK: `disallowedTools:` for specific restrictions
255
+ - ❌ Avoid: Explicit `tools:` list (blocks MCP access)
193
256
  3. **Model**: `sonnet`, `haiku`, `opus`, or `inherit`
194
257
  4. **Description**: Includes "Requires story number or name"
195
258
  5. **Content includes**:
196
259
  - "Required Input" section for story identifier
260
+ - **MCP Availability Check** as first action
197
261
  - `/dev-story` invocation instruction
262
+ - **MCP Usage Patterns** (ShadCN demo-first, MagicPatterns fetch)
263
+ - Escalation behavior for missing critical MCPs
198
264
  - NO direct implementation steps (only delegation)
199
265
  - **Handoff Format section** with `=== AGENT HANDOFF ===` block (required for orchestrator workflows)
@@ -1,107 +0,0 @@
1
- # Agent Creator Registry
2
- # Tracks successfully created agents for reuse and learning
3
-
4
- # Last updated by skill
5
- last_updated: 2026-01-12
6
-
7
- # Successfully created agents that can be reused
8
- # Format:
9
- # - name: agent-name (without tmp- prefix)
10
- # purpose: what task/specialization it handles
11
- # tools: [list of tools]
12
- # model: model used
13
- # created: date
14
- # project_context: what project/task it was created for
15
- # success_notes: what worked well
16
- # template_file: path to the template if saved
17
- # reuse_count: how many times this pattern was reused
18
-
19
- successful_agents:
20
- - name: upgrade-specialist
21
- purpose: Framework/SDK upgrades (Next.js, React, TypeScript, Supabase)
22
- tools: [Read, Glob, Grep, Bash, Edit, Write]
23
- model: sonnet
24
- created: 2026-01-12
25
- project_context: VT SaaS Template - Epic 1 Foundation Modernization (Stories 1.1-1.4)
26
- success_notes: Story-based agent with upgrade best practices, breaking change handling, validation checklist
27
- template_file: null
28
- reuse_count: 0
29
-
30
- - name: refactor-specialist
31
- purpose: Code refactoring and rebranding (search/replace, naming consistency)
32
- tools: [Read, Glob, Grep, Bash, Edit, Write]
33
- model: sonnet
34
- created: 2026-01-12
35
- project_context: VT SaaS Template - Epic 1 Foundation Modernization (Story 1.5)
36
- success_notes: Story-based agent with grep strategies, i18n awareness, metadata updates
37
- template_file: null
38
- reuse_count: 0
39
-
40
- - name: error-handling-specialist
41
- purpose: Error boundaries, API error standardization, graceful failure patterns
42
- tools: [Read, Glob, Grep, Bash, Edit, Write]
43
- model: sonnet
44
- created: 2026-01-12
45
- project_context: VT SaaS Template - Epic 1 Foundation Modernization (Stories 1.6-1.7)
46
- success_notes: Story-based agent with error boundary hierarchy, HTTP status code patterns, user-friendly messaging
47
- template_file: null
48
- reuse_count: 0
49
-
50
- - name: qa-validator
51
- purpose: CI/CD validation, feature testing, post-upgrade verification, performance audits
52
- tools: [Read, Glob, Grep, Bash, Edit, Write]
53
- model: sonnet
54
- created: 2026-01-12
55
- project_context: VT SaaS Template - Epic 1 Foundation Modernization (Stories 1.8-1.9)
56
- success_notes: Story-based agent with CI/CD checks, manual testing checklists, Lighthouse audit guidance
57
- template_file: null
58
- reuse_count: 0
59
-
60
- # Example entry:
61
- # successful_agents:
62
- # - name: api-integrator
63
- # purpose: External API integration with error handling
64
- # tools: [Read, Write, WebFetch, Bash]
65
- # model: sonnet
66
- # created: 2025-01-15
67
- # project_context: HealthCompanion - Dify API integration
68
- # success_notes: Good at handling SSE streams, rate limiting
69
- # template_file: .claude/skills/agent-creator/templates/api-integrator.md
70
- # reuse_count: 0
71
-
72
- # Agent patterns that didn't work well (learn from failures)
73
- failed_patterns: []
74
-
75
- # Example:
76
- # failed_patterns:
77
- # - name: mega-agent
78
- # reason: Too many responsibilities, confused context
79
- # lesson: Keep agents single-purpose
80
-
81
- # Preferred combinations for common tasks
82
- recommended_combinations:
83
- feature_development:
84
- description: Full feature implementation workflow
85
- agents: [explorer, implementer, tester, reviewer]
86
-
87
- bug_fix:
88
- description: Debug and fix issues
89
- agents: [debugger, tester]
90
-
91
- refactor:
92
- description: Code restructuring
93
- agents: [explorer, refactorer, tester]
94
-
95
- api_integration:
96
- description: External service integration
97
- agents: [api-integrator, tester]
98
-
99
- documentation:
100
- description: Documentation updates
101
- agents: [explorer, documenter]
102
-
103
- # Statistics
104
- stats:
105
- total_agents_created: 4
106
- total_reuses: 0
107
- most_reused_agent: null