What problem does it solve? Vue 3 front-ends often drift into inconsistent patterns: components calling APIs directly, scattered loading/error/data refs that allow impossible states, e2e tests that need a live backend, and locale files that silently fall out of sync. This Skill encodes the repo's architecture rules so every Vue screen, store, and test follows the same enforceable conventions. ## Core Features & Use Cases - API access layering: Components never call API or gRPC-web clients directly; only Pinia stores and composables do, behind an injectable seam (setClientsForTest) for unit testing with fakes. - Async state as a discriminated union: Every remote resource is one Async<T> value folded with ts-pattern's match(...).exhaustive(), making forgotten states compile errors instead of runtime bugs. - Backend-free e2e testing: A build-flag-gated fake-client seam lets Playwright run the real app with seeded data, forced locale, and assertions that raw error codes never leak into the DOM. - No translation drift: Back-office en.json/fr.json must mirror key-for-key (verified with a flatten-and-diff script), and the site enforces alignment at compile time via const en: typeof fr. - Use Case: When adding a new catalog search screen to the back-office, create the store with an Async<CatalogResult> union, fold it into a flat view-model in <script setup>, cover it with a store test using fake clients, and add a Playwright test that seeds data and asserts the localized heading. ## Quick Start Apply the Vue front-end architecture rules to review or create a new view, Pinia store, or Playwright e2e test in apps/back-office.
