opencodekit 0.10.0 → 0.11.1

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`   |

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

@@ -1,27 +1,247 @@
 ---
 description: Generate images using Gemini image models
-argument-hint: "<prompt> [--style=<style>] [--pro]"
+argument-hint: "<prompt> [--style=<style>] [--aspect=<ratio>] [--size=<size>] [--count=<n>] [--pro]"
 agent: vision
 model: proxypal/gemini-3-pro-image-preview
 ---
 
 # Generate Image: $ARGUMENTS
 
-Generate an image based on the provided prompt.
+Generate images based on natural language prompts.
 
-## Instructions
+## Parse Arguments
 
-Parse the prompt and any style modifiers from `$ARGUMENTS`.
+| Argument   | Default  | Options                          |
+| ---------- | -------- | -------------------------------- |
+| Prompt     | required | Natural language description     |
+| `--style`  | none     | See style presets below          |
+| `--aspect` | 1:1      | 1:1, 16:9, 9:16, 4:3, 3:4        |
+| `--size`   | default  | default, hd, 2k                  |
+| `--count`  | 1        | 1-4 variations                   |
+| `--pro`    | false    | Use Pro model for higher quality |
+| `--png`    | false    | Output PNG instead of JPEG       |
 
-If `--pro` flag is present, confirm using the Pro model for higher quality.
+---
+
+## Style Presets
+
+Use `--style=<name>` to apply consistent aesthetics:
+
+| Style            | Description                            | Best For                    |
+| ---------------- | -------------------------------------- | --------------------------- |
+| `photorealistic` | High-detail photography                | Products, portraits, scenes |
+| `cinematic`      | Movie-quality lighting, depth of field | Drama, atmosphere           |
+| `illustration`   | Clean vector-style artwork             | Icons, diagrams, UI         |
+| `watercolor`     | Soft, painterly textures               | Art, backgrounds            |
+| `anime`          | Japanese animation style               | Characters, scenes          |
+| `3d-render`      | CGI/Blender-style render               | Products, architecture      |
+| `sketch`         | Pencil/charcoal drawing                | Concepts, wireframes        |
+| `pixel-art`      | Retro 8-bit/16-bit style               | Games, nostalgia            |
+| `oil-painting`   | Classical art texture                  | Portraits, landscapes       |
+| `minimalist`     | Simple shapes, flat colors             | Logos, icons                |
+| `isometric`      | 3D isometric view                      | Diagrams, games             |
+| `vintage`        | Aged, retro photograph look            | Nostalgia, branding         |
+
+---
+
+## Aspect Ratios
+
+| Ratio  | Dimensions         | Use Case                               |
+| ------ | ------------------ | -------------------------------------- |
+| `1:1`  | Square             | Social media, avatars, icons           |
+| `16:9` | Landscape wide     | Hero images, banners, video thumbnails |
+| `9:16` | Portrait tall      | Mobile, stories, vertical content      |
+| `4:3`  | Landscape standard | Presentations, traditional photos      |
+| `3:4`  | Portrait standard  | Portraits, product photos              |
+
+---
+
+## Prompt Engineering
+
+### Good Prompt Structure
+
+```
+[Subject] + [Action/Pose] + [Environment] + [Style] + [Lighting] + [Quality modifiers]
+```
+
+**Example:**
+
+```
+A golden retriever playing fetch in a sunny park,
+soft afternoon light, shallow depth of field,
+professional photography, 8k, highly detailed
+```
+
+### Quality Modifiers (add to any prompt)
+
+| Modifier                   | Effect                   |
+| -------------------------- | ------------------------ |
+| "highly detailed"          | Increases fine detail    |
+| "8k" / "4k"                | Suggests high resolution |
+| "professional photography" | Photorealistic quality   |
+| "sharp focus"              | Crisp subject            |
+| "soft lighting"            | Gentle, flattering light |
+| "dramatic lighting"        | High contrast, mood      |
+| "shallow depth of field"   | Blurred background       |
+| "studio lighting"          | Clean, even light        |
+
+### Negative Prompts
+
+Include what to avoid in your prompt:
+
+```
+A modern logo design, clean lines, minimalist,
+avoid: text, watermarks, busy backgrounds, gradients
+```
+
+Common exclusions:
+
+- "no text" / "avoid text"
+- "no watermarks"
+- "no people"
+- "avoid clutter"
+- "no blurry elements"
+
+---
+
+## Examples by Category
+
+### Product Photography
+
+```bash
+# Product shot
+/generate-image A sleek wireless headphone on white background, studio lighting, product photography --style=photorealistic --aspect=4:3
+
+# Lifestyle product
+/generate-image Coffee mug on wooden desk with morning light, cozy atmosphere, shallow depth of field --style=cinematic --aspect=16:9
+```
+
+### UI/Design Assets
+
+```bash
+# Icon
+/generate-image A simple cloud upload icon, flat design, blue and white --style=minimalist --aspect=1:1
+
+# Illustration
+/generate-image Team collaboration illustration, people working together, modern flat style --style=illustration --aspect=16:9
+
+# Pattern
+/generate-image Seamless geometric pattern, navy and gold, art deco style --style=minimalist --aspect=1:1
+```
+
+### Marketing/Social
+
+```bash
+# Hero image
+/generate-image Futuristic city skyline at sunset, cyberpunk aesthetic, neon lights --style=cinematic --aspect=16:9 --pro
 
-Create a detailed image generation prompt that includes:
+# Social media
+/generate-image Abstract gradient background, purple and blue, smooth waves --style=minimalist --aspect=1:1
 
-- The core subject/scene from user's prompt
-- Style direction if `--style` was specified
-- Composition and lighting suggestions
-- Any relevant artistic details
+# Story format
+/generate-image Mountain landscape with hiker, adventure theme, dramatic sky --style=photorealistic --aspect=9:16
+```
+
+### Concept Art
+
+```bash
+# Character
+/generate-image Fantasy warrior character, detailed armor, dynamic pose --style=illustration --aspect=3:4 --pro
+
+# Environment
+/generate-image Abandoned space station interior, sci-fi, atmospheric lighting --style=cinematic --aspect=16:9
+
+# Creature
+/generate-image Friendly dragon mascot, cute, approachable, cartoon style --style=illustration --aspect=1:1
+```
+
+---
+
+## Batch Generation
+
+Use `--count` to generate variations:
+
+```bash
+# Generate 4 variations
+/generate-image Modern logo concepts for a tech startup --style=minimalist --count=4
+```
+
+Output:
+
+```
+Generated 4 images:
+├── tech-logo-v1.png
+├── tech-logo-v2.png
+├── tech-logo-v3.png
+└── tech-logo-v4.png
+```
+
+---
+
+## Output
+
+### Standard Output
+
+```markdown
+## Image Generated
+
+**Prompt:** "A golden retriever in a sunny park"
+**Style:** photorealistic
+**Aspect:** 16:9
+**Size:** HD
+**Output:** `.opencode/memory/design/images/golden-retriever-park-001.jpg`
+
+### Generation Details
+
+- Model: gemini-3-pro-image-preview
+- Enhanced prompt: [show the full prompt used]
+- Generation time: 4.2s
+
+### Refinements
+
+- "Make the dog larger in frame"
+- "Add more vibrant colors"
+- "Change to sunset lighting"
+```
+
+---
+
+## Limitations
+
+| Limitation         | Details                              |
+| ------------------ | ------------------------------------ |
+| **Text in images** | AI struggles to render readable text |
+| **Specific faces** | Cannot generate real people          |
+| **Hands/fingers**  | Often produces artifacts             |
+| **Exact counts**   | "5 birds" may show 4 or 6            |
+| **Brand logos**    | May refuse or distort                |
+| **Complex scenes** | Many elements = inconsistency        |
+| **Precise layout** | Spatial positioning is approximate   |
+
+### Tips to Avoid Issues
+
+- Don't request text - add it in post-processing
+- Keep subject count low (1-3 main elements)
+- Be specific about what's important
+- Use style presets for consistency
+- Generate multiple variations, pick best
+
+---
+
+## Storage
+
+Images saved to: `.opencode/memory/design/images/`
+
+Filename pattern: `[subject]-[style]-[timestamp].{jpg|png}`
+
+---
 
-Generate the image and save to `.opencode/memory/design/images/` with a descriptive filename.
+## Related Commands
 
-Report the generated image path and offer to refine if needed.
+| Need                | Command             |
+| ------------------- | ------------------- |
+| Edit existing image | `/edit-image`       |
+| Generate icon       | `/generate-icon`    |
+| Generate diagram    | `/generate-diagram` |
+| Analyze image       | `/analyze-mockup`   |
+| Create pattern      | `/generate-pattern` |