Menu
Generate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types.
Generate standardized static site structures. Use when creating new websites, setting up demos, or need consistent site structure with SEO, PWA, and accessibility foundations.
Write Node.js CLI tools with zero dependencies. Use when creating command-line tools, argument parsing, colored output, or interactive prompts.
Modern CSS organization with native @import, @layer cascade control, CSS nesting, design tokens, and element-focused selectors. AUTO-INVOKED when editing .css files.
Define and use custom HTML elements. Use when creating new components, defining custom tags, or using project-specific elements beyond standard HTML5.
Umbrella coordinator for image handling. Coordinates responsive-images, placeholder-images, and automation scripts. Use when adding images to any page, optimizing existing images, or setting up image pipelines.
Modern responsive image techniques using picture element, srcset, sizes, and modern formats. Use when adding images that need to adapt to different screen sizes, resolutions, or support modern image formats.
| name | placeholder-images |
| description | Generate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types. |
| allowed-tools | Read, Write, Edit, Bash |
Generate SVG placeholder images for HTML prototypes and layouts.
| Type | Description | Use Case |
|---|---|---|
| simple | Grey box with diagonal X | Basic layout placeholder |
| labeled | Grey box with text label | Describe image purpose |
| brand | Uses design token colors | Polished prototypes |
| Preset | Dimensions | Common Use |
|---|---|---|
avatar-sm | 48x48 | User list avatars |
avatar-lg | 128x128 | Profile avatars |
thumbnail | 150x150 | Grid thumbnails |
product | 400x400 | Product cards |
card | 400x225 | Blog/article cards (16:9) |
hero | 1200x400 | Hero banners |
og | 1200x630 | Open Graph images |
Custom sizes: Use WxH format (e.g., 800x600).
Grey background with diagonal X lines:
<img src="/.assets/images/placeholder/simple-400x400.svg"
alt="Placeholder image"
width="400"
height="400"/>
SVG Pattern:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"
role="img" aria-label="Placeholder image">
<title>Placeholder image</title>
<rect width="400" height="400" fill="#f3f4f6"/>
<line x1="0" y1="0" x2="400" y2="400" stroke="#d1d5db" stroke-width="1"/>
<line x1="400" y1="0" x2="0" y2="400" stroke="#d1d5db" stroke-width="1"/>
</svg>
Grey background with descriptive text:
<img src="/.assets/images/placeholder/hero-1200x400.svg"
alt="Hero banner placeholder"
width="1200"
height="400"/>
SVG Pattern:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"
role="img" aria-label="Hero Image placeholder">
<title>Hero Image placeholder</title>
<rect width="1200" height="400" fill="#f3f4f6"/>
<line x1="0" y1="0" x2="1200" y2="400" stroke="#d1d5db" stroke-width="1"/>
<line x1="1200" y1="0" x2="0" y2="400" stroke="#d1d5db" stroke-width="1"/>
<text x="600" y="200" text-anchor="middle" dominant-baseline="middle"
font-family="system-ui, -apple-system, sans-serif"
font-size="24" fill="#6b7280">
Hero Image
</text>
</svg>
Uses design tokens for brand-consistent placeholders. The script automatically looks for CSS files in common locations and extracts color tokens.
Token Mapping:
| Placeholder Color | Tokens Searched |
|---|---|
| Background | --background-alt, --background-main, --surface-color |
| Stroke | --border-color, --border-light |
| Text | --text-muted, --text-color |
| Accent | --primary-color, --primary, --accent-color |
| Accent Text | --text-inverted, --primary-text |
Auto-detection paths:
src/styles/main.csssrc/styles/_tokens.css.assets/styles/main.css.claude/styles/main.css# Auto-detect CSS file
node .claude/scripts/generate-placeholder.js --type brand --label "Product" --preset product
# Specify CSS file explicitly
node .claude/scripts/generate-placeholder.js --type brand --label "Hero" --size 1200x400 --tokens src/styles/main.css
Example output:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"
role="img" aria-label="Product Shot placeholder">
<title>Product Shot placeholder</title>
<rect width="400" height="400" fill="#f8fafc"/>
<line x1="0" y1="0" x2="400" y2="400" stroke="#e2e8f0" stroke-width="1"/>
<line x1="400" y1="0" x2="0" y2="400" stroke="#e2e8f0" stroke-width="1"/>
<rect x="125" y="175" width="150" height="50" rx="4" fill="#2563eb"/>
<text x="200" y="205" text-anchor="middle" dominant-baseline="middle"
font-family="system-ui, -apple-system, sans-serif"
font-size="14" fill="#ffffff">
Product Shot
</text>
</svg>
Use these labels for semantic clarity:
| Label | Typical Size | Description |
|---|---|---|
| Hero Image | 1200x400 | Page header banner |
| Product Shot | 400x400 | E-commerce product |
| Team Photo | 300x300 | Staff headshot |
| Thumbnail | 150x150 | Grid/list preview |
| Logo | 200x50 | Brand logo |
| Icon | 48x48 | UI icon |
| Banner | 728x90 | Ad banner |
| Card Image | 400x225 | Blog/article card |
| Gallery | 800x600 | Photo gallery |
| Avatar | 64x64 | User profile |
.assets/images/placeholder/
├── simple-400x400.svg
├── simple-800x600.svg
├── hero-1200x400.svg
├── product-400x400.svg
├── avatar-128x128.svg
└── card-400x225.svg
# Simple placeholder
node .claude/scripts/generate-placeholder.js --type simple --size 400x400
# Labeled placeholder
node .claude/scripts/generate-placeholder.js --type labeled --label "Hero Image" --size 1200x400
# Brand placeholder (auto-detects CSS tokens)
node .claude/scripts/generate-placeholder.js --type brand --label "Product" --preset product
# Brand placeholder with specific CSS file
node .claude/scripts/generate-placeholder.js --type brand --label "Hero" --size 1200x400 \
--tokens src/styles/main.css
# Output to file
node .claude/scripts/generate-placeholder.js --type labeled --label "Product" --size 400x400 \
--output .assets/images/placeholder/product-400x400.svg
# Generate preset
node .claude/scripts/generate-placeholder.js --preset product
node .claude/scripts/generate-placeholder.js --preset hero --label "Welcome Banner"
For quick prototyping, use inline data URIs:
<img src="data:image/svg+xml,..." alt="Placeholder"/>
Generate with:
node .claude/scripts/generate-placeholder.js --type simple --size 200x200 --inline
All placeholders MUST include:
role="img" on the SVG elementaria-label describing the placeholder<title> element as first child of SVGalt text on the <img> elementWhen adding placeholder images:
.assets/images/placeholder/ directory{type}-{width}x{height}.svg