CLAUDE.md TypeScript Astro Frontend

Astroフレームワーク — CLAUDE.md

AstroウェブフレームワークのCLAUDE.md。アイランドアーキテクチャ、コンテンツコレクション、SSRアダプター、Vite統合のガイド。

CLAUDE.md · 64 lines
# 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.
Share on X

こちらもおすすめ

Frontend カテゴリの他のルール

もっとルールを探す

CLAUDE.md、.cursorrules、AGENTS.md、Image Prompts の全 223 ルールをチェック。