opencodekit 0.15.21 → 0.16.0

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

@@ -1,117 +0,0 @@
----
-description: Fix UI issues with visual verification
-argument-hint: "<issue or bead-id> [--a11y]"
-agent: build
----
-
-# Fix UI: $ARGUMENTS
-
-Fix visual issues. Capture before/after, verify responsiveness.
-
-## Load Context
-
-!`bd show $ARGUMENTS`
-!`cat .beads/artifacts/$ARGUMENTS/spec.md 2>/dev/null`
-
-## Capture Before State
-
-Take screenshot before changes. Save to `.beads/artifacts/$ARGUMENTS/before.png`.
-
-```typescript
-skill({ name: "playwright" });
-skill_mcp({
-  skill_name: "playwright",
-  tool_name: "browser_screenshot",
-  arguments: '{"name": "before-fix"}',
-});
-```
-
-## Analyze
-
-Delegate to @vision:
-
-```typescript
-task({
-  subagent_type: "vision",
-  description: "Analyze UI issue",
-  prompt:
-    "Analyze UI issue: $ARGUMENTS\n\nIdentify:\n- The visual problem\n- Affected components\n- Suggested fix approach",
-});
-```
-
-## Check Design System
-
-!`grep -r "var(--" src/styles/ | head -10`
-!`grep -r "theme\." src/components/ | head -10`
-
-Use existing tokens, not hardcoded values:
-
-- ✅ Existing color tokens
-- ✅ Existing spacing scale
-- ✅ Existing typography scale
-- ❌ Hardcoded colors/px values
-
-## Avoid AI Slop
-
-| 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 |
-
-## Implement Fix
-
-1. Identify affected files
-2. Make minimal CSS/component changes
-3. Use design tokens
-4. Test in browser
-
-## Capture After State
-
-Save to `.beads/artifacts/$ARGUMENTS/after.png`.
-
-## Verify
-
-**Visual:** Compare before/after screenshots
-
-**Responsive:** Test at 375px, 768px, 1280px
-
-**A11y (if --a11y):**
-
-- Color contrast (4.5:1 for text)
-- Keyboard navigation
-- Focus states visible
-
-**Tests:**
-
-```bash
-npm test -- --grep "component-name"
-```
-
-## Commit
-
-```bash
-git add <files>
-git commit -m "fix(ui): [description]"
-
-bd sync
-```
-
-## Output
-
-```
-UI Fixed: $ARGUMENTS
-
-Before: .beads/artifacts/$ARGUMENTS/before.png
-After: .beads/artifacts/$ARGUMENTS/after.png
-
-Verification:
-- Visual: ✓
-- Responsive: ✓
-- A11y: [✓/⚠️]
-- Tests: ✓
-
-Design tokens: Used ✓
-AI slop: None ✓
-```

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

@@ -1,168 +0,0 @@
----
-description: Debug and fix an issue
-argument-hint: "<issue or bead-id> [--quick]"
-agent: build
----
-
-# Fix: $ARGUMENTS
-
-You're debugging and fixing an issue. Understand before you fix.
-
-## Load Context
-
-If `$ARGUMENTS` is a bead ID:
-
-!`bd show $ARGUMENTS`
-!`cat .beads/artifacts/$ARGUMENTS/spec.md 2>/dev/null`
-
-## Parse The Error
-
-Extract from the issue:
-
-- **Error message** - exact text
-- **Stack trace** - file:line references
-- **Reproduction** - steps to trigger
-- **Expected vs Actual** - what should happen vs what happens
-
-## Estimate Complexity
-
-- **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
-
-If `--quick` flag: Skip deep analysis, fix directly.
-
-## Quick Fix (S or --quick)
-
-1. Go to error location
-2. Identify obvious cause
-3. Make minimal fix
-4. Run targeted test
-5. Commit
-
-## Systematic Debug (M/L)
-
-Load the debugging skill:
-
-```typescript
-skill({ name: "systematic-debugging" });
-```
-
-**Phase 1: Root Cause (NO fixes yet)**
-
-Read error location. Trace data flow backward. Check recent changes:
-
-!`git log -p --since="1 week ago" -- <file>`
-
-Form a hypothesis. Write it down before fixing anything.
-
-**Phase 2: Reproduce**
-
-Write a failing test that reproduces the bug:
-
-```bash
-npm test -- --grep "<bug-related>"
-```
-
-Verify it fails for the right reason.
-
-**Phase 3: Fix**
-
-Make the fix. Verify test passes. Run full suite:
-
-```bash
-npm test
-npm run type-check
-```
-
-## Rollback Strategy
-
-Before making changes:
-
-```bash
-git stash  # or note current commit
-```
-
-If fix makes things worse:
-
-```bash
-git checkout -- <file>
-```
-
-## Document Root Cause
-
-Create observation:
-
-```typescript
-observation({
-  type: "bugfix",
-  title: "[brief description]",
-  content: "Root cause: [what]\nFix: [how]\nPrevention: [future]",
-  bead_id: "$ARGUMENTS",
-});
-```
-
-If it's a gotcha worth remembering, update `project/gotchas.md`.
-
-## Complete
-
-If all verifications pass:
-
-```bash
-git add <files>
-git status
-git diff --cached --stat
-```
-
-**Use question tool to get commit decision:**
-
-```typescript
-question({
-  questions: [
-    {
-      header: "Commit",
-      question: "Fix Complete: $ARGUMENTS. What should I do next?",
-      options: [
-        {
-          label: "Commit changes (Recommended)",
-          description: "Git commit and bd sync",
-        },
-        {
-          label: "Show diff first",
-          description: "Review changes before committing",
-        },
-        {
-          label: "Skip commit",
-          description: "I'll review and commit manually",
-        },
-      ],
-    },
-  ],
-});
-```
-
-If user confirms:
-
-```bash
-git commit -m "fix: [description]
-
-Root cause: [brief]
-$ARGUMENTS"
-
-bd sync
-```
-
-## Output
-
-```
-Fixed: $ARGUMENTS
-
-Root cause: [brief]
-Changes: [files]
-Tests: Pass
-
-Next:
-- /finish $ARGUMENTS  # Close the bead
-- /pr $ARGUMENTS      # Create PR
-```

package/dist/template/.opencode/command/frontend-design.md

@@ -1,21 +0,0 @@
----
-description: Create distinctive, production-grade frontend interfaces
-argument-hint: "[component/page description]"
-agent: build
----
-
-# Frontend Design: $ARGUMENTS
-
-Create UI components, pages, or applications with React, Tailwind CSS v4, shadcn/ui, and Motion.
-
-## Load Skill
-
-```typescript
-skill({ name: "frontend-design" });
-```
-
-Then follow the skill instructions to create the interface.
-
-<user-request>
-$ARGUMENTS
-</user-request>

package/dist/template/.opencode/command/generate-diagram.md

@@ -1,349 +0,0 @@
----
-description: Generate technical diagrams, flowcharts, and visual documentation
-argument-hint: "<description> [--type=<type>] [--style=<style>] [--format=<format>] [--from-code]"
-agent: vision
-model: proxypal/gemini-3-flash-preview
----
-
-# Generate Diagram: $ARGUMENTS
-
-Generate technical diagrams and visual documentation with Mermaid code output.
-
-## Parse Arguments
-
-| Argument      | Default   | Options                         |
-| ------------- | --------- | ------------------------------- |
-| Description   | required  | What the diagram shows          |
-| `--type`      | flowchart | See diagram types below         |
-| `--style`     | clean     | clean, sketch, formal, colorful |
-| `--format`    | both      | png, svg, mermaid, both         |
-| `--size`      | medium    | simple, medium, complex         |
-| `--from-code` | false     | Analyze codebase to generate    |
-| `--colors`    | default   | Brand colors or preset          |
-
----
-
-## Diagram Types
-
-| Type           | Description                              | Best For                |
-| -------------- | ---------------------------------------- | ----------------------- |
-| `flowchart`    | Process flows, decision trees            | Workflows, algorithms   |
-| `sequence`     | Interaction sequences, API calls         | System interactions     |
-| `architecture` | System components, infrastructure        | High-level design       |
-| `erd`          | Entity relationship diagrams             | Database design         |
-| `class`        | Class diagrams, inheritance              | OOP design              |
-| `state`        | State machines, transitions              | UI states, workflows    |
-| `mindmap`      | Hierarchical concepts                    | Brainstorming, planning |
-| `gantt`        | Timeline, project schedule               | Project planning        |
-| `wireframe`    | UI layouts, screen mockups               | UX design               |
-| `network`      | Network topology                         | Infrastructure          |
-| `c4`           | C4 model (context, container, component) | Architecture docs       |
-
----
-
-## Workflow: AI vs Mermaid-First
-
-### Use AI Generation When:
-
-- Creating wireframes or visual mockups
-- Need artistic/sketch style
-- Complex visual that Mermaid can't express
-
-### Use Mermaid-First When:
-
-- Technical diagrams (flowchart, sequence, erd, class)
-- Need precise control over structure
-- Will iterate on the diagram
-- Need version-controlled diagrams
-
-**Recommendation:** For technical diagrams, this command generates Mermaid code that you can edit and render.
-
----
-
-## Mermaid Syntax Reference
-
-### Flowchart
-
-```mermaid
-flowchart TD
-    A[Start] --> B{Decision?}
-    B -->|Yes| C[Action 1]
-    B -->|No| D[Action 2]
-    C --> E[End]
-    D --> E
-```
-
-**Shapes:** `[Rectangle]` `(Rounded)` `{Diamond}` `([Stadium])` `[[Subroutine]]`
-**Directions:** `TD` (top-down), `LR` (left-right), `BT`, `RL`
-
-### Sequence Diagram
-
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant A as API
-    participant D as Database
-
-    U->>A: POST /login
-    A->>D: Query user
-    D-->>A: User data
-    A-->>U: JWT token
-```
-
-**Arrows:** `->>` (solid), `-->>` (dashed), `-x` (cross), `-)` (async)
-
-### Entity Relationship
-
-```mermaid
-erDiagram
-    USER ||--o{ ORDER : places
-    ORDER ||--|{ LINE_ITEM : contains
-    PRODUCT ||--o{ LINE_ITEM : includes
-
-    USER {
-        int id PK
-        string email
-        string name
-    }
-```
-
-**Cardinality:** `||` (one), `o{` (zero or more), `|{` (one or more)
-
-### Class Diagram
-
-```mermaid
-classDiagram
-    class User {
-        +String email
-        +String name
-        +login()
-        +logout()
-    }
-    class Admin {
-        +deleteUser()
-    }
-    User <|-- Admin
-```
-
-**Relationships:** `<|--` (inheritance), `*--` (composition), `o--` (aggregation)
-
-### State Diagram
-
-```mermaid
-stateDiagram-v2
-    [*] --> Idle
-    Idle --> Loading : fetch
-    Loading --> Success : resolve
-    Loading --> Error : reject
-    Success --> Idle : reset
-    Error --> Idle : retry
-```
-
-### Gantt Chart
-
-```mermaid
-gantt
-    title Project Timeline
-    dateFormat YYYY-MM-DD
-    section Phase 1
-    Design     :a1, 2024-01-01, 2w
-    Development :a2, after a1, 4w
-    section Phase 2
-    Testing    :a3, after a2, 2w
-```
-
-### Mindmap
-
-```mermaid
-mindmap
-  root((Project))
-    Frontend
-      React
-      Tailwind
-    Backend
-      Node.js
-      PostgreSQL
-    DevOps
-      Docker
-      AWS
-```
-
----
-
-## Style Options
-
-| Style      | Description             | Use Case                     |
-| ---------- | ----------------------- | ---------------------------- |
-| `clean`    | Minimal, professional   | Documentation, presentations |
-| `sketch`   | Hand-drawn appearance   | Informal, brainstorming      |
-| `formal`   | Box borders, structured | Enterprise, technical docs   |
-| `colorful` | Vibrant, color-coded    | Marketing, education         |
-
----
-
-## Codebase Integration (--from-code)
-
-Analyze actual code to generate diagrams:
-
-```bash
-# Generate architecture from imports
-/generate-diagram system architecture --from-code --type=architecture
-
-# Generate ERD from models
-/generate-diagram database schema --from-code --type=erd
-
-# Generate class diagram from TypeScript
-/generate-diagram class relationships --from-code --type=class
-```
-
-**How it works:**
-
-1. Scans relevant source files
-2. Extracts structure (classes, functions, imports)
-3. Generates Mermaid code representing actual codebase
-4. Renders as diagram
-
----
-
-## Examples by Type
-
-### Flowchart
-
-```bash
-# User authentication flow
-/generate-diagram user login process with email verification --type=flowchart
-
-# Algorithm
-/generate-diagram binary search algorithm --type=flowchart --style=clean
-```
-
-### Sequence Diagram
-
-```bash
-# API flow
-/generate-diagram OAuth2 authentication flow between client, auth server, and resource server --type=sequence
-
-# Microservice communication
-/generate-diagram order processing across payment, inventory, and shipping services --type=sequence
-```
-
-### Architecture
-
-```bash
-# System overview
-/generate-diagram e-commerce platform with React frontend, Node API, and PostgreSQL --type=architecture
-
-# Cloud infrastructure
-/generate-diagram AWS deployment with ECS, RDS, and CloudFront --type=architecture --style=formal
-```
-
-### ERD
-
-```bash
-# Database schema
-/generate-diagram user management system with users, roles, and permissions --type=erd
-
-# E-commerce
-/generate-diagram product catalog with categories, variants, and inventory --type=erd
-```
-
-### State Diagram
-
-```bash
-# UI states
-/generate-diagram form submission states from idle to loading to success or error --type=state
-
-# Order lifecycle
-/generate-diagram order status from pending through processing, shipped, delivered --type=state
-```
-
----
-
-## Size/Complexity Guidance
-
-| Size      | Elements   | Description                  |
-| --------- | ---------- | ---------------------------- |
-| `simple`  | 3-5 nodes  | Quick sketch, single concept |
-| `medium`  | 6-12 nodes | Standard documentation       |
-| `complex` | 13+ nodes  | Comprehensive system view    |
-
-**Tip:** Start simple, iterate to add detail.
-
----
-
-## Output
-
-### File Structure
-
-```
-.opencode/memory/design/diagrams/[name]/
-├── diagram.png           # Rendered image
-├── diagram.svg           # Vector version
-├── diagram.mmd           # Mermaid source code
-└── README.md             # Usage notes
-```
-
-### Inline Output
-
-```markdown
-## Generated Diagram
-
-**Type:** sequence
-**Description:** User authentication flow
-
-### Mermaid Code
-
-\`\`\`mermaid
-sequenceDiagram
-User->>Auth: Login request
-Auth->>DB: Validate credentials
-DB-->>Auth: User data
-Auth-->>User: JWT token
-\`\`\`
-
-### Rendered
-
-[PNG/SVG image displayed]
-
-### Usage
-
-- Embed in GitHub markdown (supports Mermaid natively)
-- Use Mermaid Live Editor for modifications
-- Export to PNG/SVG for presentations
-```
-
----
-
-## Rendering Options
-
-| Platform     | Mermaid Support      |
-| ------------ | -------------------- |
-| GitHub       | Native in markdown   |
-| GitLab       | Native in markdown   |
-| Notion       | Via code block       |
-| Confluence   | Via plugin           |
-| VS Code      | Via extension        |
-| Mermaid Live | https://mermaid.live |
-
----
-
-## Limitations
-
-| Limitation          | Workaround                                          |
-| ------------------- | --------------------------------------------------- |
-| Very large diagrams | Break into multiple smaller diagrams                |
-| Custom icons        | Use external tool, embed as image                   |
-| Precise positioning | Mermaid auto-layouts; use external tool for control |
-| Complex styling     | Basic theming only; export SVG for advanced styling |
-| Wireframes          | AI-generated image better than Mermaid              |
-
----
-
-## Related Commands
-
-| Need                 | Command            |
-| -------------------- | ------------------ |
-| Analyze mockup       | `/analyze-mockup`  |
-| Generate image       | `/generate-image`  |
-| Review architecture  | `/review-codebase` |
-| Create documentation | `/summarize`       |