From oats-skills
Builds and modifies Vue 3 frontend UI following this repo's conventions — components, views, composables, routing, Tailwind, and the TipTap notes editor.
How this skill is triggered — by the user, by Claude, or both
Slash command
/oats-skills:oats-vueThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The frontend is Vue 3 + TypeScript + Vite, styled with Tailwind v4. Entry is
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.
npx claudepluginhub ariso-ai/oats --plugin oats-skillsBlocks Edit/Write/Bash actions until Claude investigates importers, data schemas, and user instructions. Improves output quality by forcing concrete facts before edits.