菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Systematic development workflow: Analyze → Plan → Execute → eLicit → eXamine. Use for ANY development task: features, bug fixes, refactoring, hotfixes. Triggers: "implement", "create", "build", "fix", "add feature", "refactor", "develop". Auto-detects project type (Laravel, Next.js, React, Swift) and loads framework-specific references. Enforces: files <100 lines, interfaces separated, SOLID principles, expert self-review, sniper validation. Modes: --auto (default), --manual, --skip-elicit
Auto-review skill for expert agents. After coding, expert applies elicitation techniques to self-correct before sniper validation. Inspired by BMAD-METHOD. Use when: an expert agent needs to self-review and self-correct code after the Execute phase, before sniper validation.
Use when marking a task as complete, finishing a feature, or claiming a bug is fixed. Ensures functional resolution is verified with evidence before closing. Do NOT use for: lint/type/code-quality validation (use code-quality / sniper AFTER functional verification passes).
Smart conventional commit with security validation, branch flow enforcement, and auto-detection. Use when committing changes, saving work, staging and committing, or choosing a conventional commit message.
Use when committing, branching, opening PRs, or deciding merge strategy. Covers GitHub Flow (default), trunk-based, branch naming conventions, squash vs rebase, branch lifecycle, and protected branch enforcement.
Universal post-commit actions. CHANGELOG update for all repos (git tag is created POST-MERGE, not here — see `commit` command Step 8). Plugin version bumping for marketplace repos. Triggered after any code commit (except wip/amend/undo).
| 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. |
Targets: Astro 7.
Production-ready image optimization and asset management with astro:assets in Astro 7.
Before ANY implementation, spawn 3 parallel agents (Codex spawn_agent):
After implementation, run sniper for validation.
| Module | Exports |
|---|---|
astro:assets | <Image />, <Picture />, getImage() |
@astrojs/sharp | Default image processing service |
| Fonts API (stable, Astro 6.0+) | Built-in fonts config |
<Image /> automatically optimizes local and remote images. Always provide alt. Use priority for above-the-fold images. Defaults to WebP output.
<Picture /> generates <source> elements for multiple formats. Use formats={['avif', 'webp']} for best compression with fallback.
For server-side image generation (API routes, CSS background images). Returns { src, attributes } object.
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.
| 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 |
| Template | When to Use |
|---|---|
| image-setup.md | Full image optimization setup |
| og-image-route.md | Dynamic OG image API route |
alt - Required for accessibility and SEOpriority for LCP - Above-the-fold images load eagerlyinferSize for remote - Avoids layout shift without known dimensions