---
description: Astro component and page conventions
globs: **/*.{astro,ts,tsx}
alwaysApply: false
---

- Use `.astro` files for pages and layout components.
- Keep client-side JavaScript minimal; prefer server-rendered HTML.
- Use islands architecture: add `client:load` only when interactivity is required.
- Colocate components in `src/components/`; pages in `src/pages/`.
- Use TypeScript in frontmatter (`---` blocks) for props and data fetching.
- Fetch data at build time in page frontmatter or content collections.
- Use `getCollection()` for content-driven pages.
- Optimize images with Astro's built-in `<Image />` component.
- Keep layouts in `src/layouts/` with shared `<BaseHead />` and SEO.