astro-assetslisted
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