opencodekit 0.9.2 → 0.11.0

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

@@ -1,48 +1,349 @@
 ---
-description: Generate technical diagrams, flowcharts, wireframes
-argument-hint: "<description> [type: flowchart|wireframe|architecture|erd|sequence]"
+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.
+Generate technical diagrams and visual documentation with Mermaid code output.
 
-## Instructions
+## Parse Arguments
 
-Parse from `$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 description
-- Type (default: flowchart)
+---
+
+## 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
 
-## Types
+```mermaid
+erDiagram
+    USER ||--o{ ORDER : places
+    ORDER ||--|{ LINE_ITEM : contains
+    PRODUCT ||--o{ LINE_ITEM : includes
 
-- **flowchart**: Process flows, decision trees
-- **wireframe**: UI layouts, screen mockups
-- **architecture**: System architecture, components
-- **erd**: Entity relationship diagrams
-- **sequence**: Interaction sequences
+    USER {
+        int id PK
+        string email
+        string name
+    }
+```
 
-## Output Formats
+**Cardinality:** `||` (one), `o{` (zero or more), `|{` (one or more)
 
-Generate both:
+### Class Diagram
 
-1. Visual image (PNG)
-2. Mermaid/PlantUML code equivalent
+```mermaid
+classDiagram
+    class User {
+        +String email
+        +String name
+        +login()
+        +logout()
+    }
+    class Admin {
+        +deleteUser()
+    }
+    User <|-- Admin
+```
 
-## Process
+**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
+
+---
 
-1. Parse the description into structural elements
-2. Create clean, professional diagram
-3. Use consistent styling
-4. Include legend if complex
+## 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
 
-Save to `.opencode/memory/design/diagrams/`:
+### 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              |
+
+---
 
-- Diagram image
-- Mermaid code file (.mmd)
+## Related Commands
 
-Report files and display the Mermaid code inline.
+| Need                 | Command            |
+| -------------------- | ------------------ |
+| Analyze mockup       | `/analyze-mockup`  |
+| Generate image       | `/generate-image`  |
+| Review architecture  | `/review-codebase` |
+| Create documentation | `/summarize`       |

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

@@ -1,40 +1,284 @@
 ---
-description: Generate app icons in multiple sizes
-argument-hint: "<description> [platform: ios|android|web|all] [style: flat|3d|minimal]"
+description: Generate app icons in multiple sizes with platform optimization
+argument-hint: "<description> [--platform=<ios|android|web|all>] [--style=<style>] [--shape=<shape>] [--color=<hex>] [--dark]"
 agent: vision
 model: proxypal/gemini-3-pro-image-preview
 ---
 
 # Generate Icon: $ARGUMENTS
 
-Generate app icons optimized for different platforms.
+Generate app icons optimized for different platforms and sizes.
 
-## Instructions
+## Parse Arguments
 
-Parse from `$ARGUMENTS`:
+| Argument     | Default  | Options                           |
+| ------------ | -------- | --------------------------------- |
+| Description  | required | What the icon should depict       |
+| `--platform` | all      | ios, android, web, all            |
+| `--style`    | minimal  | See style presets below           |
+| `--shape`    | squircle | square, rounded, squircle, circle |
+| `--color`    | none     | Brand color hex (e.g., `#0066CC`) |
+| `--bg`       | solid    | solid, gradient, transparent      |
+| `--dark`     | false    | Generate dark mode variant        |
 
-- Description of icon
-- Platform (default: all)
-- Style (default: minimal)
+---
+
+## Style Presets
+
+| Style           | Description                            | Best For                   |
+| --------------- | -------------------------------------- | -------------------------- |
+| `minimal`       | Simple shapes, 1-2 colors, clean lines | Professional, utility apps |
+| `flat`          | Solid colors, no shadows, 2D           | Modern, clean aesthetic    |
+| `3d`            | Depth, gradients, subtle shadows       | Games, premium apps        |
+| `glassmorphism` | Frosted glass effect, transparency     | Modern iOS, premium        |
+| `neumorphism`   | Soft shadows, raised/pressed effect    | Unique, tactile feel       |
+| `gradient`      | Bold color gradients                   | Social, creative apps      |
+| `outlined`      | Line art, stroke-based                 | Technical, developer tools |
+| `duotone`       | Two-color design                       | Bold, striking             |
+| `isometric`     | 3D isometric view                      | Productivity, games        |
+| `cartoon`       | Playful, illustrated style             | Kids, casual games         |
+
+---
+
+## Shape Options
+
+| Shape      | Platform Default | Description                           |
+| ---------- | ---------------- | ------------------------------------- |
+| `squircle` | iOS              | Superellipse (Apple's rounded square) |
+| `circle`   | Android (some)   | Perfect circle                        |
+| `rounded`  | Android          | Rounded corners (customizable radius) |
+| `square`   | Web favicon      | Sharp corners                         |
+
+**Note:** Generate at highest resolution; platforms apply their own masks.
+
+---
+
+## Platform Sizes
+
+### iOS
+
+| Size      | Usage      |
+| --------- | ---------- |
+| 1024x1024 | App Store  |
+| 180x180   | iPhone @3x |
+| 120x120   | iPhone @2x |
+| 167x167   | iPad Pro   |
+| 152x152   | iPad @2x   |
+| 76x76     | iPad @1x   |
+
+**Output:** `AppIcon.appiconset/` with `Contents.json`
+
+### Android
+
+| Size    | Density    | Usage         |
+| ------- | ---------- | ------------- |
+| 512x512 | Play Store | Store listing |
+| 192x192 | xxxhdpi    | Launcher      |
+| 144x144 | xxhdpi     | Launcher      |
+| 96x96   | xhdpi      | Launcher      |
+| 72x72   | hdpi       | Launcher      |
+| 48x48   | mdpi       | Launcher      |
+
+**Adaptive Icons (Android 8+):**
+
+```
+res/
+├── mipmap-anydpi-v26/
+│   └── ic_launcher.xml      # References layers
+├── drawable/
+│   ├── ic_launcher_foreground.xml  # 108dp, icon centered in 72dp
+│   └── ic_launcher_background.xml  # Solid color or gradient
+```
 
-## Platforms & Sizes
+### Web
 
-**iOS**: 1024x1024, 180x180, 120x120, 60x60
-**Android**: 512x512, 192x192, 144x144, 96x96, 48x48
-**Web**: favicon.ico, 32x32, 16x16, apple-touch-icon
+| File                       | Size                | Usage              |
+| -------------------------- | ------------------- | ------------------ |
+| favicon.ico                | 16x16, 32x32, 48x48 | Browser tab        |
+| favicon-16x16.png          | 16x16               | Small favicon      |
+| favicon-32x32.png          | 32x32               | Standard favicon   |
+| apple-touch-icon.png       | 180x180             | iOS bookmark       |
+| android-chrome-192x192.png | 192x192             | Android PWA        |
+| android-chrome-512x512.png | 512x512             | Android PWA splash |
 
-## Style Options
+**Output:** `site.webmanifest` included
 
-- **flat**: Clean, no shadows
-- **3d**: Depth, gradients, shadows
-- **minimal**: Simple shapes, limited colors
+---
+
+## Brand Color Integration
+
+Use `--color` to specify brand colors:
+
+```bash
+/generate-icon cloud storage app --color=#0066CC --style=minimal
+```
+
+The AI will:
+
+- Use specified color as primary
+- Generate complementary accents
+- Ensure contrast for visibility
+
+**Multiple colors:**
+
+```bash
+/generate-icon social app --color=#FF5722,#4CAF50 --style=gradient
+```
+
+---
+
+## Dark Mode Variants
+
+Use `--dark` to generate both light and dark variants:
+
+```bash
+/generate-icon productivity app --dark
+```
+
+**Output:**
 
-## Output
+```
+icons/
+├── icon-light.png       # Light mode (default)
+├── icon-dark.png        # Dark mode variant
+└── icon-tinted.png      # iOS tinted icon (optional)
+```
+
+**iOS Tinted Icons (iOS 18+):**
+
+- Monochrome version for tinted appearance
+- Automatically adapts to user's chosen tint color
+
+---
 
-Save to `.opencode/memory/design/icons/`:
+## Icon Design Principles
+
+### Do
+
+- **Simple shape**: Recognizable at 16x16
+- **Single focal point**: One main element
+- **Bold colors**: Stand out on any wallpaper
+- **Unique silhouette**: Distinguishable from other apps
+- **Consistent style**: Match your app's aesthetic
+
+### Don't
+
+- **Text**: Illegible at small sizes (except single letter logos)
+- **Photos**: Don't scale well
+- **Too much detail**: Lost at small sizes
+- **Thin lines**: Disappear at low resolution
+- **Similar to system icons**: Avoid confusion
+
+### The Squint Test
+
+If you squint at your icon and can still identify it, it's good.
+
+---
+
+## Examples
+
+### Utility/Productivity
+
+```bash
+# Cloud storage
+/generate-icon cloud with upward arrow, simple --style=minimal --color=#2196F3 --platform=all
+
+# Notes app
+/generate-icon pencil on notepad, clean lines --style=flat --color=#FFC107
+
+# Calculator
+/generate-icon calculator with equals sign --style=outlined --color=#607D8B
+```
+
+### Social/Creative
+
+```bash
+# Social app
+/generate-icon chat bubble with heart --style=gradient --color=#E91E63,#9C27B0
+
+# Photo editor
+/generate-icon camera lens with rainbow gradient --style=glassmorphism
+
+# Music app
+/generate-icon musical note, vibrant --style=3d --color=#1DB954
+```
+
+### Games
+
+```bash
+# Casual game
+/generate-icon smiling star character --style=cartoon --color=#FFEB3B
+
+# Strategy game
+/generate-icon shield with sword --style=3d --color=#8B4513
+
+# Puzzle game
+/generate-icon interlocking puzzle pieces --style=isometric --color=#00BCD4
+```
+
+### Developer Tools
+
+```bash
+# Code editor
+/generate-icon angle brackets with cursor --style=outlined --color=#21252B
+
+# Terminal
+/generate-icon command prompt symbol --style=minimal --color=#282C34 --dark
+
+# API tool
+/generate-icon connected nodes --style=duotone --color=#6200EE
+```
+
+---
+
+## Output Structure
+
+```
+.opencode/memory/design/icons/[app-name]/
+├── ios/
+│   └── AppIcon.appiconset/
+│       ├── Contents.json
+│       ├── icon-1024.png
+│       ├── icon-180.png
+│       └── ...
+├── android/
+│   ├── play-store-512.png
+│   ├── res/
+│   │   ├── mipmap-xxxhdpi/
+│   │   ├── mipmap-xxhdpi/
+│   │   └── ...
+│   └── adaptive/
+│       ├── foreground.png
+│       └── background.png
+├── web/
+│   ├── favicon.ico
+│   ├── favicon-32x32.png
+│   ├── apple-touch-icon.png
+│   └── site.webmanifest
+├── master-1024.png          # Source file
+└── dark/                    # If --dark specified
+    ├── master-1024.png
+    └── ...
+```
+
+---
+
+## Limitations
+
+| Limitation             | Workaround                                       |
+| ---------------------- | ------------------------------------------------ |
+| Text rendering         | Use single letter or add text in post-processing |
+| Exact brand logos      | Provide reference image with `/edit-image`       |
+| Complex illustrations  | Generate simplified version, refine manually     |
+| Precise color matching | Specify exact hex with `--color`                 |
+
+---
 
-- Master icon at highest resolution
-- All platform-specific sizes
-- Include manifest.json for web
+## Related Commands
 
-Report all generated files.
+| Need                  | Command             |
+| --------------------- | ------------------- |
+| Edit generated icon   | `/edit-image`       |
+| Generate full image   | `/generate-image`   |
+| Create pattern        | `/generate-pattern` |
+| Analyze existing icon | `/analyze-mockup`   |