opencodekit 0.12.2 → 0.12.4

package/dist/template/.opencode/command/fix-ui.md

@@ -1,51 +1,25 @@
 ---
-description: Analyze and fix UI issues
+description: Fix UI issues with visual verification
 argument-hint: "<issue or bead-id> [--a11y]"
 agent: build
 ---
 
 # Fix UI: $ARGUMENTS
 
-## Load Beads Skill
+Fix visual issues. Capture before/after, verify responsiveness.
 
-```typescript
-skill({ name: "beads" });
-```
-
-## Options
-
-- `--a11y`: Include full accessibility audit
-
-## Phase 1: Load Context
-
-**Check for bead context:**
-
-```typescript
-bd_show({ id: "$ARGUMENTS" });
-```
+## Load Context
 
-**Load skill:**
-
-```typescript
-skill({ name: "frontend-aesthetics" });
-```
-
-**Reserve UI files:**
-
-```typescript
-bd_reserve({
-  paths: ["src/components/**", "src/styles/**"],
-  reason: "Fixing UI: $ARGUMENTS",
-  ttl: 600,
-});
+```bash
+bd show $ARGUMENTS
+cat .beads/artifacts/$ARGUMENTS/spec.md 2>/dev/null
 ```
 
-## Phase 2: Capture Before State
+## Capture Before State
 
-Take screenshot before making changes:
+Take screenshot before changes. Save to `.beads/artifacts/$ARGUMENTS/before.png`.
 
 ```typescript
-// Using Playwright skill
 skill({ name: "playwright" });
 skill_mcp({
   skill_name: "playwright",
@@ -54,255 +28,96 @@ skill_mcp({
 });
 ```
 
-Or use browser DevTools:
+## Analyze
 
-```typescript
-skill({ name: "chrome-devtools" });
-```
-
-Save screenshot to `.beads/artifacts/<bead-id>/before.png`
-
-## Phase 3: Analyze with Vision
-
-Delegate to @vision for initial assessment:
+Delegate to @vision:
 
 ```typescript
 task({
   subagent_type: "vision",
   description: "Analyze UI issue",
-  prompt: `
-TASK: Analyze UI issue: $ARGUMENTS
-
-EXPECTED OUTCOME:
-- Describe the visual problem in detail
-- Identify affected components
-- Suggest fix approach
-- Check against frontend-aesthetics anti-patterns
-
-MUST DO:
-- Load the before screenshot
-- Identify specific CSS/component issues
-- Check for AI slop patterns (Inter font, purple gradients, flat backgrounds)
-- Assess color contrast and typography
-
-MUST NOT DO:
-- Don't make changes, just analyze
-- Don't suggest generic solutions
-
-CONTEXT:
-- Screenshot: .beads/artifacts/<bead-id>/before.png
-- Issue: $ARGUMENTS
-  `,
+  prompt:
+    "Analyze UI issue: $ARGUMENTS\n\nIdentify:\n- The visual problem\n- Affected components\n- Suggested fix approach",
 });
 ```
 
-## Phase 4: Estimate Complexity
-
-| Signals                                  | Estimate | Approach        |
-| ---------------------------------------- | -------- | --------------- |
-| Single component, CSS tweak              | S (~10)  | Quick fix       |
-| Multiple components, layout issue        | M (~30)  | Systematic fix  |
-| Cross-cutting, design system change      | L (~100) | Design review   |
-| Responsive + a11y + multiple breakpoints | XL       | Decompose first |
-
-## Phase 5: Design System Check
-
-Before fixing, verify design tokens:
+## Check Design System
 
 ```bash
-# Check for design tokens/variables
-grep -r "var(--" src/styles/ | head -20
-grep -r "theme\." src/components/ | head -20
+grep -r "var(--" src/styles/ | head -10
+grep -r "theme\." src/components/ | head -10
 ```
 
-**Verify fix will use:**
+Use existing tokens, not hardcoded values:
 
-- [ ] Existing color tokens (not hardcoded colors)
-- [ ] Existing spacing scale (not arbitrary px values)
-- [ ] Existing typography scale
-- [ ] Existing breakpoints
+- ✅ Existing color tokens
+- ✅ Existing spacing scale
+- ✅ Existing typography scale
+- ❌ Hardcoded colors/px values
 
-## Phase 6: Implement Fix
+## Avoid AI Slop
 
-**Anti-AI-slop checklist:**
+| Avoid                      | Use Instead             |
+| -------------------------- | ----------------------- |
+| Inter/system-ui everywhere | Distinctive fonts       |
+| Purple/blue gradients      | Project color palette   |
+| Flat backgrounds           | Subtle depth/texture    |
+| Generic rounded corners    | Consistent radius scale |
 
-| Avoid                        | Use Instead                    |
-| ---------------------------- | ------------------------------ |
-| Inter/system-ui everywhere   | Distinctive, intentional fonts |
-| Purple/blue gradients        | Cohesive project color palette |
-| Flat, shadowless backgrounds | Subtle depth and texture       |
-| Generic rounded corners      | Consistent border-radius scale |
-| No motion                    | Meaningful, subtle animations  |
-
-**Make changes:**
+## Implement Fix
 
 1. Identify affected files
-2. Make minimal, focused CSS/component changes
-3. Use existing design tokens
-4. Test in browser during development
-
-## Phase 7: Capture After State
-
-Take screenshot after changes:
-
-```typescript
-skill_mcp({
-  skill_name: "playwright",
-  tool_name: "browser_screenshot",
-  arguments: '{"name": "after-fix"}',
-});
-```
+2. Make minimal CSS/component changes
+3. Use design tokens
+4. Test in browser
 
-Save to `.beads/artifacts/<bead-id>/after.png`
+## Capture After State
 
-## Phase 8: Verification
+Save to `.beads/artifacts/$ARGUMENTS/after.png`.
 
-### Visual Verification
+## Verify
 
-```typescript
-task({
-  subagent_type: "vision",
-  description: "Compare before/after",
-  prompt: `
-Compare these screenshots:
-- Before: .beads/artifacts/<bead-id>/before.png
-- After: .beads/artifacts/<bead-id>/after.png
-
-Verify:
-1. Issue is fixed
-2. No visual regressions
-3. Follows frontend-aesthetics principles
-4. No AI slop patterns introduced
-  `,
-});
-```
-
-### Responsive Verification
-
-Test at multiple breakpoints:
-
-| Breakpoint | Width  | Check                |
-| ---------- | ------ | -------------------- |
-| Mobile     | 375px  | Layout doesn't break |
-| Tablet     | 768px  | Spacing appropriate  |
-| Desktop    | 1280px | Full layout correct  |
-
-```typescript
-skill_mcp({
-  skill_name: "playwright",
-  tool_name: "browser_resize",
-  arguments: '{"width": 375, "height": 812}',
-});
-// Screenshot and verify
-```
+**Visual:** Compare before/after screenshots
 
-### Accessibility Verification (--a11y or always for M+ fixes)
+**Responsive:** Test at 375px, 768px, 1280px
 
-```typescript
-skill({ name: "accessibility-audit" });
-```
+**A11y (if --a11y):**
 
-Check:
+- Color contrast (4.5:1 for text)
+- Keyboard navigation
+- Focus states visible
 
-- [ ] Color contrast (4.5:1 for text, 3:1 for large text)
-- [ ] Keyboard navigation works
-- [ ] Focus states visible
-- [ ] Screen reader text present for icons
-- [ ] No motion for prefers-reduced-motion users
-
-### Automated Tests
+**Tests:**
 
 ```bash
 npm test -- --grep "component-name"
-npm run test:visual  # If visual regression tests exist
 ```
 
-```
-Verification:
-━━━━━━━━━━━━━
-
-Visual: Issue fixed ✓
-Responsive:
-  - Mobile (375px): ✓
-  - Tablet (768px): ✓
-  - Desktop (1280px): ✓
-Accessibility: [✓/⚠️ needs review]
-Tests: [✓/✗]
-```
-
-## Phase 9: Document & Observe
-
-If this revealed a UI pattern worth remembering:
-
-```typescript
-observation({
-  type: "pattern",
-  title: "[UI pattern name]",
-  content: `
-## Pattern
-[What we learned about UI implementation]
-
-## Example
-\`\`\`css
-[Code snippet]
-\`\`\`
-
-## When to Use
-[When this pattern applies]
-  `,
-  concepts: "ui, css, [component-type]",
-  files: "[affected files]",
-  bead_id: "<bead-id>",
-});
-```
-
-## Phase 10: Commit & Sync
+## Commit
 
 ```bash
 git add <files>
-git commit -m "fix(ui): <description>
-
-- [what changed]
-- [visual improvement]
-[bead-id if applicable]"
+git commit -m "fix(ui): [description]"
 ```
 
 ```typescript
-bd_release({ _: true });
-bd_sync({ reason: "Fixed UI: $ARGUMENTS" });
+bd_sync({ reason: "Sync UI fix" });
 ```
 
 ## Output
 
 ```
 UI Fixed: $ARGUMENTS
-━━━━━━━━━━━━━━━━━━━━
-
-Estimate: [S/M/L]
-Components: [list]
 
-Before: .beads/artifacts/<bead-id>/before.png
-After: .beads/artifacts/<bead-id>/after.png
+Before: .beads/artifacts/$ARGUMENTS/before.png
+After: .beads/artifacts/$ARGUMENTS/after.png
 
 Verification:
 - Visual: ✓
 - Responsive: ✓
-- Accessibility: [✓/⚠️]
+- A11y: [✓/⚠️]
 - Tests: ✓
 
-Design system: Used existing tokens ✓
-AI slop check: None detected ✓
-
-Commit: [hash]
-```
-
-**Next steps:**
-
-```
-If part of larger task:
-  /implement <bead-id>
-
-If standalone fix:
-  /finish <bead-id>
-  /pr <bead-id>
+Design tokens: Used ✓
+AI slop: None ✓
 ```

package/dist/template/.opencode/command/fix.md

@@ -1,275 +1,138 @@
 ---
-description: Debug and fix issues
+description: Debug and fix an issue
 argument-hint: "<issue or bead-id> [--quick]"
 agent: build
 ---
 
 # Fix: $ARGUMENTS
 
-## Load Beads Skill
+You're debugging and fixing an issue. Understand before you fix.
 
-```typescript
-skill({ name: "beads" });
-```
-
-## Options
-
-- `--quick`: Skip deep analysis, fix directly (for obvious bugs)
-
-## Phase 1: Load Context
-
-**Check for bead context:**
-
-If `$ARGUMENTS` looks like a bead ID (e.g., `bd-abc123`):
-
-```typescript
-bd_show({ id: "$ARGUMENTS" });
-```
-
-Load constraints from `.beads/artifacts/<bead-id>/spec.md` if it exists.
-
-**Check for messages about this issue:**
-
-```typescript
-bd_inbox({ n: 5, unread: true, global: false });
-```
+## Load Context
 
-## Phase 2: Parse Error Information
-
-Extract from the issue:
-
-| Field             | Extract                              |
-| ----------------- | ------------------------------------ |
-| **Error message** | Exact error text                     |
-| **Stack trace**   | Call stack with file:line references |
-| **Reproduction**  | Steps to trigger the bug             |
-| **Expected**      | What should happen                   |
-| **Actual**        | What happens instead                 |
-
-**For stack traces:**
+If `$ARGUMENTS` is a bead ID:
 
 ```bash
-# Find the first application code (skip node_modules, stdlib)
-grep -E "at .*(src/|lib/|app/)" <<< "[stack trace]"
+bd show $ARGUMENTS
+cat .beads/artifacts/$ARGUMENTS/spec.md 2>/dev/null
 ```
 
-## Phase 3: Estimate Complexity
+## Parse The Error
 
-| Signals                                     | Estimate | Approach           |
-| ------------------------------------------- | -------- | ------------------ |
-| Error points to exact line, obvious fix     | S (~10)  | Quick fix          |
-| Error in known area, clear reproduction     | M (~30)  | Systematic debug   |
-| Intermittent, unclear cause, multiple files | L (~100) | Deep investigation |
-| No reproduction, architectural issue        | XL       | Research first     |
+Extract from the issue:
 
-```
-Fix Estimate: [S/M/L/XL]
-━━━━━━━━━━━━━━━━━━━━━━━
+- **Error message** - exact text
+- **Stack trace** - file:line references
+- **Reproduction** - steps to trigger
+- **Expected vs Actual** - what should happen vs what happens
 
-Complexity: [description]
-Approach: [quick fix / systematic / deep investigation]
-```
+## Estimate Complexity
 
-## Phase 4: Reserve Files
+- **S** (~10 calls): Error points to exact line, obvious fix
+- **M** (~30 calls): Clear reproduction, known area
+- **L** (~100 calls): Intermittent, multiple files, needs investigation
+- **XL**: Should be decomposed or researched first
 
-```typescript
-bd_reservations({ reason: "Checking for conflicts before fix" });
-bd_reserve({
-  paths: ["<files-to-investigate>"],
-  reason: "Fixing $ARGUMENTS",
-  ttl: 600,
-});
-```
+If `--quick` flag: Skip deep analysis, fix directly.
 
-## Phase 5: Investigation & Fix
+## Quick Fix (S or --quick)
 
-### Quick Fix (S estimate or --quick)
-
-1. Go directly to error location
+1. Go to error location
 2. Identify obvious cause
 3. Make minimal fix
 4. Run targeted test
 5. Commit
 
-### Systematic Debug (M/L estimate)
+## Systematic Debug (M/L)
 
-**Load skill:**
+Load the debugging skill:
 
 ```typescript
 skill({ name: "systematic-debugging" });
 ```
 
-Follow four phases:
-
-**1. Root Cause Investigation (NO fixes yet)**
+**Phase 1: Root Cause (NO fixes yet)**
 
-- Read error location and surrounding code
-- Trace data flow backward
-- Check recent changes: `git log -p --since="1 week ago" -- <file>`
-- Add logging/instrumentation if needed
+Read error location. Trace data flow backward. Check recent changes:
 
-```
-Root Cause Hypothesis:
-━━━━━━━━━━━━━━━━━━━━━
-
-Cause: [what's actually wrong]
-Evidence: [how we know]
-Confidence: [High/Medium/Low]
+```bash
+git log -p --since="1 week ago" -- <file>
 ```
 
-**2. Pattern Analysis**
+Form a hypothesis. Write it down before fixing anything.
 
-- Is this a known pattern? Check gotchas.md
-- Similar bugs in history? `git log --grep="fix" --oneline`
-- Related code with same issue?
+**Phase 2: Reproduce**
 
-**3. Hypothesis Testing**
-
-- Write a failing test that reproduces the bug
-- Verify hypothesis by checking test fails for right reason
+Write a failing test that reproduces the bug:
 
 ```bash
-npm test -- --grep "<bug-related-test>"
+npm test -- --grep "<bug-related>"
 ```
 
-**4. Implementation with TDD**
-
-- Fix the code
-- Verify test now passes
-- Run full test suite for regression
-
-### Rollback Strategy
-
-Before making changes, note rollback point:
+Verify it fails for the right reason.
 
-```bash
-git stash  # or
-git rev-parse HEAD  # Save current commit
-```
+**Phase 3: Fix**
 
-If fix makes things worse:
+Make the fix. Verify test passes. Run full suite:
 
 ```bash
-git checkout -- <file>  # Revert single file
-git stash pop           # Restore stashed changes
-git reset --hard <hash> # Nuclear option
+npm test
+npm run type-check
 ```
 
-## Phase 6: Verification
+## Rollback Strategy
 
-**Targeted verification:**
+Before making changes:
 
 ```bash
-npm test -- --grep "<related-test>"
+git stash  # or note current commit
 ```
 
-**Regression check:**
+If fix makes things worse:
 
 ```bash
-npm test
-npm run lint
-npm run type-check
+git checkout -- <file>
 ```
 
-```
-Verification:
-━━━━━━━━━━━━━
-
-Bug test:  [✓ now passes]
-Full tests: [✓/✗]
-Lint:       [✓/✗]
-Types:      [✓/✗]
-```
+## Document Root Cause
 
-**If verification fails:** Iterate or rollback.
-
-## Phase 7: Document Root Cause
-
-Create observation for future reference:
+Create observation:
 
 ```typescript
 observation({
   type: "bugfix",
-  title: "[Brief description of bug]",
-  content: `
-## Root Cause
-[What was actually wrong]
-
-## Fix
-[What we changed and why]
-
-## Prevention
-[How to avoid this in future]
-  `,
-  concepts: "[relevant keywords]",
-  files: "[affected files]",
-  bead_id: "<bead-id>",
+  title: "[brief description]",
+  content: "Root cause: [what]\nFix: [how]\nPrevention: [future]",
+  bead_id: "$ARGUMENTS",
 });
 ```
 
-## Phase 8: Update Memory
+If it's a gotcha worth remembering, update `project/gotchas.md`.
 
-If this was a gotcha worth remembering:
-
-```typescript
-memory -
-  update({
-    file: "project/gotchas",
-    content: `
-## [Bug Title]
-
-**Symptom:** [What you see]
-**Cause:** [What's actually wrong]
-**Fix:** [How to resolve]
-**Prevention:** [How to avoid]
-  `,
-    mode: "append",
-  });
-```
-
-## Phase 9: Commit & Sync
+## Commit & Sync
 
 ```bash
 git add <files>
-git commit -m "fix(<scope>): <description>
+git commit -m "fix: [description]
 
-Root cause: [brief explanation]
-[bead-id if applicable]"
+Root cause: [brief]
+$ARGUMENTS"
 ```
 
-Release locks and sync:
-
 ```typescript
-bd_release({ _: true });
-bd_sync({ reason: "Fixed $ARGUMENTS" });
+bd_sync({ reason: "Sync fix completion" });
 ```
 
 ## Output
 
 ```
 Fixed: $ARGUMENTS
-━━━━━━━━━━━━━━━━━
 
-Estimate: [S/M/L] (actual: [N] tool calls)
-Root cause: [brief description]
-
-Changes:
-- [file:line] - [what changed]
-
-Verification: All tests pass ✓
-Observation: Created ✓
-Gotcha: [Added to memory / Not needed]
-
-Commit: [hash]
-```
-
-**Next steps:**
-
-```
-If part of larger task:
-  /implement <bead-id>   # Continue implementation
+Root cause: [brief]
+Changes: [files]
+Tests: Pass
 
-If standalone fix:
-  /finish <bead-id>      # Close the bead
-  /pr <bead-id>          # Create PR
+Next:
+- /finish $ARGUMENTS  # Close the bead
+- /pr $ARGUMENTS      # Create PR
 ```