fusengine/astro-assets
plugins/astro-expert/skills/astro-assets/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents astro-assetsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:42 AM136.8s9 files scanned
SKILL.md
- name:
- astro-assets
- description:
- 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.
- astro:
- 7
- user-invocable:
- true
- references:
- references/image-component.md, references/picture-responsive.md, references/remote-images.md, references/fonts-api.md, references/og-satori.md, references/cdn-integration.md, references/templates/image-setup.md, references/templates/og-image-route.md
- related-skills:
- astro-7, astro-seo, astro-deployment
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
priorityfor LCP - Above-the-fold images load eagerly inferSizefor 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
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026