opencodekit 0.9.2 → 0.11.0

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

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

@@ -1,6 +1,6 @@
 ---
 description: Generate seamless patterns and textures
-argument-hint: "<description> [type: geometric|organic|abstract|texture] [colors: <palette>]"
+argument-hint: "<description> [--type=<type>] [--style=<style>] [--colors=<palette>] [--density=<level>] [--size=<px>]"
 agent: vision
 model: proxypal/gemini-3-pro-image-preview
 ---
@@ -9,33 +9,247 @@ model: proxypal/gemini-3-pro-image-preview
 
 Generate seamless, tileable patterns and textures.
 
-## Instructions
+## Parse Arguments
 
-Parse from `$ARGUMENTS`:
+| Argument        | Default   | Options                               |
+| --------------- | --------- | ------------------------------------- |
+| Description     | required  | What the pattern depicts              |
+| `--type`        | geometric | geometric, organic, abstract, texture |
+| `--style`       | none      | See style presets below               |
+| `--colors`      | auto      | Hex colors or preset name             |
+| `--density`     | medium    | sparse, medium, dense                 |
+| `--size`        | 512       | 256, 512, 1024, 2048                  |
+| `--repeat`      | tile      | tile, mirror, half-drop, brick        |
+| `--format`      | png       | png, svg, both                        |
+| `--transparent` | false     | Transparent background                |
 
-- Pattern description
-- Type (default: geometric)
-- Color palette (optional)
+---
 
-## Types
+## Pattern Types
 
-- **geometric**: Shapes, grids, lines
-- **organic**: Nature-inspired, flowing
-- **abstract**: Artistic, experimental
-- **texture**: Material surfaces (wood, marble, fabric)
+| Type        | Description                                     | Best For                      |
+| ----------- | ----------------------------------------------- | ----------------------------- |
+| `geometric` | Shapes, grids, lines, polygons                  | Modern UI, tech, corporate    |
+| `organic`   | Nature-inspired, flowing, irregular             | Wellness, eco, natural brands |
+| `abstract`  | Artistic, experimental, non-representational    | Creative, bold designs        |
+| `texture`   | Material surfaces (wood, marble, fabric, paper) | Backgrounds, realism          |
 
-## Requirements
+---
+
+## Style Presets
+
+| Style          | Description                    | Characteristics                     |
+| -------------- | ------------------------------ | ----------------------------------- |
+| `art-deco`     | 1920s geometric elegance       | Gold, black, symmetry, fan shapes   |
+| `memphis`      | 1980s bold & playful           | Bright colors, squiggles, dots      |
+| `scandinavian` | Nordic minimalism              | Muted colors, simple shapes, nature |
+| `japanese`     | Traditional Japanese motifs    | Waves, clouds, cherry blossoms      |
+| `moroccan`     | Islamic geometric patterns     | Intricate tiles, symmetry           |
+| `terrazzo`     | Speckled stone aggregate       | Colorful chips on neutral base      |
+| `botanical`    | Plant and floral elements      | Leaves, flowers, vines              |
+| `retro`        | Mid-century modern             | Atomic age, boomerangs, starbursts  |
+| `tribal`       | Ethnic and indigenous patterns | Bold lines, earth tones             |
+| `digital`      | Tech/circuit inspired          | Lines, nodes, grid patterns         |
+| `watercolor`   | Soft, painterly texture        | Bleeding edges, wash effects        |
+| `noise`        | Grain and static textures      | Film grain, static, subtle texture  |
+
+---
+
+## Color Palette Presets
+
+Use `--colors=<preset>` or specify hex values:
+
+| Preset    | Colors                    | Mood                  |
+| --------- | ------------------------- | --------------------- |
+| `mono`    | Single color + variations | Clean, minimal        |
+| `duotone` | Two contrasting colors    | Bold, striking        |
+| `earth`   | Browns, greens, tans      | Natural, organic      |
+| `ocean`   | Blues, teals, white       | Calm, professional    |
+| `sunset`  | Orange, pink, purple      | Warm, vibrant         |
+| `forest`  | Greens, browns, gold      | Earthy, grounded      |
+| `pastel`  | Soft, muted colors        | Gentle, friendly      |
+| `neon`    | Bright, saturated colors  | Energetic, bold       |
+| `neutral` | Grays, beige, white       | Sophisticated, subtle |
+| `jewel`   | Deep, rich colors         | Luxurious, premium    |
+
+**Custom colors:**
+
+```bash
+--colors=#FF5722,#4CAF50,#2196F3
+```
+
+---
+
+## Density Levels
+
+| Density  | Description                 | Use Case                     |
+| -------- | --------------------------- | ---------------------------- |
+| `sparse` | Few elements, lots of space | Subtle backgrounds, overlays |
+| `medium` | Balanced coverage           | General purpose              |
+| `dense`  | Tightly packed elements     | Bold statements, textures    |
+
+---
+
+## Repeat Modes
+
+| Mode        | Description               | Visual           |
+| ----------- | ------------------------- | ---------------- |
+| `tile`      | Direct repeat in grid     | ▢▢▢ / ▢▢▢ / ▢▢▢  |
+| `mirror`    | Flip alternating tiles    | ▢◻▢ / ◻▢◻ / ▢◻▢  |
+| `half-drop` | Offset by half vertically | ▢▢▢ / ·▢▢ / ▢▢▢  |
+| `brick`     | Offset like brickwork     | ▢▢▢ / ·▢▢▢ / ▢▢▢ |
+
+---
+
+## Use Cases
+
+### UI Backgrounds
+
+```bash
+# Subtle hero background
+/generate-pattern soft gradient noise --type=texture --density=sparse --colors=neutral --transparent
+
+# Card pattern overlay
+/generate-pattern geometric grid --style=digital --density=sparse --colors=#0066CC --transparent
+```
+
+### Print & Packaging
+
+```bash
+# Gift wrap
+/generate-pattern festive geometric shapes --style=memphis --colors=pastel --size=2048
+
+# Fabric print
+/generate-pattern botanical leaves --style=scandinavian --colors=forest --repeat=half-drop
+```
+
+### Branding
+
+```bash
+# Corporate pattern
+/generate-pattern subtle diagonal lines --type=geometric --colors=#1a1a1a --density=sparse
+
+# Playful brand pattern
+/generate-pattern abstract shapes and dots --style=memphis --colors=neon
+```
+
+### Textures
 
-- Must tile seamlessly in all directions
-- Generate at 512x512 minimum
-- Include both light and dark variants if useful
+```bash
+# Paper texture
+/generate-pattern subtle paper grain --type=texture --colors=#FAFAFA --density=medium
+
+# Marble surface
+/generate-pattern marble veins --type=texture --colors=#FFFFFF,#CCCCCC,#999999 --size=1024
+
+# Wood grain
+/generate-pattern oak wood grain --type=texture --colors=earth
+```
+
+---
+
+## Examples by Style
+
+```bash
+# Art Deco
+/generate-pattern fan shapes and gold lines --style=art-deco --colors=#1a1a1a,#D4AF37
+
+# Japanese
+/generate-pattern waves and clouds --style=japanese --colors=ocean
+
+# Terrazzo
+/generate-pattern colorful stone chips --style=terrazzo --colors=pastel --size=1024
+
+# Moroccan
+/generate-pattern intricate tile pattern --style=moroccan --colors=jewel
+
+# Scandinavian
+/generate-pattern simple leaf shapes --style=scandinavian --colors=#2D4739,#F5F5DC
+```
+
+---
 
 ## Output
 
-Save to `.opencode/memory/design/patterns/`:
+### File Structure
+
+```
+.opencode/memory/design/patterns/[name]/
+├── pattern-512.png           # Main pattern tile
+├── pattern-512.svg           # Vector version (if --format=svg)
+├── pattern-preview.png       # 3x3 tiled preview
+├── pattern-dark.png          # Dark variant (if applicable)
+└── usage.css                 # CSS snippet
+```
+
+### CSS Snippet
+
+```css
+/* Generated pattern usage */
+.pattern-background {
+  background-image: url("pattern-512.png");
+  background-repeat: repeat;
+  background-size: 128px 128px; /* Adjust for desired scale */
+}
+
+/* With overlay for text readability */
+.pattern-overlay {
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
+    url("pattern-512.png");
+  background-repeat: repeat;
+}
+
+/* CSS-only alternative (if simple enough) */
+.pattern-css {
+  background: repeating-linear-gradient(
+    45deg,
+    #f0f0f0,
+    #f0f0f0 10px,
+    #ffffff 10px,
+    #ffffff 20px
+  );
+}
+```
+
+---
+
+## Requirements
+
+- **Seamless tiling**: Must repeat perfectly in all directions
+- **Edge matching**: No visible seams when tiled
+- **Consistent density**: Even distribution across tile
+- **Color accuracy**: Match specified palette exactly
+
+---
+
+## Tips for Better Patterns
+
+1. **Be specific**: "Geometric triangles" > "shapes"
+2. **Reference styles**: "Like William Morris wallpaper"
+3. **Specify scale**: "Large-scale floral" vs "micro pattern"
+4. **Consider use**: "For dark text overlay" guides contrast
+5. **Test at scale**: Preview at intended display size
+
+---
+
+## Limitations
+
+| Limitation              | Workaround                                  |
+| ----------------------- | ------------------------------------------- |
+| Complex illustrations   | Use simpler, repeated motifs                |
+| Photorealistic textures | Use `--type=texture` with specific material |
+| Exact brand assets      | Provide reference, use as base              |
+| Perfect symmetry        | May need manual adjustment                  |
+| Text in patterns        | Add text in post-processing                 |
+
+---
 
-- Main pattern file
-- Tiled preview showing seamless repeat
-- CSS snippet for background usage
+## Related Commands
 
-Report generated files and usage example.
+| Need           | Command           |
+| -------------- | ----------------- |
+| Generate image | `/generate-image` |
+| Edit pattern   | `/edit-image`     |
+| Create icon    | `/generate-icon`  |
+| Analyze design | `/analyze-mockup` |