responsive-images
Installation
SKILL.md
skill:responsive-images - Performant Responsive Images
Version: 1.0.0
Purpose
Implement performant responsive images that load the right size and format for every device. This skill covers srcset/sizes attributes, modern formats (WebP, AVIF), lazy loading, CLS prevention with aspect-ratio, the <picture> element for art direction, fetchpriority for LCP images, and framework-specific image components (Next.js Image, Astro Image). Use when adding images to any web project, optimizing existing images for performance, or fixing Core Web Vitals (CLS, LCP) issues related to images.
File Structure
skills/responsive-images/
├── SKILL.md (this file)
└── examples.md