Claude-skill-registry astro-images

Astro Image Optimization

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/astro-images" ~/.claude/skills/majiayu000-claude-skill-registry-astro-images && rm -rf "$T"

manifest: skills/data/astro-images/SKILL.md

Astro Image Optimization

Use

astro:assets

for all images. This enables automatic optimization (resizing, WebP/AVIF conversion, lazy loading).

When to Use This Skill

Use this skill when:

Adding images to
```
.astro
```
or
```
.mdx
```
files
Moving images from
```
/public
```
to optimized assets
Debugging 404s or unoptimized images in production

Rules

Never use raw
<img>
tags in
```
.astro
```
or
```
.mdx
```
files
Never reference images from
/public
— bypasses optimization
Always import images from
```
src/assets/
```

Correct Pattern

---
import { Image } from "astro:assets";
import photo from "../assets/photo.png";
---

<Image src={photo} alt="Description" width={800} />

In MDX

---
import { Image } from "astro:assets";
import diagram from "../../assets/diagram.png";
---

<Image src={diagram} alt="Diagram" width={600} />

Linting

Run

npm run lint:assets

to catch violations. The linter flags:

Raw
```
<img>
```
tags in
```
.astro
```
and
```
.mdx
```
files (error)
Markdown images from
```
/public
```
like
```
![](/image.png)
```
(warning)
Direct
```
/src/
```
paths in link/script tags (error)