skills.rest
ProfPowell
ProfPowellCOMMUNITY
Explore all skills by this author →
GitHub

images

Generate WebP and AVIF variants, srcset, and validate HTML image markup.

4|Updated Jan 13, 2026
Search Tags:#optimization#images#web performance#asset management#responsive images#image formats
One-click install
npx skills add https://github.com/ProfPowell/vanilla-breeze --skill images-profpowell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: images
Source: https://github.com/ProfPowell/vanilla-breeze/tree/main/.claude/skills/images
Command: npx skills add https://github.com/ProfPowell/vanilla-breeze --skill images-profpowell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding, optimizing, and validating images for web use, ensuring performance and accessibility.

Core Features & Use Cases

  • Automated Format Conversion: Generates modern formats (WebP, AVIF) from source images.
  • Responsive Image Generation: Creates srcset variants for different screen sizes.
  • HTML Markup Validation: Checks for missing attributes like loading, decoding, alt, width, and height.
  • Use Case: When you add a new hero image to your website, this skill automatically creates optimized versions and helps you generate the correct <picture> element for efficient loading.

Quick Start

Optimize all images in the 'src/images' directory and generate responsive variants.

Frequently Asked Questions about images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize images and generate responsive srcset variants for different screen sizes?▼

To optimize images and generate responsive variants, this Skill processes source files to automatically create srcset variants for different screen sizes and converts them into modern web formats for efficient loading.

What is the best way to automate WebP and AVIF format conversion for web performance?▼

Automated WebP and AVIF format conversion is handled directly by this Skill, which processes your source images to generate modern format variants, ensuring optimal web performance without manual intervention.

How do I prevent layout shift and validate HTML image markup for missing attributes?▼

To prevent layout shift, this Skill validates HTML image markup by checking for missing attributes like loading, decoding, alt, width, and height, ensuring images render correctly without disrupting page layout.

Does this image management workflow require sharp to process assets?▼

Yes, this image management workflow requires the sharp dependency to process assets, utilizing it as the underlying engine for automated image optimization, format conversion, and responsive variant generation.

Can I generate placeholders and picture elements when adding a new hero image?▼

Yes, you can generate placeholders and correct picture elements when adding a new hero image, as this Skill coordinates placeholder generation and helps construct proper markup for efficient loading.

Related Skills

Explore More Software Engineering Skills→
wx-chevalierwx-chevalier
10

baoyu-compress-image

Compress WebP, PNG, and JPEG images with adjustable quality settings.

Community
Intermediate
dennislee928dennislee928
54

responsive-images

Implement responsive images with srcset, sizes, AVIF, WebP, and lazy loading.

Community
Advanced
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic
IgorVaryvodaIgorVaryvoda

image-optimization

Select modern image formats and configure responsive delivery with fallbacks.

Community
Basic