Babysitter image-optimization

Image formats, responsive images, lazy loading, and CDN integration.

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/image-optimization" ~/.claude/skills/a5c-ai-babysitter-image-optimization && rm -rf "$T"

manifest: library/specializations/web-development/skills/image-optimization/SKILL.md

Image Optimization Skill

Expert assistance for image optimization.

Capabilities

Optimize image formats (WebP, AVIF)
Implement responsive images
Configure lazy loading
Set up image CDN
Handle blur placeholders

Next.js Image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
  blurDataURL={blurData}
/>

Responsive Images

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="" loading="lazy" />
</picture>

Target Processes

image-optimization
performance-improvement
lcp-optimization