An Agent Skill for building static sites with Astro. Teaches AI coding agents how to create Astro components, set up content collections, optimize images, configure SEO, and follow best practices for static site generation.
Framework-agnostic — works with React, Svelte, Vue, or any UI framework supported by Astro.
| Reference | Covers |
|---|---|
| Content Collections | Schemas (z.image, z.enum, reference()), querying, dynamic routes, entry.body |
| Image Optimization | <Image /> component, downscaling, SVG components, aspect ratios |
| SEO Checklist | Head component, per-page checklist, structured data (JSON-LD), hreflang, content rules |
| Pagination | paginate(), nested pagination, page prop |
- Astro-first —
.astrofiles for all presentational UI, framework components only when interactivity is needed - Minimal hydration — lightest
client:*directive that works - Small islands — only the interactive subtree gets hydrated
- Static output —
output: 'static', no SSR - Local fonts — Fontsource packages, never Google Fonts CDN
- Astro v5+
- Static output (
output: 'static')
npx skills add ianshk/astro-skillsThis installs the skill into your project and works with Claude Code, Cursor, Windsurf, Roo Code, and other Agent Skills-compatible editors.
Copy the skills/astro/ folder into your project and point your agent's skill/rules system at SKILL.md. The skill uses the open Agent Skills format and works with any compatible agent.
skills/
└── astro/
├── SKILL.md # Main skill instructions
└── references/
├── content-collections.md
├── image-optimizations.md
├── pagination.md
└── seo-checklist.md
MIT — see LICENSE.