Back to Prompts

Astro Development

CLAUDE.md for Astro content-driven websites with island architecture

astrostatic-sitefrontendcontentjavascript
By Claude Code Community

CLAUDE.md Content

# Astro Project

This is an Astro project using content collections and island architecture for minimal client-side JavaScript.

## Project Structure
- `src/pages/` - File-based routing (.astro, .md, .mdx)
- `src/layouts/` - Page layout components
- `src/components/` - Reusable Astro and framework components
- `src/content/` - Content collections (Markdown/MDX)
- `src/content/config.ts` - Content collection schemas
- `src/styles/` - Global styles
- `public/` - Static assets (served as-is)
- `astro.config.mjs` - Astro configuration

## Code Style
- Use .astro components for static content (zero JS by default)
- Use framework components (React/Vue/Svelte) only for interactive islands
- Use TypeScript for type safety
- Use content collections for structured content
- Keep client-side JavaScript minimal

## Conventions
- Use `client:load` for interactive components that need JS immediately
- Use `client:visible` for components below the fold
- Use `client:idle` for low-priority interactive components
- Define content schemas with Zod in `content/config.ts`
- Use `getCollection()` and `getEntry()` for content queries
- Prefer Astro components over framework components when possible

## Commands
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npx astro check` - Run type checking
- `npx astro add <integration>` - Add an integration

How to use

  1. Copy the content above
  2. Create a CLAUDE.md file in your project root
  3. Paste the content and customize as needed
  4. Claude Code will automatically use this context