$curl -o .claude/agents/seo-image-gen.md https://raw.githubusercontent.com/AgriciDaniel/claude-seo/HEAD/agents/seo-image-gen.mdSEO image analyst. Audits existing OG/social preview images, identifies missing or low-quality images, and creates an image generation plan with prompts for key pages. Does NOT auto-generate images.
| 1 | # SEO Image Gen: AI Image Generation for SEO Assets (Extension) |
| 2 | |
| 3 | Generate production-ready images for SEO use cases using Gemini's image generation |
| 4 | via the banana Creative Director pipeline. Maps SEO needs to optimized domain modes, |
| 5 | aspect ratios, and resolution defaults. |
| 6 | |
| 7 | ## Architecture Note |
| 8 | |
| 9 | This extension is built on [Claude Banana](https://github.com/AgriciDaniel/banana-claude), |
| 10 | the standalone AI image generation skill for Claude Code. |
| 11 | |
| 12 | This skill has two components with distinct roles: |
| 13 | - **SKILL.md** (this file): Handles interactive `/seo image-gen` commands for generating images |
| 14 | - **Agent** (`agents/seo-image-gen.md`): Audit-only analyst spawned during `/seo audit` to assess existing OG/social images and produce a generation plan (never auto-generates) |
| 15 | |
| 16 | ## Prerequisites |
| 17 | |
| 18 | This skill requires the banana extension to be installed: |
| 19 | ```bash |
| 20 | ./extensions/banana/install.sh |
| 21 | ``` |
| 22 | |
| 23 | **Check availability:** Before using any image generation tool, verify the MCP server |
| 24 | is connected by checking if `gemini_generate_image` or `set_aspect_ratio` tools are |
| 25 | available. If tools are not available, inform the user the extension is not installed |
| 26 | and provide install instructions. |
| 27 | |
| 28 | ## Quick Reference |
| 29 | |
| 30 | | Command | What it does | |
| 31 | |---------|-------------| |
| 32 | | `/seo image-gen og <description>` | Generate OG/social preview image (1200x630 feel) | |
| 33 | | `/seo image-gen hero <description>` | Blog hero image (widescreen, dramatic) | |
| 34 | | `/seo image-gen product <description>` | Product photography (clean, white BG) | |
| 35 | | `/seo image-gen infographic <description>` | Infographic visual (vertical, data-heavy) | |
| 36 | | `/seo image-gen custom <description>` | Custom image with full Creative Director pipeline | |
| 37 | | `/seo image-gen batch <description> [N]` | Generate N variations (default: 3) | |
| 38 | |
| 39 | ## SEO Image Use Cases |
| 40 | |
| 41 | Each use case maps to pre-configured banana parameters: |
| 42 | |
| 43 | | Use Case | Aspect Ratio | Resolution | Domain Mode | Notes | |
| 44 | |----------|-------------|------------|-------------|-------| |
| 45 | | **OG/Social Preview** | `16:9` | `1K` | Product or UI/Web | Clean, professional, text-friendly | |
| 46 | | **Blog Hero** | `16:9` | `2K` | Cinema or Editorial | Dramatic, atmospheric, editorial quality | |
| 47 | | **Schema Image** | `4:3` | `1K` | Product | Clean, descriptive, schema ImageObject | |
| 48 | | **Social Square** | `1:1` | `1K` | UI/Web | Platform-optimized square | |
| 49 | | **Product Photo** | `4:3` | `2K` | Product | White background, studio lighting | |
| 50 | | **Infographic** | `2:3` | `4K` | Infographic | Data-heavy, vertical layout | |
| 51 | | **Favicon/Icon** | `1:1` | `512` | Logo | Minimal, scalable, recognizable | |
| 52 | | **Pinterest Pin** | `2:3` | `2K` | Editorial | Tall vertical card | |
| 53 | |
| 54 | ## Generation Pipeline |
| 55 | |
| 56 | For every generation request: |
| 57 | |
| 58 | 1. **Identify use case** from command or context (og, hero, product, etc.) |
| 59 | 2. **Apply SEO defaults** from the use cases table above |
| 60 | 3. **Set aspect ratio** via `set_aspect_ratio` MCP tool |
| 61 | 4. **Construct Reasoning Brief** using the banana Creative Director pipeline: |
| 62 | - Use `${CLAUDE_SKILL_DIR}` as the installed skill root |
| 63 | - Load `${CLAUDE_SKILL_DIR}/references/prompt-engineering.md` for the 6-component system |
| 64 | - Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.) |
| 65 | - Be SPECIFIC and VISCERAL: describe what the camera sees |
| 66 | 5. **Generate** via `gemini_generate_image` MCP tool |
| 67 | 6. **Post-generation SEO checklist** (see below) |
| 68 | |
| 69 | ### Check for Presets |
| 70 | |
| 71 | If the user mentions a brand or has SEO presets configured: |
| 72 | ```bash |
| 73 | claude-seo run --extension banana presets.py list |
| 74 | ``` |
| 75 | Load matching preset and apply as defaults. Also check `${CLAUDE_SKILL_DIR}/references/seo-image-presets.md` |
| 76 | for SEO-specific preset templates. |
| 77 | |
| 78 | ## Post-Generation SEO Checklist |
| 79 | |
| 80 | After every successful generation, guide the user on: |
| 81 | |
| 82 | 1. **Alt text**:Write descriptive, keyword-rich alt text for the generated image |
| 83 | 2. **File naming**:Rename to SEO-friendly format: `keyword-description-widthxheight.webp` |
| 84 | 3. **WebP conversion**:Convert to WebP for optimal page speed: |
| 85 | ```bash |
| 86 | magick output.png -quality 85 output.webp |
| 87 | ``` |
| 88 | 4. **File size**:Target under 200KB for hero images, under 100KB for thumbnails |
| 89 | 5. **Schema markup**:Suggest `ImageObject` schema for the generated image: |
| 90 | ```json |
| 91 | { |
| 92 | "@type": "ImageObjec |