Menu
Use when building or changing oats frontend UI — Vue 3 components, views, composables, routing, Tailwind, or the TipTap notes editor. Encodes this repo's frontend conventions.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Use to orient in the oats codebase or plan cross-cutting features — the cloud-vs-offline backend split, the speech-to-text pipeline, window topology, and where specs live.
Use when changing oats backend — Rust commands in src-tauri, the invoke contract, capabilities/permissions, Tauri plugins, multi-window, or running the cargo test suite. Includes the macOS build/test workarounds.
Use when changing oats code that touches auth/OAuth, session tokens, the capabilities allowlist, a Tauri invoke command, file paths, URL/deep-link opening, the sidecar, network calls, or the offline-mode privacy guarantee. Encodes this app's real attack surface and a pre-PR review checklist.
Use when reproducing or diagnosing runtime behavior in the running oats desktop app — driving and inspecting its windows via the oats-desktop MCP server (execute JS, read DOM, invoke backend commands). Pairs with systematic-debugging.
Based on SOC occupation classification
| name | oats-vue |
| description | Use when building or changing oats frontend UI — Vue 3 components, views, composables, routing, Tailwind, or the TipTap notes editor. Encodes this repo's frontend conventions. |
The frontend is Vue 3 + TypeScript + Vite, styled with Tailwind v4. Entry is
src/main.ts; the single root is src/App.vue (just <RouterView/>).
src/main.ts — app bootstrap and the router. Every window loads the same bundle
and renders a route via createWebHashHistory. Add a view by importing it here and
adding a routes entry. The router statically imports every view, so one broken
import breaks the whole app graph (blank windows).src/views/ — one .vue per screen (SettingsView, LibraryView,
MeetingDetailView, RecorderStrip, WaveformView, …). Co-located *.test.ts use
Vitest + @vue/test-utils. Pure helpers also live here as plain .ts + tests
(e.g. waveformBars.ts, meetingShareText.ts).src/composables/ — reusable reactive logic (useBackend, useRecorder,
useMeetingApi, usePendingUploads, useAutoRecord, …). Prefer extracting logic
into a composable with its own *.test.ts over fattening a view.src/tauri.ts — typed wrappers around backend invoke calls (auth, api,
getDesktopConfig, …). Call the backend through helpers here, not raw invoke
scattered in components. See oats-tauri for the invoke ↔ Rust contract.<script setup lang="ts"> + Composition API everywhere. No Options API, no Vuex —
state lives in composables and @tauri-apps/plugin-store.@tailwindcss/vite (config-light; utilities in templates). Global
CSS in src/assets/main.css./#/settings, /#/library). A new screen = a new route here + a Rust window
opener. See oats-architecture for the window topology.@tiptap/vue-3, StarterKit, task-list, typography,
tiptap-markdown) — see MeetingNotesEditor.vue / MeetingDetailView.vue.@heroicons/vue.npm test runs Vitest (jsdom). Write a co-located *.test.ts for every new view,
component, or composable. Mock @tauri-apps/api invoke calls — don't hit the backend in
unit tests. Frontend tests are independent of the Rust suite.
When the change spans the Rust boundary, also read oats-tauri. For runtime debugging in
the real window, use oats-debugging.