Gen Images Skill
Description
Context-aware image generation skill for Claude Code — analyzes website brand identity and generates on-brand images via Gemini MCP
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
gen-images
Context-Aware Website Image Generation Skill for Claude Code
A Claude Code skill that detects missing or placeholder images in a website project,
analyzes the site's visual identity, and generates on-brand images via the Gemini image generation MCP.
Every image is tailored to match the site's colors, typography, layout, and brand tone — not generic stock-photo filler.
What It Does
After building a website, this skill:
- Scans the codebase for missing images, placeholder
srcvalues, and gray skeleton divs - Audits existing images for style consistency with the brand
- Extracts the site's visual identity (brand colors, fonts, UI style, tone) from Tailwind config, CSS variables, and copy
- Builds per-slot image generation prompts using a structured formula: Subject + Art Style + Color Palette + Mood + Technical Specs + Negative Constraints
- Generates on-brand images directly or outputs a prompt list for manual Gemini use
Two Modes
| Mode | Command | What it does |
|---|---|---|
| generate | /gen-images generate |
Full automated pipeline — generates images via MCP and updates source files |
| prompt | /gen-images prompt |
Outputs optimized prompts + Style Anchor for manual use in Gemini |
Run `/gen-images` with no argument to be prompted for which mode you want.
The skill also auto-triggers when you say things like _"generate an image for the hero section"_ or _"I need an image for the about page"_ — no explicit command needed.
4-Layer Pipeline
Layer 1 — Design Context Extraction
→ Reads tailwind.config, globals.css, layout.tsx, page copy
→ Builds a design_profile: colors, fonts, tone, UI style, existing images
Layer 2 — Image Slot Detection & Classification
→ Scans all .tsx/.jsx/.html/.vue/.svelte files
→ Detects: empty src, placeholder URLs, skeleton divs
→ Audits:Related Skills
Auto Update
Pull the latest ECC repo changes and reinstall the current managed targets.
Ecc Guide
Navigate ECC's current agents, skills, commands, hooks, install profiles, and docs from the live repository su
Epic Claim
Claim an epic issue, stamp coordination state, and sync local ownership.
Epic Publish
Publish a validated epic update back to the issue and local cache.
Epic Review
Mark epic review requested, approved, or changes requested.
Epic Unblock
Sweep blocked epic issues and reopen anything whose dependencies are closed.