Astro assets

Skill fusengine/agents/plugins/astro-expert/skills/astro-assets

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill astro-assets

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Image and asset optimization in Astro 7 — <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.

SKILL.md

3.7 KB, as published. Nobody here has run it

Astro Assets

Production-ready image optimization and asset management with astro:assets in Astro 7.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing image usage and asset patterns
fuse-ai-pilot:research-expert - Verify astro:assets API via Context7/Exa
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 (stable, Astro 6.0+)	Built-in `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 generation (API routes, CSS background images). Returns { src, attributes } object.

Fonts API (stable, Astro 6.0+)

Built-in font optimization via the top-level fonts config in astro.config.mjs (stable since Astro 6.0 — no experimental flag). Zero layout shift, automatic preloading, supports Google Fonts and local fonts.

Reference Guide

Concepts

Topic	Reference	When to Consult
Image Component	image-component.md	Local/remote image display
Responsive Images	picture-responsive.md	Multi-format, srcset, sizes
Remote Images	remote-images.md	External URLs, inferSize
Fonts API	fonts-api.md	Zero-CLS font loading
OG with Satori	og-satori.md	Dynamic OG image generation
CDN Integration	cdn-integration.md	Cloudinary, Imgix setup

Templates

Template	When to Use
image-setup.md	Full image optimization setup
og-image-route.md	Dynamic OG image API route

Best Practices

Always provide alt - Required for accessibility and SEO
Use priority for LCP - Above-the-fold images load eagerly
inferSize for remote - Avoids layout shift without known dimensions
Fonts API over @font-face - Built-in optimization, no manual preload
Satori at build time - Run OG generation during SSG, not SSR