image-optimization
✓Image optimization with Next.js 15 Image, AVIF/WebP formats, blur placeholders, responsive sizes, and CDN loaders. Use when improving image performance, responsive sizing, or Next.js image pipelines.
Installation
SKILL.md
| Optimization | LCP Impact | CLS Impact | Bandwidth |
| AVIF format | -20-30% load | None | -50% size | | Responsive sizes | -30-50% load | None | -40% size | | Blur placeholder | Perceived faster | Prevents shift | +1kb | | Priority loading | -500ms+ | None | None | | Lazy loading | None (below fold) | None | Deferred |
| No width/height | CLS from layout shift | Always set dimensions | | Eager load all | Slow initial load | Use lazy loading | | No priority on LCP | Slow LCP | Add priority prop | | PNG for photos | Large file size | Use AVIF/WebP | | Single image size | Wasted bandwidth | Use responsive sizes |
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/yonatangross/orchestkit --skill image-optimization- Source
- yonatangross/orchestkit
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is image-optimization?
Image optimization with Next.js 15 Image, AVIF/WebP formats, blur placeholders, responsive sizes, and CDN loaders. Use when improving image performance, responsive sizing, or Next.js image pipelines. Source: yonatangross/orchestkit.
How do I install image-optimization?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/yonatangross/orchestkit --skill image-optimization Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/yonatangross/orchestkit
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01