Astro Cursor Rules

.cursorrules for Astro

# Astro Project Rules

## Stack
- Astro 5.x (Content Collections v2, View Transitions)
- TypeScript strict mode
- Island architecture: use client directives sparingly

## Components
- `.astro` for static components (default)
- React/Svelte islands only for interactive UI (with `client:load` or `client:visible`)
- Prefer `client:visible` over `client:load` for below-fold components

## Content Collections
- Define schemas in `src/content/config.ts`
- Use `getCollection()` and `getEntry()` for data access
- Frontmatter must match Zod schema exactly

## Routing
- File-based routing in `src/pages/`
- Dynamic routes: `[slug].astro`, `[...slug].astro`
- Static paths via `getStaticPaths()`

## Styling
- Scoped `<style>` in .astro files (default)
- Global styles in `src/styles/global.css`
- Use CSS custom properties for theming

## Performance
- Prefer static rendering (SSG) — add `output: 'server'` only when needed
- Images via `<Image />` component with proper width/height
- Minimize client-side JavaScript

Related

• Cursor Rules Guide | Svelte Cursor Rules