images-media
CommunityStrategic, high-performance images for the web
Authorflitzrrr
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Poor image strategy and unoptimized media cause slow load times, inconsistent visual language, accessibility gaps, and missed SEO opportunities; this skill helps teams make deliberate image choices that balance aesthetics, performance, and accessibility.
Core Features & Use Cases
- Image strategy: Define visual concept, mood, color palette, and selection criteria to ensure a consistent visual language across a site.
- Technical optimization: Recommend formats (WebP/AVIF), compression targets, responsive srcset variants, width/height attributes to prevent CLS, and lazy-loading rules.
- SVG & icon systems: Advise when to use inline SVGs, sprites, and consistent icon sets with accessible labels.
- Accessibility & content: Produce meaningful alt text, detect when images are decorative, and ensure no important text is embedded in images.
- Use cases: Designing hero sections, building galleries, creating image cards, and auditing site image performance and accessibility.
Quick Start
Use the images-media skill to audit a page's images, propose optimized formats and srcset variants, and generate descriptive alt text.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: images-media Download link: https://github.com/flitzrrr/frontend-design-skills/archive/main.zip#images-media Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.