TIDE/ai/frontend-context.md
2026-05-06 14:37:39 +03:00

1.4 KiB

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.