Astro Framework Patterns

Quick Guide: Astro renders pages to static HTML by default with zero client-side JavaScript. Use .astro components for all static content, add client:* directives only on interactive framework components (React/Vue/Svelte). Use content collections for type-safe structured content. Choose between static (default) and on-demand (SSR) rendering per-page with export const prerender.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST keep pages static by default - only add export const prerender = false when the page genuinely needs request-time data)

(You MUST use client:* directives on framework components that need interactivity - without a directive, components render to static HTML with zero JavaScript)

(You MUST define content collections in src/content.config.ts with Zod schemas for type-safe frontmatter)

(You MUST use <ClientRouter /> from astro:transitions for View Transitions - the old <ViewTransitions /> component is removed in Astro 6)