Astroフレームワーク — CLAUDE.md
AstroウェブフレームワークのCLAUDE.md。アイランドアーキテクチャ、コンテンツコレクション、SSRアダプター、Vite統合のガイド。
withastro/astro 48,000
# Astro Framework — CLAUDE.md
## Project Overview
Astro is a web framework that generates fast, content-focused websites. Key innovations:
- **Island Architecture**: Partial hydration — only interactive components ship JavaScript.
- **Content Collections**: Type-safe content management with Zod schemas.
- **Zero JS by default**: Server-renders everything unless `client:*` directive is used.
## Repository Structure
```
packages/
astro/ # Core framework
@astrojs/ # Official integrations (react, vue, svelte, etc.)
examples/ # Starter templates
benchmark/ # Performance benchmarks
```
## Development
```bash
pnpm install
pnpm run build
pnpm run dev # Start docs site
pnpm run test # Run all tests
```
## Component Model
- `.astro` files: server-only by default.
- Frontmatter (between `---`) runs at build/request time.
- `client:load` / `client:idle` / `client:visible` for hydration.
- Props typed with TypeScript interfaces.
## Content Collections
```typescript
// src/content/config.ts
import { z, defineCollection } from 'astro:content';
const blog = defineCollection({
schema: z.object({
title: z.string(),
pubDate: z.date(),
tags: z.array(z.string()),
}),
});
export const collections = { blog };
```
## Integration Development
- Integrations use the `AstroIntegration` interface.
- Hooks: `astro:config:setup`, `astro:build:done`, etc.
- Vite plugins accepted in `vite.plugins`.
## Performance Guidelines
- Minimize `client:load` — prefer `client:idle` or `client:visible`.
- Use `Image` component from `astro:assets` for optimized images.
- Static assets in `public/` are served as-is.
- `getStaticPaths()` for dynamic route pre-rendering. こちらもおすすめ
Frontend カテゴリの他のルール
もっとルールを探す
CLAUDE.md、.cursorrules、AGENTS.md、Image Prompts の全 223 ルールをチェック。



