36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# 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`.
|