# Frontend context

> Read `ai/shared.md` first. This file only covers frontend-specific rules.

## Project Context

**Stack:** Vue 3.5 (Composition API, `<script setup lang="ts">`), TypeScript
strict, Vite 8, Vue Router 5, Pinia 3, vanilla CSS (no framework). Path alias
`@` → `./src`.

**Design tokens:** Font: Inter/system-sans. Colors: text `#0a0a0a`, secondary
`#6b6b6b`, border `#e5e5e5`, accent `#0062ff`, bg `#fff`, button `#000` / hover
`#222`. Inputs/buttons: 36px height, 6px radius, 1px border → black on focus.
Spacing: 8px base unit.

## Code patterns

- Look at similar components/views for reference before writing anything
- **Views:** `src/views/PascalCasePage.vue`, register in `src/router/index.ts`
- **Components:** `src/components/PascalCase.vue`
- **Stores:** `useXxxStore` with composition style -
  `defineStore('name', () => { ... return {...} })`
- **Styling:** `<style scoped>` only, vanilla CSS, reuse design tokens above
- **TypeScript:** strict mode, no `any`
- **Testing:** Cypress E2E only, mirror `cypress/e2e/login_page.cy.ts` style

## Pre-commit

Run `npm run format && npm run lint` on worked-on files before committing.

## Note on commit granularity

Frontend changes are often single-file (a new view, a new component), so
commits will frequently land as one file each. That is a consequence of the
shared "one logical change per commit" rule, not a separate per-file rule -
see `shared.md`.