# Rules for src/components/**/*.astro

## Every component MUST:

1. Define a TypeScript `Props` interface in the frontmatter:
   ```astro
   ---
   interface Props {
     title: string;
     optional?: boolean;
   }
   const { title, optional = false } = Astro.props;
   ---
   ```

2. Use ONLY design token Tailwind classes for colors — never raw hex values:
   - Backgrounds: `bg-page`, `bg-surface`, `bg-elevated`
   - Text: `text-text-primary`, `text-text-secondary`, `text-text-muted`, `text-accent`
   - Borders: `border-border`
   - Interactive: `bg-accent`, `hover:bg-accent-hover`

3. For interactive components requiring client-side JS:
   - Use Astro islands with `client:idle` directive (not `client:load` unless above the fold)
   - Prefer vanilla JS in `<script>` tags over framework islands
   - Pass data via `data-*` attributes, not inline scripts

4. Use PascalCase filenames matching the component name: `TerminalBlock.astro`, `TierBadge.astro`

5. Keep components focused — one responsibility per component

6. Include `aria-*` attributes for interactive elements (buttons, toggles, accordions)
