Menu
Generate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types.
Define and use custom HTML elements. Use when creating new components, defining custom tags, or using project-specific elements beyond standard HTML5.
Write vanilla JavaScript for Web Components with functional core, imperative shell. Use when creating JavaScript files, building interactive components, or writing any client-side code.
Modern CSS organization with native @import, @layer cascade control, CSS nesting, design tokens, and element-focused selectors. AUTO-INVOKED when editing .css files.
Enforce structured git workflow with conventional commits, feature branches, semver versioning, and work logging. Use for all code changes to prevent work loss and maintain history.
INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.
Use consistent Lucide icons with the <icon-wc> component. Use when adding icons to pages, buttons, or UI elements.
| 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 scripts/quality/generate-placeholder.js --type brand --label "Product" --preset product
# Specify CSS file explicitly
node scripts/quality/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 scripts/quality/generate-placeholder.js --type simple --size 400x400
# Labeled placeholder
node scripts/quality/generate-placeholder.js --type labeled --label "Hero Image" --size 1200x400
# Brand placeholder (auto-detects CSS tokens)
node scripts/quality/generate-placeholder.js --type brand --label "Product" --preset product
# Brand placeholder with specific CSS file
node scripts/quality/generate-placeholder.js --type brand --label "Hero" --size 1200x400 \
--tokens src/styles/main.css
# Output to file
node scripts/quality/generate-placeholder.js --type labeled --label "Product" --size 400x400 \
--output .assets/images/placeholder/product-400x400.svg
# Generate preset
node scripts/quality/generate-placeholder.js --preset product
node scripts/quality/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 scripts/quality/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