Astro Site Builder

Build blazing-fast static and hybrid sites with Astro. Generates components, content collections, API routes, view transitions, and island architecture patterns with any UI framework integration.

This skill helps you build performant websites with Astro. It generates Astro components, sets up content collections, configures integrations (React, Vue, Svelte islands), implements view transitions, creates API routes for hybrid rendering, and optimizes for zero-JS output where possible.

When to use

Use when building content-heavy websites, marketing pages, docs sites, or blogs. Especially useful for sites that need to ship minimal JavaScript while supporting interactive islands.

Examples

Content collection setup

Create typed content collections for a blog

Set up Astro content collections for blog posts and authors with type-safe schema validation and MDX support

View transitions

Implement smooth page transitions

Add Astro view transitions with persist directives for the navigation and animated page-level transitions