# Frontend context

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

## Project Context

**Stack:** Vue 3 (beta) + Vite + TypeScript + Pinia + vue-router. Tooling:
oxlint, oxfmt, eslint. Cypress 15 for E2E (provided by the Nix devshell;
project-level config still to be wired up - see Testing below).
**Entry point:** `frontend/rabbi_gerzi/src/main.ts`; root component
`src/App.vue`; routes in `src/router/`; stores in `src/stores/`.

All frontend paths below are relative to `frontend/rabbi_gerzi/`.

## Code patterns

- Look at existing files for reference before writing anything
- **Components:** SFC `.vue` files using `<script setup lang="ts">` and
  `<style scoped>`
- **Stores:** Pinia, one per domain area, under `src/stores/`
- **Routes:** declared in `src/router/index.ts`
- **Imports:** keep at the top of the file
- **Variable names:** explicit, descriptive (e.g. `element` not `el`)
- **Line width:** 80 columns, same as PHP

## Testing

- Cypress E2E only, at `frontend/rabbi_gerzi/cypress/e2e/*.cy.ts`
- Cypress is available via the Nix devshell; project-level config
  (`cypress.config.ts`, `cypress/` folder) still needs to be wired up.
  Add it when the first E2E test lands and remove this note.
- Tests must exercise the UI - drive via `cy.visit` / `cy.get`. Do not
  use `cy.request` to set up state or assert; if seeding is needed, add
  it via backend seed data.
- Role matching: log in as the role appropriate to the page under test
  (e.g. admin spec uses admin login, user spec uses user login).

## Pre-commit

Run from `frontend/rabbi_gerzi/`:

- `npm run format` (oxfmt)
- `npm run lint` (oxlint + eslint)
- `npm run type-check` (vue-tsc)

All three must pass before committing.

## Note on commit granularity

A new view is often a `.vue` SFC plus a Pinia store plus a route entry -
commit them together as a single logical unit, per the "one logical
change per commit" rule in `shared.md`.

## LLM anti-patterns

Constructs LLMs default to that this project forbids on the frontend.

| Anti-pattern | Forbidden | Required |
|---|---|---|
| Short variable name | `t`, `n`, `res`, `req`, `e`, `el`, `ev` | `text`, `node`, `response`, `request`, `submitEvent`, `element`, `clickEvent` |
| Em dash in code/comments | `// loads sets — owner only` | `// loads sets - owner only` |
| Options API | `export default { data() { ... } }` | `<script setup lang="ts">` with composition API |
| `any` type | `const value: any = ...` | concrete type, or `unknown` with a narrowing guard |
| Default parameter value | `function load(limit: number = 10)` | `function load(limit: number)` - every call site passes it |
| Unscoped styles | `<style>` (leaks globally) | `<style scoped>` |
| `cy.request` in E2E | `cy.request('/api/...')` to set up state | drive via UI; seed via backend |
| Cypress login role mismatch | logging in as wrong role for the page | match the role to the page under test |

When generating code, scan the diff for these patterns before writing it
to disk.