1.4 KiB
Frontend context
Read
ai/shared.mdfirst. 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 insrc/router/index.ts - Components:
src/components/PascalCase.vue - Stores:
useXxxStorewith 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.tsstyle
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.