opencodekit 0.15.20 → 0.16.0

package/dist/template/.opencode/commands/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/commands/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`       |

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

@@ -1,283 +0,0 @@
----
-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: painter
----
-
-# Generate Icon: $ARGUMENTS
-
-Generate app icons optimized for different platforms and sizes.
-
-## Parse 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        |
-
----
-
-## 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
-```
-
-### Web
-
-| 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 |
-
-**Output:** `site.webmanifest` included
-
----
-
-## 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:**
-
-```
-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
-
----
-
-## 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`                 |
-
----
-
-## Related Commands
-
-| Need                  | Command             |
-| --------------------- | ------------------- |
-| Edit generated icon   | `/edit-image`       |
-| Generate full image   | `/generate-image`   |
-| Create pattern        | `/generate-pattern` |
-| Analyze existing icon | `/analyze-mockup`   |