Placeholder Images Skill

placeholder-images

Generate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types.

mattnigh/skills_collection·0installs24stars

SKILL.md

Full skill instructions

Placeholder Images Skill

Generate SVG placeholder images for HTML prototypes and layouts.

Placeholder Types

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

Size Presets

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).

Simple Placeholder

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>

Labeled Placeholder

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>

Brand Placeholder

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.css
src/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>

Common Image Types

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

File Organization

.assets/images/placeholder/
├── simple-400x400.svg
├── simple-800x600.svg
├── hero-1200x400.svg
├── product-400x400.svg
├── avatar-128x128.svg
└── card-400x225.svg

Generate with Script

# 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"

Inline Data URI

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

Accessibility

All placeholders MUST include:

role="img" on the SVG element
aria-label describing the placeholder
<title> element as first child of SVG
Meaningful alt text on the <img> element

Checklist

When adding placeholder images:

Use appropriate preset or custom size
Add descriptive label for labeled/brand types
Include meaningful alt text
Place in .assets/images/placeholder/ directory
Use consistent naming: {type}-{width}x{height}.svg

Related Skills

responsive-images - Modern responsive image techniques using picture element,...
fake-content - Generate realistic fake content for HTML prototypes
xhtml-author - Write valid XHTML-strict HTML5 markup
performance - Write performance-friendly HTML pages

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/mattnigh/skills_collection --skill ProfPowell__project-template__claude__skills__placeholder-images__SKILL.md

View on GitHub

collection/ProfPowell__project-template__claude__skills__placeholder-images__SKILL.md

frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guide...
1 installs
animation-motion
CSS animations, transitions, and scroll-driven effects with accessibility (prefers-reduced-motion). Use when adding motion, hover effects, loading states, or scroll-based animations.
1 installs
laravel
Laravel v12 - The PHP Framework For Web Artisans
1 installs
gemini-document-processing
Guide for implementing Google Gemini API document processing - analyze PDFs with native vision to extract text, images, diagrams, charts, and tables. Use when processing documents, extracting structured data, summarizing PDFs, answering questions about document content, or converting documents to...
0 installs

More skills from mattnigh

mattnigh/skills_collection

spring-framework-patterns

Comprehensive Spring Framework and Spring Boot best practices including dependency injection patterns, bean lifecycle and scopes, REST API development, Spring Data JPA, service layer design, Spring Security, testing strategies, caching, AOP, async processing, error handling, and common anti-patte...

24 0

View

mattnigh/skills_collection

When Stuck - Problem-Solving Dispatch

Dispatch to the right problem-solving technique based on how you're stuck

24 0

View

mattnigh/skills_collection

.claude/skills/type-safety-patterns/SKILL.md

TypeScript厳格モードによる型安全性設計を専門とするスキル。 📖 参照書籍: - 『Effective TypeScript』（Dan Vanderkam）: 型設計 📚 リソース参照: - `resources/Level1_basics.md`: レベル1の基礎ガイド - `resources/Level2_intermediate.md`: レベル2の実務ガイド - `resources/Level3_advanced.md`: レベル3の応用ガイド - `resources/Level4_expert.md`: レベル4の専門ガイド - `resources/di...

24 0

View

mattnigh/skills_collection

deploying-cloud-k8s

Deploys applications to cloud Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Use when deploying to production, setting up GitHub Actions, troubleshooting deployments. Covers build-time vs runtime vars, architecture matching, and battle-tested debugging.

24 0

View

mattnigh/skills_collection

moai-alfred-agent-guide

19-agent team structure, decision trees for agent selection, Haiku vs Sonnet model selection, and agent collaboration principles. Use when deciding which sub-agent to invoke, understanding team responsibilities, or learning multi-agent orchestration.

24 0

View

mattnigh/skills_collection

mermaid-diagram-generator

Converts architecture descriptions, module specs, or workflow docs into Mermaid diagrams. Use when visualizing brick module relationships, workflows (DDD, investigation), or system architecture. Supports: flowcharts, sequence diagrams, class diagrams, state machines, entity relationship diagrams,...

24 0

View

mattnigh/skills_collection

pre-flight-check

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.

24 0

View

mattnigh/skills_collection

browser-dev-tools

This skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify t...

24 0

View

mattnigh/skills_collection

lead-dev

Lead Développeur - Coordination technique opérationnelle, code review, mentoring et livraison. Pair de web-dev-process au niveau OPÉRATIONS.

24 0

View

mattnigh/skills_collection

worker-monitor

Monitor Docker workers, RQ queue health, and auto-scale workers (max 4). Use when: checking job progress, monitoring queue depth, scaling workers up/down, diagnosing slow processing, or waiting for jobs to complete. Referenced by data-quality skill during reprocessing.

24 0

View

mattnigh/skills_collection

quality-advisor

Proactive quality guidance system that monitors artifact creation and provides real-time feedback on documentation quality

24 0

View

mattnigh/skills_collection

bump-version

This skill should be used when the user wants to bump the version number in the workspace. It updates versions across all pyproject.toml files (root, tde, and tda packages) and the CHANGELOG.md to keep them synchronized.

24 0

View