一键导入
images
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.
菜单
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.
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.
Generate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types.
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 | images |
| description | 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. |
| allowed-tools | Read, Write, Edit, Bash |
This skill coordinates all image-related functionality in the project. It delegates to specialized skills for detailed patterns while providing automation and validation.
| Task | Go To | Why |
|---|---|---|
| Add real images to a page | This skill | Coordinates optimization + markup |
Write responsive <picture> markup | responsive-images | Detailed srcset/sizes patterns |
| Create prototype placeholders | placeholder-images | SVG placeholder generation |
| Optimize LCP/hero images | performance | fetchpriority, preload details |
| Fix image validation errors | This skill | Commands and checklist below |
When you write a JPEG or PNG file, the PostToolUse hook automatically:
.webp variant using Sharp.avif variant using SharpSkipped files:
-\d+ pattern (already a srcset variant).webp and .avif siblingsWhen you add or edit HTML files, existing hooks check for:
loading attribute on imagesdecoding attributealt textwidth/height (causes layout shift)# Generate WebP/AVIF for all images in directory
node .claude/scripts/optimize-images.js src/images
# Also generate srcset variants (400w, 800w, 1200w)
node .claude/scripts/optimize-images.js src/images --sizes
# Preview what would be done
node .claude/scripts/optimize-images.js src/images --dry-run
# Validate image file sizes and dimensions
node .claude/scripts/image-check.js src/images
# Validate HTML image markup
node .claude/scripts/image-html-check.js src/**/*.html
<picture> pattern from responsive-images skillnode .claude/scripts/image-html-check.js# 1. You write: src/images/hero.jpg
# 2. Hook creates: src/images/hero.webp, src/images/hero.avif
# 3. Use in HTML:
<picture>
<source type="image/avif" srcset="images/hero.avif"/>
<source type="image/webp" srcset="images/hero.webp"/>
<img src="images/hero.jpg"
alt="Hero banner description"
loading="eager"
fetchpriority="high"
decoding="async"
width="1200"
height="400"/>
</picture>
# Generate modern formats only
node .claude/scripts/optimize-images.js src/images
# Generate srcset variants too
node .claude/scripts/optimize-images.js src/images --sizes
src/
images/
hero.jpg # Source (keep for editing)
hero.webp # Auto-generated
hero.avif # Auto-generated
hero-400.jpg # Srcset variant (--sizes)
hero-400.webp # Srcset variant (--sizes)
hero-400.avif # Srcset variant (--sizes)
hero-800.jpg # Srcset variant (--sizes)
...
placeholder/
*.svg # Placeholder images (see placeholder-images skill)
Naming conventions:
name.jpg or name.pngname.webp, name.avifname-{width}.{format} (e.g., hero-800.webp)| Format | Use For | Quality Setting |
|---|---|---|
| AVIF | Primary modern format | 65 |
| WebP | Fallback for AVIF | 82 |
| JPEG | Universal fallback | 85 |
| PNG | Transparency, screenshots | 85 |
| SVG | Icons, logos, placeholders | N/A |
Browser fallback order: AVIF > WebP > JPEG/PNG
| Image Context | Recommended Widths |
|---|---|
| Hero/full-width | 800, 1200, 1920 |
| Content images | 400, 800, 1200 |
| Card thumbnails | 300, 450 |
| Gallery images | 220, 330, 440 |
| Avatars | 48, 96, 128 |
Generate with: node .claude/scripts/optimize-images.js --sizes
When adding images:
<picture> with format fallbacksloading attribute set (eager for LCP, lazy for others)decoding="async" presentfetchpriority="high" for hero/LCP imageswidth and height attributes prevent layout shiftalt text is descriptive (or empty for decorative)sizes calculated based on rendered widthCheck that:
-\d+ pattern (srcset variant)npm ls sharpRun the check script:
node .claude/scripts/image-check.js src/images
Recommended maximums:
Generate manually:
node .claude/scripts/optimize-images.js src/images --sizes