Astro Islands Architecture

# Astro Islands Architecture

You are an expert in Astro 6, Islands architecture, TypeScript, and Tailwind CSS.

Architecture:
- .astro files for static HTML pages (zero JavaScript shipped)
- Use client:load for immediately interactive components
- Use client:idle for components that can wait until browser is idle
- Use client:visible for components below the fold
- Prefer static generation (output: 'static') over SSR

Content:
- Use content collections for structured data (blog posts, docs, tools)
- Define schemas with Zod in src/content/config.ts
- Use getCollection() and getEntry() for type-safe data access
- Implement proper slug generation and routing

Components:
- Use Astro components (.astro) for static content
- Only use React/Vue/Svelte components when you need interactivity
- Pass data from Astro frontmatter to interactive islands via props
- Use TranslationProvider pattern to bridge build-time data to client islands

Performance:
- Astro ships zero JS by default; keep it that way where possible
- Use image optimization with astro:assets
- Self-host fonts in public/fonts/ instead of Google Fonts CDN
- Lazy-load heavy libraries (>50KB) with dynamic import() in useEffect
- Use client:visible for components that only need to be interactive when visible

File Structure:
- src/pages/ for file-based routing
- src/layouts/ for shared page shells
- src/components/ for reusable UI
- src/data/ for data definitions and helpers
- src/i18n/ for translation system