FreeSkills
Commits, branches and sync with the but CLI
- 361361 downloads
- 198198 likes
- 103103 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Responsive images: srcset, modern formats and CLS v1.0.0
Use this resource to add responsive WebP or AVIF images without layout shift
New
- 319 downloads
- 193 likes
- 102 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install responsive-images-srcset-webpWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent writes srcset and sizes attributes, the picture element for art direction, lazy loading and fetchpriority for the main image, with a fixed aspect ratio. You get lighter images and a page that stays stable while loading.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeSkills
Sentry CLI guide
- 525525 downloads
- 117117 likes
- 128128 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Drizzle ORM best practices with PostgreSQL
- 407407 downloads
- 194194 likes
- 151151 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
SLO design wizard
- 537537 downloads
- 105105 likes
- 242242 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
User stories and sprint fit
- 451451 downloads
- 150150 likes
- 132132 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Capacity-based sprint plan
- 423423 downloads
- 192192 likes
- 102102 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Startup CTO advisor
- 580580 downloads
- 201201 likes
- 242242 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Creating GitHub pull requests with quality checks
- 427427 downloads
- 230230 likes
- 196196 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: overview, recommended sizes and common mistakes
- references/srcset-sizes.md: srcset and sizes
- references/picture-element.md: the picture element
- references/modern-formats.md: WebP and AVIF
Good fit for
- Your home page loads a slow, large image
- Content shifts as images arrive
Not for
Tags
- images
- srcset
- webp
- avif
- core web vitals
About
You say
“Make my shop's product photos responsive in WebP, with a fixed aspect ratio and lazy loading.”
Skill published by oakoss under the MIT license, delivered in its original version.
Show moreShow less
How to use it
- Install the skill in your agent's skills folder
- Ask your agent to add responsive WebP or AVIF images without layout shift
- Review and adjust the result
Content preview
Files
- LICENSE1.3 KB
- NOTICE-PALATEKIT.md0.5 KB
- references/aspect-ratio.md6.5 KB
- references/lazy-loading.md5 KB
- references/modern-formats.md5.1 KB
- references/picture-element.md5.3 KB
- references/srcset-sizes.md4.6 KB
- SKILL.md5.7 KB
Origin and licence
Listed unmodified
- Author
- oakoss
- Source
- github.com/oakoss/agent-skills/tree/85e3a3919d9e0ec7f7302a5143ec4b3e66f5f6ad/skills/responsive-images
- Licence
- MIT
Notice
« responsive-images » (oakoss, MIT) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.
User reviews
–
No ratings yet
Loading reviews…