@polymorphism-tech/morph-spec 4.22.0 → 6.0.0

package/framework/skills/level-0-meta/morph-frontend-review/scripts/scan-accessibility.mjs

@@ -1,376 +0,0 @@
-#!/usr/bin/env node
-/**
- * scan-accessibility.mjs
- *
- * Scans .tsx/.ts (Next.js) and .razor (Blazor) files for static accessibility violations.
- * Executed locally by Claude via Bash — output returned to Claude.
- *
- * Usage:
- *   node scan-accessibility.mjs [path]      # scan directory or file (default: '.')
- *   node scan-accessibility.mjs src/        # scan src/ recursively
- *   node scan-accessibility.mjs --summary   # counts only, no details
- *
- * Checks (7 total):
- *   IMG_MISSING_ALT         CRITICAL  .tsx/.razor  <img without alt= attribute
- *   INPUT_MISSING_LABEL     HIGH      .tsx/.razor  <input without associated label or aria-label
- *                                                  <InputText/<FluentTextField without Label=
- *   HEADING_HIERARCHY       HIGH      .tsx/.razor  Heading level skip (H1→H3 skipping H2)
- *   LINK_NO_TEXT            HIGH      .tsx/.razor  <a> empty or icon-only without aria-label
- *   BUTTON_NO_TEXT          HIGH      .tsx/.razor  <button>/<FluentButton> without accessible text
- *   AUTOPLAY_MEDIA          MEDIUM    .tsx/.razor  <video>/<audio> with autoPlay without muted
- *   FLUENT_CHECKBOX_NO_LABEL MEDIUM   .razor       <FluentCheckbox without Label=
- *
- * Output JSON: { summary: { scanned, findings, bySeverity, clean }, findings: [...] }
- * Exit code: 1 if CRITICAL findings, 0 otherwise
- */
-
-import { readdirSync, readFileSync, statSync, existsSync } from 'fs';
-import { join, extname, relative } from 'path';
-
-const targetPath = process.argv[2] ?? '.';
-const summaryOnly = process.argv.includes('--summary');
-
-// ─── File collectors ────────────────────────────────────────────────────────
-
-const IGNORED_DIRS = ['node_modules', '.git', '.next', 'dist', 'build', '.turbo', 'bin', 'obj'];
-
-function collectFrontendFiles(dir) {
-  if (!existsSync(dir)) return [];
-  const stat = statSync(dir);
-  if (stat.isFile()) {
-    const ext = extname(dir);
-    return ['.tsx', '.ts', '.razor'].includes(ext) ? [dir] : [];
-  }
-  const results = [];
-  for (const entry of readdirSync(dir, { withFileTypes: true })) {
-    if (entry.isDirectory() && !IGNORED_DIRS.includes(entry.name)) {
-      results.push(...collectFrontendFiles(join(dir, entry.name)));
-    } else if (entry.isFile()) {
-      const ext = extname(entry.name);
-      if (['.tsx', '.ts', '.razor'].includes(ext)) {
-        results.push(join(dir, entry.name));
-      }
-    }
-  }
-  return results;
-}
-
-// ─── Checks ─────────────────────────────────────────────────────────────────
-
-/**
- * Check: IMG_MISSING_ALT — CRITICAL
- * Detect <img without alt= in .tsx and .razor files.
- * Matches both JSX <img ... /> and HTML <img ...> forms.
- */
-function checkImgMissingAlt(content, lines, relFile, findings) {
-  // Match <img tags that do NOT contain alt=
-  const imgRegex = /<img\b([^>]*?)(?:\/>|>)/g;
-  let match;
-  while ((match = imgRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    if (!/\balt\s*=/i.test(attrs)) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'CRITICAL',
-        id: 'IMG_MISSING_ALT',
-        file: relFile,
-        line: lineNum,
-        message: '<img> element missing alt attribute — required for screen readers',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-/**
- * Check: INPUT_MISSING_LABEL — HIGH
- * Detect <input>, <InputText>, <FluentTextField without accessible label.
- * Accepts: aria-label=, aria-labelledby=, or associated <label for=
- * For Blazor: Label= attribute on <InputText> and <FluentTextField>
- */
-function checkInputMissingLabel(content, lines, relFile, findings) {
-  const isRazor = relFile.endsWith('.razor');
-
-  // --- Standard <input> (both tsx and razor HTML sections) ---
-  const inputRegex = /<input\b([^>]*?)(?:\/>|>)/g;
-  let match;
-  while ((match = inputRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    // Skip hidden inputs — they don't need labels
-    if (/type\s*=\s*['"]hidden['"]/i.test(attrs)) continue;
-    const hasLabel =
-      /\baria-label\s*=/i.test(attrs) ||
-      /\baria-labelledby\s*=/i.test(attrs) ||
-      /\bid\s*=\s*['"]([^'"]+)['"]/i.test(attrs); // id present → could be associated by <label for>
-    if (!hasLabel) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'HIGH',
-        id: 'INPUT_MISSING_LABEL',
-        file: relFile,
-        line: lineNum,
-        message: '<input> element missing accessible label (aria-label, aria-labelledby, or <label for=)',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-
-  if (isRazor) {
-    // --- Blazor <InputText> without Label= ---
-    const inputTextRegex = /<InputText\b([^>]*?)(?:\/>|>)/g;
-    while ((match = inputTextRegex.exec(content)) !== null) {
-      const attrs = match[1];
-      if (!/\bLabel\s*=/i.test(attrs) && !/\baria-label\s*=/i.test(attrs)) {
-        const lineNum = content.slice(0, match.index).split('\n').length;
-        findings.push({
-          severity: 'HIGH',
-          id: 'INPUT_MISSING_LABEL',
-          file: relFile,
-          line: lineNum,
-          message: '<InputText> component missing Label= attribute (or aria-label)',
-          snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-        });
-      }
-    }
-
-    // --- Fluent UI <FluentTextField> without Label= ---
-    const fluentTextRegex = /<FluentTextField\b([^>]*?)(?:\/>|>)/g;
-    while ((match = fluentTextRegex.exec(content)) !== null) {
-      const attrs = match[1];
-      if (!/\bLabel\s*=/i.test(attrs) && !/\baria-label\s*=/i.test(attrs)) {
-        const lineNum = content.slice(0, match.index).split('\n').length;
-        findings.push({
-          severity: 'HIGH',
-          id: 'INPUT_MISSING_LABEL',
-          file: relFile,
-          line: lineNum,
-          message: '<FluentTextField> component missing Label= attribute (or aria-label)',
-          snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-        });
-      }
-    }
-  }
-}
-
-/**
- * Check: HEADING_HIERARCHY — HIGH
- * Detect heading level skips (e.g. H1 → H3 without H2) within a file.
- * Scans for h1–h6 / H1–H6 tags in order and reports any skip > 1 level.
- */
-function checkHeadingHierarchy(content, lines, relFile, findings) {
-  // Collect all headings in document order
-  const headingRegex = /<[Hh]([1-6])\b/g;
-  const headings = [];
-  let match;
-  while ((match = headingRegex.exec(content)) !== null) {
-    headings.push({
-      level: parseInt(match[1], 10),
-      lineNum: content.slice(0, match.index).split('\n').length,
-    });
-  }
-
-  // Check for level skips
-  for (let i = 1; i < headings.length; i++) {
-    const prev = headings[i - 1];
-    const curr = headings[i];
-    // Only flag increases that skip a level (e.g. h1 → h3)
-    if (curr.level > prev.level + 1) {
-      findings.push({
-        severity: 'HIGH',
-        id: 'HEADING_HIERARCHY',
-        file: relFile,
-        line: curr.lineNum,
-        message: `Heading level skip: H${prev.level} (line ${prev.lineNum}) → H${curr.level} (line ${curr.lineNum}) — missing H${prev.level + 1}`,
-        snippet: lines[curr.lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-/**
- * Check: LINK_NO_TEXT — HIGH
- * Detect <a> elements that are empty or contain only an icon without aria-label.
- * Empty: <a href="..."></a> or <a .../>
- * Icon-only: <a href="..."><SomeIcon /></a> or <a href="..."><i class="..."></i></a>
- */
-function checkLinkNoText(content, lines, relFile, findings) {
-  // Match opening <a ...> tag and capture attributes, then check for aria-label
-  // We use a simplified approach: find <a> tags and look for aria-label in attrs
-  const linkRegex = /<a\b([^>]*?)>([\s\S]*?)<\/a>/g;
-  let match;
-  while ((match = linkRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    const innerContent = match[2].trim();
-
-    // Has aria-label → OK
-    if (/\baria-label\s*=/i.test(attrs) || /\baria-labelledby\s*=/i.test(attrs)) continue;
-
-    // Check if inner content has visible text (not just whitespace, tags, or expressions)
-    // Strip JSX expressions {}, HTML tags, and whitespace
-    const textOnly = innerContent
-      .replace(/\{[^}]*\}/g, '')   // strip {expressions}
-      .replace(/<[^>]+>/g, '')      // strip HTML/JSX tags
-      .trim();
-
-    if (!textOnly) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'HIGH',
-        id: 'LINK_NO_TEXT',
-        file: relFile,
-        line: lineNum,
-        message: '<a> element has no accessible text — add aria-label or visible text content',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-/**
- * Check: BUTTON_NO_TEXT — HIGH
- * Detect <button> and <FluentButton> elements without accessible text or aria-label.
- */
-function checkButtonNoText(content, lines, relFile, findings) {
-  // <button> elements
-  const buttonRegex = /<button\b([^>]*?)>([\s\S]*?)<\/button>/g;
-  let match;
-  while ((match = buttonRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    const innerContent = match[2].trim();
-
-    if (/\baria-label\s*=/i.test(attrs) || /\baria-labelledby\s*=/i.test(attrs)) continue;
-
-    const textOnly = innerContent
-      .replace(/\{[^}]*\}/g, '')
-      .replace(/<[^>]+>/g, '')
-      .trim();
-
-    if (!textOnly) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'HIGH',
-        id: 'BUTTON_NO_TEXT',
-        file: relFile,
-        line: lineNum,
-        message: '<button> element has no accessible text — add aria-label or visible text content',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-
-  // <FluentButton> (Blazor Fluent UI)
-  const fluentBtnRegex = /<FluentButton\b([^>]*?)>([\s\S]*?)<\/FluentButton>/g;
-  while ((match = fluentBtnRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    const innerContent = match[2].trim();
-
-    if (/\baria-label\s*=/i.test(attrs) || /\bTitle\s*=/i.test(attrs)) continue;
-
-    const textOnly = innerContent
-      .replace(/\{[^}]*\}/g, '')
-      .replace(/<[^>]+>/g, '')
-      .trim();
-
-    if (!textOnly) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'HIGH',
-        id: 'BUTTON_NO_TEXT',
-        file: relFile,
-        line: lineNum,
-        message: '<FluentButton> has no accessible text — add aria-label, Title=, or visible text',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-/**
- * Check: AUTOPLAY_MEDIA — MEDIUM
- * Detect <video> or <audio> with autoPlay attribute but without muted.
- * Autoplay without muted violates WCAG 1.4.2 (Audio Control).
- */
-function checkAutoplayMedia(content, lines, relFile, findings) {
-  const mediaRegex = /<(video|audio)\b([^>]*?)(?:\/>|>)/gi;
-  let match;
-  while ((match = mediaRegex.exec(content)) !== null) {
-    const attrs = match[2];
-    // JSX: autoPlay (camelCase), HTML: autoplay
-    if (/\bautoPlay\b|\bautoplay\b/i.test(attrs) && !/\bmuted\b/i.test(attrs)) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'MEDIUM',
-        id: 'AUTOPLAY_MEDIA',
-        file: relFile,
-        line: lineNum,
-        message: `<${match[1]}> has autoPlay without muted — violates WCAG 1.4.2 (Audio Control)`,
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-/**
- * Check: FLUENT_CHECKBOX_NO_LABEL — MEDIUM
- * Detect <FluentCheckbox without Label= in .razor files.
- */
-function checkFluentCheckboxNoLabel(content, lines, relFile, findings) {
-  if (!relFile.endsWith('.razor')) return;
-
-  const checkboxRegex = /<FluentCheckbox\b([^>]*?)(?:\/>|>)/g;
-  let match;
-  while ((match = checkboxRegex.exec(content)) !== null) {
-    const attrs = match[1];
-    if (!/\bLabel\s*=/i.test(attrs) && !/\baria-label\s*=/i.test(attrs)) {
-      const lineNum = content.slice(0, match.index).split('\n').length;
-      findings.push({
-        severity: 'MEDIUM',
-        id: 'FLUENT_CHECKBOX_NO_LABEL',
-        file: relFile,
-        line: lineNum,
-        message: '<FluentCheckbox> missing Label= attribute — screen readers cannot identify this checkbox',
-        snippet: lines[lineNum - 1]?.trim().slice(0, 100),
-      });
-    }
-  }
-}
-
-// ─── Main ────────────────────────────────────────────────────────────────────
-
-const files = collectFrontendFiles(targetPath);
-const findings = [];
-
-for (const file of files) {
-  const content = readFileSync(file, 'utf-8');
-  const lines = content.split('\n');
-  const relFile = relative(process.cwd(), file).replace(/\\/g, '/');
-
-  checkImgMissingAlt(content, lines, relFile, findings);
-  checkInputMissingLabel(content, lines, relFile, findings);
-  checkHeadingHierarchy(content, lines, relFile, findings);
-  checkLinkNoText(content, lines, relFile, findings);
-  checkButtonNoText(content, lines, relFile, findings);
-  checkAutoplayMedia(content, lines, relFile, findings);
-  checkFluentCheckboxNoLabel(content, lines, relFile, findings);
-}
-
-const bySeverity = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
-for (const f of findings) {
-  bySeverity[f.severity] = (bySeverity[f.severity] ?? 0) + 1;
-}
-
-const summary = {
-  scanned: files.length,
-  findings: findings.length,
-  bySeverity,
-  clean: findings.length === 0,
-};
-
-if (summaryOnly) {
-  console.log(JSON.stringify(summary, null, 2));
-} else {
-  console.log(JSON.stringify({ summary, findings }, null, 2));
-}
-
-// Exit 1 if any CRITICAL findings
-process.exit(findings.some(f => f.severity === 'CRITICAL') ? 1 : 0);

package/framework/skills/level-0-meta/morph-gemini-image/SKILL.md

@@ -1,290 +0,0 @@
----
-name: morph-gemini-image
-description: |
-  Expert at generating and editing images via the Gemini Image MCP (gemini-image-mcp).
-  Constructs high-quality prompts for Gemini image models using narrative natural language.
-  Use when implementing UI components that need generated images, or when assets.md
-  specifies image requirements. Also use for standalone image generation requests.
-  Triggers: /morph-gemini-image, "generate image", "create image", "edit image",
-  "make a logo", "generate assets", image generation for components.
-argument-hint: "[optional: image description or assets.md IMG-ID]"
-user-invocable: true
-allowed-tools: Read, Write, Glob, Grep, AskUserQuestion
-cliVersion: "4.22.0"
----
-
-# Gemini Image — Prompt Specialist
-
-You are an expert at communicating with the Gemini 2.5 Flash Image model (Nano Banana) through the `gemini-image-mcp` MCP server. Your job is to transform the user's intent into the best possible prompt and then execute it.
-
-## The Golden Rules
-
-**1. Describe scenes narratively, never list keywords.** The Gemini image model has deep language comprehension — coherent paragraphs consistently outperform disconnected keyword lists. Think of it as briefing a photographer or illustrator, not filling in search tags.
-
-**2. Generation demands depth; editing demands restraint.** These are opposite strategies:
-- **Generation**: Go deep. Multi-layered compositions, rich textures, dramatic lighting contrasts, visual storytelling. Simple prompts produce flat, generic images. Push for complexity — foreground interest, mid-ground subject, background atmosphere. Think in layers.
-- **Editing**: Go minimal. Short, direct instructions targeting exactly what changes. The more you describe in an edit prompt, the more the model "re-imagines" the image and the more artificial it looks. 1-2 sentences max for edits.
-
-## Important: JSON Does NOT Work
-
-The Gemini image models do NOT support JSON/structured output mode for image generation. Sending JSON-formatted prompts provides no benefit and can confuse the model. Always use natural language.
-
-## Available MCP Tools
-
-| Tool | When to use |
-|------|-------------|
-| `generate_image` | Create new images from text description |
-| `edit_image` | Modify an existing image (needs `imagePath`) |
-| `continue_editing` | Iterate on the last generated/edited image |
-| `list_images` | Browse image history |
-| `get_image_info` | Get metadata about a specific image |
-| `get_configuration_status` | Check API key and server health |
-
-## How to Build Prompts
-
-### Step 1: Identify the Category
-
-Determine what kind of image the user wants. Each category has a different prompt template that produces optimal results:
-
-**Photorealistic** — Real-world scenes, portraits, product photos, landscapes
-**Illustration** — Stickers, icons, cartoon, kawaii, branded designs
-**Text Rendering** — Logos, infographics, menus, diagrams with legible text
-**Product Mockup** — E-commerce, studio product shots
-**Minimalist / Negative Space** — Clean compositions for overlays or branding
-**Sequential Art** — Comics, storyboards, panels
-
-### Step 2: Construct the Prompt
-
-Build the prompt by layering these elements (order matters — put the most important things first).
-
-The key to images that feel deep and impactful rather than flat and generic is **visual layering** — describe what's happening in the foreground, mid-ground, and background separately. A flat description ("neon city at night") produces a flat image. A layered description creates depth that pulls the viewer in.
-
-1. **Subject** — Who/what is the main focus? Be hyper-specific.
-   - Bad: "a warrior in armor"
-   - Good: "a tall elven warrior in ornate silver plate armor with falcon-wing pauldrons and a high collar etched with leaf patterns"
-
-2. **Action / Pose** — What is the subject doing? Expression? Gesture?
-
-3. **Environment / Setting** — Where is this happening? Describe in **layers**:
-   - **Foreground**: What's closest to camera? (objects, textures, particles, rain drops)
-   - **Mid-ground**: Where is the subject? What surrounds them?
-   - **Background**: What's far away? (sky, distant buildings, horizon, atmospheric haze)
-   - This layered approach creates depth of field and visual richness that flat descriptions miss.
-
-4. **Lighting** — This dramatically affects mood and is the single biggest quality lever. Use photography terms and describe **multiple light sources** for complexity:
-   - "golden hour key light from the left, with cool blue fill from ambient sky on the right, and warm rim light from behind catching hair edges"
-   - "harsh overhead spotlight casting dramatic shadows, with neon signs reflecting colored light off wet surfaces"
-   - "soft diffused window light as primary, with practical warm bulbs adding depth in the background"
-   - Single-source flat lighting = flat image. Multiple sources with different colors/directions = cinematic depth.
-
-5. **Style / Medium** — How should it look?
-   - Photography: mention camera, lens, film stock ("85mm portrait lens, shallow depth of field, Kodak Portra 400 film grain")
-   - Illustration: name the style ("kawaii", "cel-shaded", "watercolor", "ink wash", "art nouveau")
-   - Reference artists when useful: "in the style of Studio Ghibli", "Van Gogh's Starry Night brushwork"
-
-6. **Color Palette** — Specify dominant colors and **contrast relationships**
-   - "warm amber highlights against deep teal shadows"
-   - "desaturated cool tones with a single pop of crimson red on the subject"
-   - Color contrast draws the eye and creates visual hierarchy.
-
-7. **Composition** — Camera angle, framing, negative space
-   - "low angle looking up", "bird's eye view", "close-up macro", "rule of thirds with subject on left"
-   - Describe **depth cues**: objects overlapping, foreground blur, atmospheric perspective (distant objects fading into haze)
-
-8. **Texture and Detail** — What makes it tactile and real?
-   - "rain droplets on glass", "worn leather with visible stitching", "dust particles floating in light beams", "condensation on cold metal"
-   - These micro-details transform flat images into immersive scenes.
-
-9. **Aspect Ratio** — Choose based on purpose:
-   - `1:1` — Social media posts, avatars, icons
-   - `16:9` — Presentations, YouTube thumbnails, desktop wallpapers
-   - `9:16` — Stories, reels, mobile wallpapers
-   - `3:2` — Landscape photography, blog headers
-   - `2:3` — Portrait photography, book covers
-   - `4:3` — Standard display, documents
-   - `3:4` — Pinterest, portrait posters
-
-### Step 3: Apply Category-Specific Templates
-
-#### Photorealistic
-```
-A [shot type] of [subject with specific details], [action/pose],
-set in [environment with atmosphere], illuminated by [lighting description],
-captured with [camera/lens], [mood/feeling], [aspect ratio orientation].
-```
-Example: "A close-up portrait of an elderly ceramicist inspecting a hand-glazed tea bowl in his sun-drenched workshop, golden hour light streaming through dusty windows, 85mm portrait lens with soft bokeh, serene and contemplative atmosphere, vertical orientation."
-
-#### Illustration / Sticker
-```
-[Art style] [subject with personality traits], [key visual details],
-[line style] outlines, [shading approach], [color palette],
-[background specification].
-```
-Example: "Kawaii-style red panda sticker wearing a tiny bamboo hat and holding a matcha cup, bold clean outlines, cel-shading with soft highlights, vibrant warm colors with pink accents, white background."
-
-#### Text Rendering (Logos, Infographics)
-```
-[Image type] for [brand/concept context], featuring the text "[exact text]"
-in [font style description], [visual elements around text],
-[overall color scheme and style], [format].
-```
-Example: "Minimalist coffee shop logo for a premium artisan brand, featuring the text 'The Daily Grind' in clean geometric sans-serif, with a stylized coffee bean icon integrated into the letter 'D', black and white with a single copper accent, square format."
-
-**Important: Text rendering often contains spelling errors.** The model frequently misspells words, swaps letters, or drops characters — especially in longer words. After generating any image with text, always verify the spelling by viewing the result. If text is wrong, use `continue_editing` with a prompt like: "Fix the text spelling — it should read '[correct text]' exactly. Keep everything else the same." You may need 2-3 iterations to get text perfect.
-
-#### Product Mockup
-```
-High-resolution studio photograph of [product with materials],
-on [surface/background], [lighting setup], [camera angle] for [purpose],
-sharp focus on [detail], [realism level], [aspect ratio].
-```
-Example: "High-resolution studio photograph of a minimalist black ceramic mug with a matte finish on a polished concrete surface, three-point softbox lighting with a subtle warm key light, 45-degree elevated angle for e-commerce listing, sharp focus on the steam rising from dark coffee, photorealistic, square format."
-
-#### Minimalist / Negative Space
-```
-[Single subject] positioned [placement], [vast background description],
-generous negative space [purpose], [subtle lighting direction], [aspect ratio].
-```
-Example: "A single red maple leaf positioned in the bottom-right third, vast off-white linen-textured background, generous negative space ideal for text overlay, soft diffused light from top-left casting a gentle shadow, square format."
-
-## How to Handle Image Editing
-
-**The cardinal rule of editing: LESS IS MORE.** Verbose edit prompts cause the model to "re-imagine" the entire image, producing an artificial, over-processed look. Keep edit prompts short, direct, and focused on exactly what changes. Let the model figure out how to integrate the change naturally — it's very good at this when you don't over-constrain it.
-
-### Adding / Removing Elements
-One sentence describing the change. Don't describe how to integrate it — the model handles that.
-```
-"Add a knitted wizard hat to the cat."
-```
-
-### Background Replacement
-State the new background simply. Don't over-describe — the model matches lighting automatically.
-```
-"Replace the background with a tropical beach at sunset."
-```
-Avoid: "Replace the background with a beautiful tropical beach with golden sand, palm trees swaying, turquoise waves, warm orange and pink sunset colors reflecting on the water, ensuring the subject's lighting matches the warm sunset glow..." — this level of detail makes the result look MORE artificial, not less.
-
-### Inpainting (Targeted Changes)
-Name what changes and state what stays in one line.
-```
-"Change the blue sofa to a brown leather chesterfield. Keep everything else."
-```
-
-### Style Transfer
-Name the target style. Keep it simple.
-```
-"Transform this into Van Gogh's Starry Night style."
-```
-
-### Multi-Image Composition
-Use `referenceImages` parameter to supply source images.
-```
-"Put the woman from the second image in the blue dress from the first image."
-```
-
-### Iterative Refinement
-Use `continue_editing` for small adjustments. One change at a time:
-- "Make the lighting warmer"
-- "More contrast in the shadows"
-- "Zoom out a bit"
-- "More serious expression"
-
-## Critical Best Practices
-
-1. **Be hyper-specific** — Generic descriptions produce generic images. Replace "fantasy armor" with "ornate elven plate armor, etched with silver leaf patterns, high collar, falcon-wing pauldrons."
-
-2. **Frame positively** — The model handles positive instructions better than negations. Say "empty deserted street with no traffic, completely still" instead of "street without cars." Describe what IS there, not what isn't.
-
-3. **Use photography language** — Camera terms give precise control: "85mm portrait lens", "wide-angle", "macro", "Dutch angle", "low-angle looking up", "bird's eye view."
-
-4. **Specify lighting explicitly** — Lighting is the single biggest quality lever. Always include it. "Golden hour", "overcast diffused", "dramatic Rembrandt", "neon rim-lit", "three-point studio."
-
-5. **Include context and intent** — "Logo for a high-end minimalist skincare brand" produces better results than just "make a logo." The model uses context to make style decisions.
-
-6. **One concept per generation** — Complex multi-scene compositions work less reliably. Break them into separate generations and compose with editing tools.
-
-7. **Character consistency** — If features drift after multiple edits, restart the conversation with a detailed character description upfront.
-
-8. **Aspect ratio matters** — Choose deliberately based on final use. The model preserves input image ratio during editing. Be explicit if you need a specific ratio.
-
-## Workflow
-
-When the user asks for an image:
-
-1. **Understand intent** — What is this image for? What style/mood? What will it be used for?
-2. **Ask clarifying questions if needed** — Use AskUserQuestion for ambiguous requests. Ask about style, mood, aspect ratio, specific elements.
-3. **Build the prompt** — Apply the templates above. Be detailed and narrative.
-4. **Choose the right tool** — `generate_image` for new, `edit_image` for modifying existing, `continue_editing` for iterating.
-5. **Set `outputPath`** — If the user specifies where to save, use absolute paths. Otherwise let the MCP use its default directory.
-6. **Execute and review** — After generation, read the image file to show the user the result.
-7. **Iterate** — If the user wants changes, use `continue_editing` with targeted adjustment prompts.
-
-## Design System Integration
-
-When generating images for a morph-spec project:
-
-1. **Read design tokens first:**
-   ```
-   Read: .morph/context/design-system.md
-   ```
-   Extract: background color (`--color-background`), primary (`--color-primary`), accent (`--color-accent`), font pair, aesthetic direction.
-
-2. **Inject tokens into prompts:**
-   Replace generic color references with actual project values:
-   - "dark background" → "dark charcoal background ({--color-background value})"
-   - "accent colors" → "{--color-primary value} and {--color-accent value} accents"
-   - "premium aesthetic" → "{aesthetic direction from design-system.md}"
-
-3. **If `globals.css` exists**, read it for additional token values:
-   ```
-   Grep: "--color-" in src/app/globals.css (or similar)
-   ```
-
-## Assets.md Integration
-
-When invoked from the implement phase with an assets.md reference:
-
-1. **Read the assets spec:**
-   ```
-   Read: .morph/features/{feature}/1-ui/assets.md
-   ```
-
-2. **For each IMG-NNN entry assigned to the current task:**
-   - Use the `Prompt` field as the base prompt
-   - Use the `Aspect Ratio` field for the aspectRatio parameter
-   - Use the `Output Path` field for the outputPath parameter
-   - Apply design system token injection (section above)
-
-3. **Generate and verify:**
-   ```
-   mcp__gemini-image-mcp__generate_image({
-     prompt: "{enhanced prompt with design tokens}",
-     aspectRatio: "{from assets.md}",
-     outputPath: "{from assets.md}"
-   })
-   ```
-   Read the generated image to verify quality. If it needs refinement, use `continue_editing`.
-
-## Output Path Conventions
-
-- **morph-spec projects:** `public/images/{feature}/{purpose}.png`
-- **Custom path:** Use `outputPath` parameter with absolute path
-- **Default:** saves to `generated-images/` in the MCP project root
-- Supported formats: PNG (most common), JPG, WEBP, GIF, BMP
-
-## Model Options
-
-The default model is `gemini-2.5-flash-image`. Alternative models can be specified via the `model` parameter:
-- `gemini-2.5-flash-image` — Default, fastest, great quality
-- `gemini-3.1-flash-image-preview` — Newer, supports up to 14 reference images
-- `gemini-3-pro-image-preview` — Higher quality, slower
-
-## Common Pitfalls to Avoid
-
-- **Keyword spam** — "beautiful, stunning, amazing, 4k, ultra HD, masterpiece" adds noise, not quality
-- **JSON prompts** — The model does not support structured output; natural language only
-- **Negative prompts with "no/don't"** — Frame what you want, not what you don't want
-- **Vague lighting** — "good lighting" means nothing; specify the type
-- **Missing context** — Always explain what the image is for (social media, website, print, etc.)
-- **Too many subjects** — Keep compositions focused; split complex scenes into steps
-- **Forgetting aspect ratio** — Always set it deliberately based on the intended use