Astro Agent Skill

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.

What's Included

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

Key Principles

• Astro-first — .astro files 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

Requirements

• Astro v5+
• Static output (output: 'static')

Installation

Quick Install (any editor)

npx skills add ianshk/astro-skills

This installs the skill into your project and works with Claude Code, Cursor, Windsurf, Roo Code, and other Agent Skills-compatible editors.

Manual Install

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.

Directory Structure

skills/
└── astro/
    ├── SKILL.md              # Main skill instructions
    └── references/
        ├── content-collections.md
        ├── image-optimizations.md
        ├── pagination.md
        └── seo-checklist.md

License

MIT — see LICENSE.