astrolisted

# Astro Skill Reference for building static Astro sites (output: `'static'`). Covers architecture decisions, content collections, SEO, image optimization, pagination, and deployment patterns. **Consult [docs.astro.build](https://docs.astro.build) and [llms.txt](https://docs.astro.build/llms.txt) for latest APIs when needed.** --- ## References Read these files for detailed patterns and templates: | Reference | What it covers | |---|---| | [`content-collections.md`](./references/content-collections.md) | Schemas (`z.image`, `z.enum`, `reference()`), querying, dynamic routes, `entry.body` | | [`image-optimizations.md`](./references/image-optimizations.md) | `<Image />` component, downscaling tip, SVG components, aspect ratios | | [`seo-checklist.md`](./references/seo-checklist.md) | Head component, per-page checklist, structured data (JSON-LD), hreflang, content rules | | [`pagination.md`](./references/pagination.md) | `paginate()`, nested pagination, `page` prop | --- ## Architecture Rules ### 1. Astro-first - `.astro` files for everything presentational — zero JS shipped to client. - Framework components (`.tsx`, `.svelte`, `.vue`, etc.) only when interactivity is needed. ### 2. Minimal hydration Use the lightest `client:*` directive that works: | Directive | Use case | |---|---| | `client:load` | Critical above-the-fold interactivity | | `client:idle` | Non-critical (modals, popovers) | | `client:visible` | Below-the-fold widgets | | `client:media` | Screen-size