Skip to content

Astro Site Builder

Verified

Build content-driven Astro websites with island architecture, MDX content collections, SSG/SSR modes, and Tailwind CSS integration.

By community 4,600 v1.2.0 Updated 2026-03-08

Install

Claude Code

Copy the SKILL.md file to .claude/skills/astro-site.md

About This Skill

Astro Site Builder generates Astro projects that leverage the framework's unique island architecture to ship minimal JavaScript while enabling interactive components where needed.

Island Architecture

Generated pages are static HTML by default. Interactive components use `client:load`, `client:idle`, or `client:visible` directives to hydrate only when needed. This pattern typically cuts page JavaScript by 60-90% compared to traditional SPAs.

Content Collections

Typed content collections with Zod schemas validate frontmatter at build time. MDX files can import and render Astro/React components inline. Collection queries with `getCollection()` support filtering and sorting.

Routing & Layouts

File-based routing with dynamic `[slug]` routes and `[...slug]` catch-alls. Layout components provide shared chrome. `getStaticPaths()` generates all paths for SSG builds.

Integrations

The skill configures official Astro integrations: `@astrojs/tailwind`, `@astrojs/react` or `@astrojs/vue`, `@astrojs/sitemap` for SEO, and `@astrojs/image` for optimized images via Sharp.

Deployment

Generates adapter configuration for Cloudflare Pages (edge SSR), Vercel, Netlify, or static output for any CDN. Environment variables handled via `import.meta.env` with type-safe schema.

Use Cases

  • Building marketing sites and blogs with zero JavaScript by default
  • Creating content collections with MDX for type-safe blog or docs sites
  • Adding interactive React/Vue/Svelte islands to static Astro pages
  • Configuring Astro SSR for dynamic routes with Cloudflare/Vercel adapters

Pros & Cons

Pros

  • + Ships zero JavaScript by default for maximum Core Web Vitals scores
  • + Supports React, Vue, Svelte, and Solid islands in the same project
  • + Content collections provide compile-time frontmatter validation
  • + Works with any UI framework without lock-in

Cons

  • - Island architecture mental model has a learning curve for React-only developers
  • - SSR mode requires an adapter and loses some static optimization benefits

Related AI Tools

Cursor

Cursor

Freemium

AI-native code editor with deep multi-model integration and agentic coding

  • AI-native Cmd+K inline editing and generation
  • Composer Agent for autonomous multi-file changes
  • Full codebase indexing and context awareness
Get Started →
v0 by Vercel

v0 by Vercel

Freemium

AI UI generator that creates production-ready React components from prompts

  • Production-ready React/Next.js component generation
  • shadcn/ui and Tailwind CSS output
  • Image and screenshot to code conversion
Get Started →
Claude Code

Claude Code

Paid

Anthropic's agentic CLI for autonomous terminal-native coding workflows

  • Terminal-native autonomous coding agent
  • Full file system and shell access for multi-step tasks
  • Deep codebase understanding via repository indexing
View Pricing →

Related Skills

Tailwind CSS Converter

Verified
CC Cu WS

Convert traditional CSS, SCSS, and styled-components to Tailwind utility classes with responsive and dark mode support.

5,130 development
View

Responsive Layout

Caution
CC Cu Cx WS

Implements responsive design patterns using CSS Grid, Flexbox, and container queries with mobile-first breakpoint strategies.

4,100 design
View

React Component Generator

Caution
CC Cu WS Gm

Generate React components following best practices with proper typing, accessibility, testing, and Storybook stories.

8,940 development
View

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts

每周精选 Skills + 安全预警