astro-assets

Name: astro-assets
Author: fusengine

21stars3forks

How to install astro-assets?

fusengine/agents/astro-assets

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Astro Assets
2
3	Production-ready image optimization and asset management with `astro:assets` in Astro 7.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Analyze existing image usage and asset patterns
10	2. fuse-ai-pilot:research-expert - Verify astro:assets API via Context7/Exa
11	3. mcp__context7__query-docs - Check Astro 6 Fonts API and image component docs
12
13	After implementation, run fuse-ai-pilot:sniper for validation.
14
15	---
16
17	## Overview
18
19	### When to Use
20
21	- Displaying optimized images with automatic WebP/AVIF conversion
22	- Building responsive images with multiple breakpoints
23	- Loading remote images from external CDNs
24	- Configuring custom fonts without layout shift
25	- Generating OG images dynamically with Satori
26	- Integrating Cloudinary or Imgix as image CDN
27
28	### Key Modules
29
30	\| Module \| Exports \|
31	\|--------\|---------\|
32	\| `astro:assets` \| `<Image />`, `<Picture />`, `getImage()` \|
33	\| `@astrojs/sharp` \| Default image processing service \|
34	\| Fonts API (stable, Astro 6.0+) \| Built-in `fonts` config \|
35
36	---
37
38	## Core Concepts
39
40	### Image Component
41
42	`<Image />` automatically optimizes local and remote images. Always provide `alt`. Use `priority` for above-the-fold images. Defaults to WebP output.
43
44	### Picture Component
45
46	`<Picture />` generates `<source>` elements for multiple formats. Use `formats={['avif', 'webp']}` for best compression with fallback.
47
48	### getImage()
49
50	For server-side image generation (API routes, CSS background images). Returns `{ src, attributes }` object.
51
52	### Fonts API (stable, Astro 6.0+)
53
54	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.
55
56	---
57
58	## Reference Guide
59
60	### Concepts
61
62	\| Topic \| Reference \| When to Consult \|
63	\|-------\|-----------\|-----------------\|
64	\| Image Component \| [image-component.md](references/image-component.md) \| Local/remote image display \|
65	\| Responsive Images \| [picture-responsive.md](references/picture-responsive.md) \| Multi-format, srcset, sizes \|
66	\| Remote Images \| [remote-images.md](references/remote-images.md) \| External URLs, inferSize \|
67	\| Fonts API \| [fonts-api.md](references/fonts-api.md) \| Zero-CLS font loading \|
68	\| OG with Satori \| [og-satori.md](references/og-satori.md) \| Dynamic OG image generation \|
69	\| CDN Integration \| [cdn-integration.md](references/cdn-integration.md) \| Cloudinary, Imgix setup \|
70
71	### Templates
72
73	\| Template \| When to Use \|
74	\|----------\|-------------\|
75	\| [image-setup.md](references/templates/image-setup.md) \| Full image optimization setup \|
76	\| [og-image-route.md](references/templates/og-image-route.md) \| Dynamic OG image API route \|
77
78	---
79
80	## Best Practices
81
82	1. Always provide `alt` - Required for accessibility and SEO
83	2. Use `priority` for LCP - Above-the-fold images load eagerly
84	3. `inferSize` for remote - Avoids layout shift without known dimensions
85	4. Fonts API over @font-face - Built-in optimization, no manual preload
86	5. Satori at build time - Run OG generation during SSG, not SSR

People who liked this also viewed

6 picks

Type

astro-assets

21stars3forks

View on GitHub

How to install astro-assets?

fusengine/agents/astro-assets

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Astro Assets
2
3	Production-ready image optimization and asset management with `astro:assets` in Astro 7.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Analyze existing image usage and asset patterns
10	2. fuse-ai-pilot:research-expert - Verify astro:assets API via Context7/Exa
11	3. mcp__context7__query-docs - Check Astro 6 Fonts API and image component docs
12
13	After implementation, run fuse-ai-pilot:sniper for validation.
14
15	---
16
17	## Overview
18
19	### When to Use
20
21	- Displaying optimized images with automatic WebP/AVIF conversion
22	- Building responsive images with multiple breakpoints
23	- Loading remote images from external CDNs
24	- Configuring custom fonts without layout shift
25	- Generating OG images dynamically with Satori
26	- Integrating Cloudinary or Imgix as image CDN
27
28	### Key Modules
29
30	\| Module \| Exports \|
31	\|--------\|---------\|
32	\| `astro:assets` \| `<Image />`, `<Picture />`, `getImage()` \|
33	\| `@astrojs/sharp` \| Default image processing service \|
34	\| Fonts API (stable, Astro 6.0+) \| Built-in `fonts` config \|
35
36	---
37
38	## Core Concepts
39
40	### Image Component
41
42	`<Image />` automatically optimizes local and remote images. Always provide `alt`. Use `priority` for above-the-fold images. Defaults to WebP output.
43
44	### Picture Component
45
46	`<Picture />` generates `<source>` elements for multiple formats. Use `formats={['avif', 'webp']}` for best compression with fallback.
47
48	### getImage()
49
50	For server-side image generation (API routes, CSS background images). Returns `{ src, attributes }` object.
51
52	### Fonts API (stable, Astro 6.0+)
53
54	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.
55
56	---
57
58	## Reference Guide
59
60	### Concepts
61
62	\| Topic \| Reference \| When to Consult \|
63	\|-------\|-----------\|-----------------\|
64	\| Image Component \| [image-component.md](references/image-component.md) \| Local/remote image display \|
65	\| Responsive Images \| [picture-responsive.md](references/picture-responsive.md) \| Multi-format, srcset, sizes \|
66	\| Remote Images \| [remote-images.md](references/remote-images.md) \| External URLs, inferSize \|
67	\| Fonts API \| [fonts-api.md](references/fonts-api.md) \| Zero-CLS font loading \|
68	\| OG with Satori \| [og-satori.md](references/og-satori.md) \| Dynamic OG image generation \|
69	\| CDN Integration \| [cdn-integration.md](references/cdn-integration.md) \| Cloudinary, Imgix setup \|
70
71	### Templates
72
73	\| Template \| When to Use \|
74	\|----------\|-------------\|
75	\| [image-setup.md](references/templates/image-setup.md) \| Full image optimization setup \|
76	\| [og-image-route.md](references/templates/og-image-route.md) \| Dynamic OG image API route \|
77
78	---
79
80	## Best Practices
81
82	1. Always provide `alt` - Required for accessibility and SEO
83	2. Use `priority` for LCP - Above-the-fold images load eagerly
84	3. `inferSize` for remote - Avoids layout shift without known dimensions
85	4. Fonts API over @font-face - Built-in optimization, no manual preload
86	5. Satori at build time - Run OG generation during SSG, not SSR

People who liked this also viewed

6 picks

Type