← ClaudeAtlas

astro-assetslisted

Image and asset optimization in Astro 6 — <Image />, <Picture />, getImage(), remote images, @astrojs/sharp, Fonts API, OG image generation with Satori, Cloudinary/Imgix. Use for any image optimization or asset handling task.
fusengine/agents · ★ 15 · Web & Frontend · score 84
Install: claude install-skill fusengine/agents
# Astro Assets Production-ready image optimization and asset management with `astro:assets` in Astro 6. ## Agent Workflow (MANDATORY) Before ANY implementation, use `TeamCreate` to spawn 3 agents: 1. **fuse-ai-pilot:explore-codebase** - Analyze existing image usage and asset patterns 2. **fuse-ai-pilot:research-expert** - Verify astro:assets API via Context7/Exa 3. **mcp__context7__query-docs** - Check Astro 6 Fonts API and image component docs After implementation, run **fuse-ai-pilot:sniper** for validation. --- ## Overview ### When to Use - Displaying optimized images with automatic WebP/AVIF conversion - Building responsive images with multiple breakpoints - Loading remote images from external CDNs - Configuring custom fonts without layout shift - Generating OG images dynamically with Satori - Integrating Cloudinary or Imgix as image CDN ### Key Modules | Module | Exports | |--------|---------| | `astro:assets` | `<Image />`, `<Picture />`, `getImage()` | | `@astrojs/sharp` | Default image processing service | | Fonts API (Astro 6) | Built-in `experimental.fonts` config | --- ## Core Concepts ### Image Component `<Image />` automatically optimizes local and remote images. Always provide `alt`. Use `priority` for above-the-fold images. Defaults to WebP output. ### Picture Component `<Picture />` generates `<source>` elements for multiple formats. Use `formats={['avif', 'webp']}` for best compression with fallback. ### getImage() For server-side image gen