synabun 1.3.0

package/skills/leonardo/modules/browser-guide.md

@@ -0,0 +1,378 @@
+# Leonardo.ai Browser Navigation Guide
+
+This module maps every Leonardo.ai UI control to browser automation instructions. Use this to configure settings before generating.
+
+**Important:** Leonardo.ai is a React app. Some elements don't respond to standard CSS selector clicks. When `browser_click` fails, use `browser_evaluate` with JavaScript to click elements directly.
+
+---
+
+## General Patterns
+
+### Clicking buttons that contain multi-line text
+Leonardo buttons often contain nested elements. Use `browser_evaluate`:
+```javascript
+(() => {
+  const btns = document.querySelectorAll('button');
+  for (const b of btns) {
+    if (b.textContent.includes('TARGET_TEXT')) { b.click(); return 'clicked'; }
+  }
+  return 'not found';
+})()
+```
+
+### Closing dialogs/panels
+- Press `Escape` via `browser_press key: "Escape"`
+- Or click the close button if visible
+
+### Waiting after actions
+After clicking buttons that open panels/dialogs, wait 1-2 seconds before taking a snapshot:
+```
+browser_wait timeout: 2000
+browser_snapshot
+```
+
+---
+
+## IMAGE GENERATION PAGE
+
+**URL:** `https://app.leonardo.ai/image-generation`
+
+### Model Selection
+1. Click the Model button:
+   ```javascript
+   (() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Model')); if (b) { b.click(); return 'opened'; } return 'not found'; })()
+   ```
+2. A dialog opens with tabs: **Image** | **Video** | **Legacy**. Image tab is selected by default.
+3. Click the desired model button (each model is a button with an article inside):
+   ```javascript
+   (() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('MODEL_NAME')); if (b) { b.click(); return 'selected'; } return 'not found'; })()
+   ```
+
+**Available Image Models (March 2026):**
+| Model | Best For | Cost | Capabilities |
+|-------|----------|------|-------------|
+| Auto | Let Leonardo pick | Varies | — |
+| Nano Banana 2 | Fast, sharp details, editing | Paid | Image Ref |
+| Seedream 4.5 | Posters, logos, text-heavy | Paid | Image Ref |
+| Lucid Origin | Prompt adherence, text, HD | Unlimited | Style Ref, Content Ref |
+| FLUX.2 Pro | High-fidelity, prompt adherence | Paid | Image Guidance |
+| GPT Image-1.5 | Editing control, detail preservation | Paid | Image Ref |
+| Nano Banana Pro | Consistency, infographics | Paid | Image Ref |
+| Seedream 4.0 | Ultra quality, consistency | Paid | Image Ref |
+| Nano Banana | Context-aware edits, consistency | Paid | Image Ref |
+| Lucid Realism | Cinematic, pairs w/ video gen | Unlimited | Style Ref, Content Ref |
+| Ideogram 3.0 | Text rendering, consistency | Paid | — |
+| GPT-Image-1 | State-of-the-art generation | Paid | Image Ref |
+| FLUX.1 Kontext Max | Maximum quality output | Paid | Image Ref |
+| FLUX.1 Kontext | Precise, controllable generation | Paid | Image Ref |
+| FLUX Dev | Detailed, realistic images | Unlimited | Style Ref, Content Ref, Elements |
+| FLUX Schnell | Fast, quality outputs | Unlimited | Style Ref, Content Ref |
+| Phoenix 1.0 | Prompt adherence, text rendering | Unlimited | Image to Image, Style/Content/Character Ref |
+| Phoenix 0.9 | Foundational model preview | Unlimited | Image to Image, Style/Content/Character Ref |
+
+### Style Preset
+Click the Style combobox (shows current style, default "Dynamic"):
+```javascript
+(() => { const c = document.querySelector('[role="combobox"]'); if (c) { c.click(); return 'opened'; } return 'not found'; })()
+```
+Then click the desired option from the listbox:
+```
+browser_click selector: "option:has-text('STYLE_NAME')"
+```
+
+**Available Styles:** Dynamic (default), Cinematic, Creative, Fashion, None, Portrait, Stock Photo, Vibrant
+
+### Image Dimensions
+Click the aspect ratio radio buttons:
+```
+browser_click selector: "[role='radio']:has-text('RATIO')"
+```
+
+**Preset Options:** 2:3, 1:1 (default), 16:9, Custom
+
+**Custom Dimensions** — clicking "Custom" opens a dialog with:
+- Aspect ratio slider (Wide ↔ Tall, centered at 1:1)
+- Social presets: Twitter/X (4:3), Instagram (4:5), TikTok (9:16)
+- Device presets: Desktop (16:9), Square (1:1)
+
+Click presets:
+```
+browser_click selector: "[role='radio']:has-text('Instagram (4:5)')"
+```
+
+### Number of Images
+Click the count radio:
+```
+browser_click selector: "[role='radio']:has-text('NUMBER')"
+```
+**Options:** 1 (default), 2, 3, 4
+
+### Add Elements / Reference Images
+Click the "Add elements" button near the prompt to access image-to-image, style reference, content reference, and other advanced features (availability depends on selected model).
+
+**Preferred method — use the dedicated tool:**
+```
+leonardo_browser_reference type: "style_ref" filePaths: ["/path/to/image.png"] autoClear: true
+```
+This automates the full flow: opens the panel, selects the reference type, uploads the file(s), and auto-clears from the SynaBun image store.
+
+**Manual method (fallback):**
+1. Click "Add elements":
+```javascript
+(() => {
+  const btns = document.querySelectorAll('button');
+  for (const b of btns) {
+    if (b.textContent.includes('Add elements')) { b.click(); return 'opened'; }
+  }
+  return 'not found';
+})()
+```
+2. Wait for panel to open, then `browser_snapshot` to see available reference types.
+3. Click the desired reference type (e.g., "Style Reference", "Image Reference", "Content Reference").
+4. Upload the image file:
+```
+browser_upload selector: "input[type='file']" filePaths: ["/path/to/image.png"]
+```
+5. Optionally adjust the strength slider if visible.
+6. Close the panel with Escape or continue to prompt.
+
+**Reference type availability by model:**
+| Model | Image Ref | Style Ref | Content Ref | Character Ref | Image-to-Image |
+|-------|-----------|-----------|-------------|---------------|----------------|
+| Lucid Origin | — | Yes | Yes | — | — |
+| Lucid Realism | — | Yes | Yes | — | — |
+| FLUX Dev | — | Yes | Yes | — | — |
+| FLUX Schnell | — | Yes | Yes | — | — |
+| Phoenix 1.0 | — | Yes | Yes | Yes | Yes |
+| Phoenix 0.9 | — | Yes | Yes | Yes | Yes |
+| Nano Banana 2 | Yes | — | — | — | — |
+| Seedream 4.5 | Yes | — | — | — | — |
+| GPT Image-1.5 | Yes | — | — | — | — |
+| Nano Banana Pro | Yes | — | — | — | — |
+| FLUX.1 Kontext | Yes | — | — | — | — |
+| Ideogram 3.0 | — | — | — | — | — |
+
+### Prompt
+The prompt textbox has `aria-label="Prompt"`. Use `leonardo_browser_generate` to fill it and click Generate, or fill manually:
+```
+browser_fill selector: "[aria-label='Prompt']" value: "your prompt here"
+```
+
+---
+
+## VIDEO GENERATION PAGE
+
+**URL:** `https://app.leonardo.ai/image-generation/video`
+
+### Model Selection
+Same pattern as image — click the Model button, but the Video tab is auto-selected on the video page.
+
+**Available Video Models (March 2026):**
+| Model | Best For | Cost | Capabilities |
+|-------|----------|------|-------------|
+| Kling Video 3.0 | Longer videos, audio, consistency | Paid | Start/End Frame, Audio |
+| Kling Video O3 Omni | Longer videos, audio, image ref | Paid | Start/End Frame, Image Ref, Audio |
+| Veo 3.1 Fast | Fast video concepts | Paid | Fast, Start/End Frame, Audio |
+| Hailuo 2.3 | Affordable, high-quality, style | Paid | Start Frame |
+| Kling 2.6 | Visuals, voiceovers, sound | Paid | Start Frame, Audio |
+| Seedance 1.0 Pro Fast | Prompt following, details | Paid | Start Frame, Fast |
+| Kling O1 Video Model | Accuracy, multi-instruction prompts | Paid | Start/End Frame, Image Ref |
+| Hailuo 2.3 Fast | Fast, lifelike motion | Paid | Start Frame |
+| Sora 2 Pro | Smooth cinematic, refined detail | Paid | Start Frame, Audio |
+| Sora 2 | Multi-shot continuity, audio | Paid | Start Frame, Audio |
+| Veo 3.1 | Cinematic storytelling | Paid | Start/End Frame, Image Ref, Audio |
+| Kling 2.5 Turbo | Narrative control, start frames | Paid | Start/End Frame |
+| Kling 2.5 Turbo Standard | Fast, lower cost | Paid | Start Frame |
+| Seedance 1.0 Pro | Precise motion, consistency | Paid | Start/End Frame |
+| Kling 2.1 Pro | Seamless video transitions | Paid | Start/End Frame |
+| LTX-2 Pro | Polished visuals, quick | Paid | Start Frame, Audio |
+| Seedance 1.0 Lite | Fast, camera shots, expressions | Paid | Start/End Frame, Image Ref |
+| LTX-2 Fast | Enhanced textures, industry speed | Paid | Fast, Start Frame, Audio |
+| Veo 3 | Realistic cinematic, audio | Paid | Start Frame, Audio |
+| Veo 3 Fast | Quick concepts, fast viz | Paid | Fast, Start Frame, Audio |
+| Motion 2.0 | High-quality, fine-tuned controls | **Unlimited** | Start Frame, Controls, Elements, Styles |
+| Motion 2.0 Fast | Fast preview, high quality | **Unlimited** | Fast, Start Frame, Controls, Elements, Styles |
+| Motion 1.0 | Basic, subtle motion | **Unlimited** | Start Frame |
+
+**Note:** Only Motion 2.0 and Motion 2.0 Fast support Motion Controls, Motion Elements, and Style Stacking. Other models use their own built-in styles.
+
+### Motion Control
+Click the "Motion Control" button to open the motion control dialog:
+```javascript
+(() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Motion Control') && !b.textContent.includes('Elements')); if (b) { b.click(); return 'opened'; } return 'not found'; })()
+```
+
+Select a motion control from the dialog:
+```javascript
+(() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.trim() === 'CONTROL_NAME'); if (b) { b.click(); return 'selected'; } return 'not found'; })()
+```
+
+**39 Motion Controls:**
+**Camera Movement:** Dolly In, Dolly Out, Dolly Left, Dolly Right, Crane Up, Crane Down, Crane Over Head, Tilt Up, Tilt Down, Orbit Left, Orbit Right, Rotate, Dutch Angle, Snorricam, Robo Arm, Lazy Susan
+**Zoom:** Crash Zoom In, Crash Zoom Out, Medium Zoom In, Super Dolly In, Super Dolly Out, YoYo Zoom, Bullet Time
+**Effects:** Explosion, Disintegration, Freezing, Flood, Set on Fire, Thunder God, Night, Metal, Light Morph, Ripple Morph, Lens Crack, Touch Glass, Tattoo Motion, Handheld, Eyes In, Mouth In
+**None:** Removes any motion control
+
+### Motion Elements
+Click the "Motion Elements" button:
+```javascript
+(() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Motion Elements') ); if (b) { b.click(); return 'opened'; } return 'not found'; })()
+```
+
+**27 Motion Elements (creative style overlays):**
+90s Retro Anime, CGI Noir, Claynimation, Dark Fantasy, Digital Painting, Dreamcore, Editorial Blur, Felted, Glowwave, Golden Age Cinema, Inkflow, Moody Realism, Oldschool Comic, Old VHS, Pixel Art, Quiet Blue Hour, Retro Line Art, Silver Hue Analog, Simple Flat Animation, Soft Infrared, Stylized 3Dtoon, Sunny Nostalgia, Synthwave, Vintage Black & White, Watercolor, Whimsy Animation, Y2K Analog, None
+
+### Style Stacking (Vibe + Lighting + Color Theme)
+The Style section has three layers. Click each button to open its panel, then select from the options. You can stack one from each layer.
+
+**Opening style panels:**
+Click the Vibe/Lighting/Color Theme button in the sidebar. A panel opens with tabs for the other two layers.
+
+**Vibe options (9):** Clay, Color Sketch, Logo, Papercraft, Pro Photo, Sci-Fi, Sketch, Stock Footage, None
+
+**Lighting options (16):** Backlight, Candle Lit, Chiaroscuro, Film Haze, Foggy, Golden Hour, Hardlight, Lens Flare, Light Art, Low Key, Luminous, Mystical, Rainy, Soft Light, Volumetric, None
+
+**Color Theme options (14):** Autumn, Complimentary, Cool, Dark, Earthy, Electric, Iridescent, Pastel, Split, Terracotta Teal, Ultraviolet, Vibrant, Warm, None
+
+**To select a style from any layer:**
+1. Click the layer button (Vibe/Lighting/Color Theme) to open the panel
+2. If needed, click the tab to switch between layers
+3. Click the style button:
+```javascript
+(() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.trim() === 'STYLE_NAME'); if (b) { b.click(); return 'selected'; } return 'not found'; })()
+```
+4. Close the panel with Escape or click the close button
+
+**To clear all styles:** Click "Clear all" button in the Style section.
+
+### Prompt Enhance
+Click the Prompt Enhance combobox:
+```javascript
+(() => { const c = document.querySelector('[role="combobox"]'); if (c) { c.click(); return 'opened'; } return 'not found'; })()
+```
+
+**Options:**
+- **Auto** (default) — Short prompts expanded, long prompts left as-is
+- **On** — Always refine prompts
+- **Off** — Never modify prompts
+
+**Recommendation:** Set to "Off" when using carefully engineered prompts from the prompter modules. Set to "Auto" for quick/casual generation.
+
+### Generation Mode / Resolution
+The Generation Mode section shows resolution options. These change depending on the selected model.
+- For Motion 2.0 Fast: shows "Quality 720p" as a radio option
+- Other models may show different options (480p, 720p, 1080p)
+
+### Video Dimensions
+```
+browser_click selector: "[role='radio']:has-text('RATIO')"
+```
+**Options:** Auto (default), 2:3, 4:5, 9:16
+
+### Number of Generations
+```
+browser_click selector: "[role='radio']:has-text('NUMBER')"
+```
+**Options:** 1 (default), 2, 3, 4
+
+### Advanced Settings
+Click the "Advanced Settings" button to expand:
+```javascript
+(() => { const b = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Advanced Settings')); if (b) { b.click(); return 'expanded'; } return 'not found'; })()
+```
+
+**Reveals:**
+- **Smooth Video** — toggle for smoother frame interpolation
+- **Negative Prompt** — toggle on to reveal a text input for negative prompts
+- **Use Fixed Seed** — toggle for reproducible results
+
+To toggle a switch, find and click it:
+```javascript
+(() => {
+  const switches = document.querySelectorAll('[role="switch"]');
+  // Toggle Negative Prompt has aria-label
+  const np = Array.from(switches).find(s => s.getAttribute('aria-label') === 'Toggle Negative Prompt');
+  if (np) { np.click(); return 'toggled'; }
+  return 'not found';
+})()
+```
+
+### Image Guidance (Start/End Frame & Reference)
+
+**Preferred method — use the dedicated tool:**
+```
+leonardo_browser_reference type: "start_frame" filePaths: ["/path/to/image.png"] autoClear: true
+```
+For end frames (supported models only):
+```
+leonardo_browser_reference type: "end_frame" filePaths: ["/path/to/image.png"] autoClear: true
+```
+
+**Manual method (fallback):**
+1. Click "Add Image Guidance to generation" button near the prompt:
+```javascript
+(() => {
+  const btns = document.querySelectorAll('button');
+  for (const b of btns) {
+    if (b.textContent.includes('Image Guidance') || b.textContent.includes('Add Image')) {
+      b.click(); return 'opened';
+    }
+  }
+  return 'not found';
+})()
+```
+2. Upload the image:
+```
+browser_upload selector: "input[type='file']" filePaths: ["/path/to/image.png"]
+```
+3. For end frame, look for an "End Frame" tab or toggle after uploading the start frame.
+
+**Video reference capabilities by model:**
+| Model | Start Frame | End Frame | Image Ref |
+|-------|-------------|-----------|-----------|
+| All video models | Yes | — | — |
+| Kling Video 3.0 | Yes | Yes | — |
+| Kling Video O3 Omni | Yes | Yes | Yes |
+| Veo 3.1 | Yes | Yes | Yes |
+| Kling O1 | Yes | Yes | Yes |
+| Seedance 1.0 Lite | Yes | Yes | Yes |
+| Kling 2.5 Turbo | Yes | Yes | — |
+| Kling 2.1 Pro | Yes | Yes | — |
+| Seedance 1.0 Pro | Yes | Yes | — |
+
+### Prompt & Generate
+Same as image page — use `leonardo_browser_generate` to fill prompt and click Generate.
+
+---
+
+## LIBRARY PAGE
+
+**URL:** `https://app.leonardo.ai/library`
+
+Use `leonardo_browser_library` to navigate here. Use `browser_snapshot` to see generations.
+
+**Actions on generations:**
+- Copy prompt: click "Copy prompt" button
+- Reuse prompt: click "Reuse prompt" button
+- Iterate: click "Iterate" button to refine
+- Download: click "Download All" button
+- Delete: click "Delete All" button
+
+---
+
+## UPSCALER PAGE
+
+**URL:** `https://app.leonardo.ai/universal-upscaler`
+
+Navigate via `leonardo_browser_navigate page: "upscaler"`. Use `browser_snapshot` to see the UI, then interact with the available controls.
+
+---
+
+## Error Recovery
+
+If a click fails:
+1. Take a `browser_snapshot` to see current page state
+2. Look for the element in the snapshot output
+3. Try alternative selectors or `browser_evaluate` with JavaScript
+4. If a dialog is blocking, press Escape first
+5. If the page hasn't loaded, `browser_wait loadState: "load" timeout: 10000`

package/skills/leonardo/modules/image-prompter.md

@@ -0,0 +1,277 @@
+# Image Prompter — Guided Questionnaire
+
+Guide the user through creating the perfect image on Leonardo.ai. Ask questions using `AskUserQuestion`, then engineer the optimal prompt and configure all browser settings.
+
+**Important:** This is a browser-based workflow. After the questionnaire, you'll set all parameters in the Leonardo.ai UI using browser tools, then fill the prompt and click Generate.
+
+---
+
+## Phase 1 — Vision (What do you want to create?)
+
+Ask the user to describe their image concept. If `$TOPIC` was set by the router, use it as the starting point and skip asking — but still categorize it.
+
+**Do NOT use AskUserQuestion here** — this requires free-text input. Output a natural chat message:
+
+> **What kind of image do you want to create?**
+> Describe your vision — subject, scene, mood, purpose. You can also paste or drag reference images for inspiration.
+
+Wait for the user's typed response. After they respond, categorize into one of:
+- **Portrait/People** — headshots, characters, fashion, editorial
+- **Landscape/Architecture** — environments, buildings, scenery
+- **Product/Commercial** — product shots, e-commerce, branding
+- **Illustration/Art** — concept art, digital painting, fantasy
+- **Abstract** — patterns, textures, experimental
+- **Photography** — street, documentary, lifestyle
+- **Logo/Design** — logos, icons, typography, posters
+- **Anime/Manga** — anime-style characters, manga illustrations
+- **Sci-Fi/Fantasy** — futuristic, otherworldly, imaginative
+
+Store as `$CATEGORY`.
+
+---
+
+## Phase 2 — Model Selection
+
+Present model options based on `$CATEGORY`. Use `AskUserQuestion`:
+
+> **Which image model should we use?**
+
+- **Auto (Recommended)** — "I'll pick the best model for your concept"
+- **Lucid Origin** — "Free, unlimited. Excellent prompt adherence and text rendering, HD output"
+- **Lucid Realism** — "Free, unlimited. Best for cinematic shots, pairs great with video generation"
+- **FLUX Dev** — "Free, unlimited. Detailed, realistic images with style/content reference support"
+- **FLUX Schnell** — "Free, unlimited. Fast, quality outputs"
+- **Phoenix 1.0** — "Free, unlimited. Great prompt adherence, text rendering, image-to-image support"
+- **Seedream 4.5** — "Premium. Best for posters, logos, and text-heavy designs"
+- **FLUX.2 Pro** — "Premium. Advanced prompt adherence with high-fidelity results"
+- **GPT Image-1.5** — "Premium. Superior editing control and detail preservation"
+- **Ideogram 3.0** — "Premium. Best text rendering and consistent generation"
+- **Let me choose from all models** — "Show me the full list"
+
+If **Auto**, select based on category:
+| Category | Recommended Model | Why |
+|----------|------------------|-----|
+| Portrait/People | Lucid Realism | Cinematic realism, free |
+| Landscape/Architecture | FLUX.2 Pro or FLUX Dev | High fidelity |
+| Product/Commercial | GPT Image-1.5 | Editing control |
+| Illustration/Art | FLUX Dev or Phoenix 1.0 | Creative flexibility |
+| Abstract | FLUX Dev | Style/content ref support |
+| Photography | Lucid Realism | Photorealistic |
+| Logo/Design | Seedream 4.5 or Ideogram 3.0 | Text rendering |
+| Anime/Manga | Phoenix 1.0 | Preset support |
+| Sci-Fi/Fantasy | FLUX.2 Pro | High fidelity |
+
+Store as `$MODEL`.
+
+---
+
+## Phase 2.5 — Reference Images (Optional)
+
+Check if the user attached images with their **current message** (file paths appear at the top of the prompt). Do NOT check `image_staged` here — old staged images are not reference candidates.
+
+**If images are attached to the current message**, present options based on the selected model's capabilities. Use `AskUserQuestion`:
+
+> **You have N reference image(s) available. How should Leonardo use them?**
+
+Options — show ONLY those supported by `$MODEL` (see model-advisor.md capability table):
+
+| Reference Type | Supported By | What It Does |
+|----------------|-------------|--------------|
+| **Image Reference** | Nano Banana 2, Seedream 4.5, GPT Image-1.5, Nano Banana Pro, FLUX.1 Kontext | Use image as direct visual reference |
+| **Style Reference** | Lucid Origin, Lucid Realism, FLUX Dev, FLUX Schnell, Phoenix 1.0/0.9 | Extract and apply the visual style |
+| **Content Reference** | Lucid Origin, Lucid Realism, FLUX Dev, FLUX Schnell, Phoenix 1.0/0.9 | Extract and match the content/composition |
+| **Character Reference** | Phoenix 1.0, Phoenix 0.9 | Maintain character consistency |
+| **Image-to-Image** | Phoenix 1.0, Phoenix 0.9 | Transform the reference into a new image |
+| **Skip** | — | "Don't use reference images" |
+
+If the selected model supports NONE of the reference types, inform the user and skip: *"[Model] doesn't support reference images. Continuing without."*
+
+Store as `$REFERENCE_TYPE` and `$REFERENCE_PATHS`.
+
+**If no images are attached**, ask the user if they'd like to use reference images. First check if `$MODEL` supports any reference types from the table above — if it supports NONE, skip this phase silently.
+
+If the model supports at least one reference type, use `AskUserQuestion`:
+
+> **Would you like to use reference images?**
+> Reference images let Leonardo match a style, composition, or visual from an existing image.
+
+- **Yes** — "I have images I'd like to use as reference"
+- **No** — "Continue without reference images"
+
+If **Yes**, respond with this message (plain text, not AskUserQuestion):
+
+> **Attach your reference image(s) to the chat.**
+> Copy the message below, paste it in the input box, attach your images, and send:
+> ```
+> Here are my reference images
+> ```
+
+Then wait for the user's next message. Check for file paths at the top of their message and also check `image_staged` (action: "list", type: "attachment") for newly attached images. If images are found, proceed with the reference type selection above (the "If images are attached" flow). If no images were found, inform the user no images were detected and ask them to try again or skip.
+
+If **No**, continue to Phase 3.
+
+---
+
+## Phase 3 — Style Preset
+
+Use `AskUserQuestion`:
+
+> **What visual style do you want?**
+
+- **Dynamic** (default) — "Balanced, versatile style for most subjects"
+- **Cinematic** — "Film-like quality with dramatic lighting and depth"
+- **Creative** — "Artistic, painterly, experimental"
+- **Vibrant** — "Bold colors, high saturation, punchy"
+- **Portrait** — "Optimized for faces and people"
+- **Fashion** — "Editorial, high-fashion aesthetic"
+- **Stock Photo** — "Clean, commercial, stock photography look"
+- **None** — "No style preset — full prompt control"
+
+**Auto-recommendation by category:**
+| Category | Recommended Style |
+|----------|------------------|
+| Portrait/People | Portrait or Cinematic |
+| Landscape/Architecture | Dynamic or Cinematic |
+| Product/Commercial | Stock Photo or Dynamic |
+| Illustration/Art | Creative |
+| Abstract | Creative or None |
+| Photography | Dynamic or Cinematic |
+| Logo/Design | None or Dynamic |
+| Anime/Manga | Dynamic or Creative |
+| Sci-Fi/Fantasy | Cinematic or Creative |
+
+Present the recommendation but let them choose.
+
+Store as `$STYLE`.
+
+---
+
+## Phase 4 — Dimensions & Composition
+
+Use `AskUserQuestion`:
+
+> **What dimensions/aspect ratio?**
+
+- **Square (1:1)** — "1024x1024. Versatile, social media, profile pictures"
+- **Portrait (2:3)** — "Tall format. People, Pinterest, posters"
+- **Landscape (16:9)** — "Wide format. Wallpapers, headers, cinematic"
+- **Custom** — "Choose from social presets or set a custom ratio"
+
+If **Custom**, offer social/device presets:
+- **Twitter/X (4:3)** — "Timeline-optimized"
+- **Instagram (4:5)** — "Feed-optimized, tall"
+- **TikTok (9:16)** — "Vertical, full-screen"
+- **Desktop (16:9)** — "Widescreen wallpaper"
+
+Store as `$DIMENSIONS`.
+
+---
+
+## Phase 5 — Quantity & Details
+
+Use `AskUserQuestion`:
+
+> **How many images do you want?**
+
+- **1** — "Single image, fastest"
+- **2** — "Two variations to compare"
+- **3** — "Three options"
+- **4** — "Four variations, maximum choice"
+
+Store as `$NUM_IMAGES`.
+
+---
+
+## Phase 5.5 — Creative Brief
+
+You've gathered all the technical settings. Now get the user's **detailed creative vision** before engineering the prompt.
+
+**Do NOT use AskUserQuestion here** — this requires free-text input. Output a natural chat message summarizing the config and asking for the detailed description:
+
+> **Here's your setup:**
+> - **Model:** $MODEL
+> - **Style:** $STYLE
+> - **Dimensions:** $DIMENSIONS
+> - **Images:** $NUM_IMAGES
+> [If reference images: **Reference:** $REFERENCE_TYPE with N image(s)]
+>
+> **Now describe your image in detail.**
+> What's the subject? The scene, composition, lighting, mood, colors? Any specific elements you want included or avoided? The more detail you give, the better I can craft the prompt.
+
+Wait for the user's typed response. Store their detailed description as `$CREATIVE_BRIEF`. This replaces the brief Phase 1 concept as the **primary input** for prompt engineering below.
+
+---
+
+## Phase 6 — Prompt Engineering
+
+Now engineer the optimal prompt using `$CREATIVE_BRIEF` (the user's detailed description from Phase 5.5) combined with the style context from earlier phases. Follow these rules:
+
+### Image Prompt Rules
+1. **Subject first** — the main focus of the image
+2. **Materials & texture** — "brushed aluminum", "weathered oak", "silk fabric"
+3. **Lighting is critical** — "rim lighting", "soft diffused north-facing window", "dramatic chiaroscuro"
+4. **Camera language for photorealistic** — "85mm f/1.4", "wide-angle 24mm", "macro close-up"
+5. **Art medium for illustrations** — "oil painting", "watercolor wash", "digital concept art"
+6. **Color palette** — "muted earth tones", "neon pink and teal", "monochromatic blue"
+7. **Avoid vague words** — never "beautiful", "stunning", "amazing", "nice"
+8. **1-3 sentences** — concise, every word counts
+9. **Negative prompt for realism** — remove unwanted elements
+
+### Prompt Structure Template
+```
+[Subject and action], [environment/setting], [lighting description], [camera/art style], [color and mood]
+```
+
+### Example Transformations
+**User says:** "A portrait of a woman"
+**Engineered:** "Editorial portrait of a woman in her 30s with natural curly hair, wearing a charcoal linen blazer against a blurred urban backdrop, shot at 85mm f/1.4 with soft window light from the left creating gentle catchlights, muted warm tones with shallow depth of field"
+
+**User says:** "A fantasy castle"
+**Engineered:** "Towering Gothic castle carved into a sea cliff face, waves crashing against dark volcanic rock below, twilight sky with scattered cirrus clouds catching the last amber light, ravens circling the highest tower, painted in the style of detailed fantasy concept art, deep blues and warm amber highlights"
+
+**User says:** "A product shot of sneakers"
+**Engineered:** "Pair of white minimalist sneakers floating on a clean gradient background, studio lighting with soft shadows, 3/4 angle view showing sole detail, crisp commercial photography with even diffused lighting, neutral tones with bright white product pop"
+
+### Build the prompt
+Using `$CREATIVE_BRIEF` from Phase 5.5 and all style context, craft the perfect prompt.
+
+**You MUST display the engineered prompt before asking for review.** Show it in a formatted block:
+
+> **Engineered Prompt:**
+> ```
+> [your engineered prompt here]
+> ```
+> [If negative prompt: **Negative:** `[negative prompt]`]
+
+Then use `AskUserQuestion` for review:
+> **How does this prompt look?**
+- **Looks good — generate** — "Use this prompt as-is and proceed to generation"
+- **Tweak it** — "I want to adjust the prompt before generating"
+- **Rewrite it** — "Start the prompt from scratch with different direction"
+
+If **Tweak it**: ask what they want changed (plain text, not AskUserQuestion), apply changes, show the updated prompt, and ask again.
+If **Rewrite it**: ask for new direction (plain text), re-engineer from scratch, show the new prompt, and ask again.
+
+### Build negative prompt (if applicable)
+For photorealistic images: "blurry, low quality, deformed, distorted, extra limbs, text, watermark, signature, cropped"
+For illustration/art: "photographic, hyperrealistic, 3D render" (if you want to stay painterly)
+For product shots: "busy background, shadows, reflections, text, hands, people"
+
+---
+
+## Output
+
+Once all phases complete, output the final configuration:
+
+```
+$IMAGE_PARAMS:
+  type: image
+  model: $MODEL
+  style: $STYLE
+  dimensions: $DIMENSIONS
+  num_images: $NUM_IMAGES
+  prompt: "[engineered prompt]"
+  negative_prompt: "[if any]"
+```
+
+Return to SKILL.md Step 3 for browser execution.