oats-vue

スター15

フォーク5

更新日2026年7月7日 14:18

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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

ソース

ariso-ai

ariso-ai/oats

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

oats Frontend (Vue 3) 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/>).

Layout

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.

Conventions

<script setup lang="ts"> + Composition API everywhere. No Options API, no Vuex — state lives in composables and @tauri-apps/plugin-store.
Tailwind v4 via @tailwindcss/vite (config-light; utilities in templates). Global CSS in src/assets/main.css.
Routing is window-driven: the Rust side opens a window pointed at a hash route (e.g. /#/settings, /#/library). A new screen = a new route here + a Rust window opener. See oats-architecture for the window topology.
Notes editor uses TipTap (@tiptap/vue-3, StarterKit, task-list, typography, tiptap-markdown) — see MeetingNotesEditor.vue / MeetingDetailView.vue.
Icons: @heroicons/vue.

Testing

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.

このリポジトリの他の Skills

同じリポジトリ

oats-architecture

ariso-ai/oats

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.

2026-07-1815

oats-tauri

ariso-ai/oats

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.

2026-07-1815

oats-security

ariso-ai/oats

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.

2026-07-1715

oats-debugging

ariso-ai/oats

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.

2026-07-0715

oats Frontend (Vue 3) 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/>).

Layout

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.

Conventions

<script setup lang="ts"> + Composition API everywhere. No Options API, no Vuex — state lives in composables and @tauri-apps/plugin-store.

Tailwind v4 via @tailwindcss/vite (config-light; utilities in templates). Global CSS in src/assets/main.css.

Routing is window-driven: the Rust side opens a window pointed at a hash route (e.g. /#/settings, /#/library). A new screen = a new route here + a Rust window opener. See oats-architecture for the window topology.

Notes editor uses TipTap (@tiptap/vue-3, StarterKit, task-list, typography, tiptap-markdown) — see MeetingNotesEditor.vue / MeetingDetailView.vue.

Icons: @heroicons/vue.

Testing

When the change spans the Rust boundary, also read oats-tauri. For runtime debugging in the real window, use oats-debugging.

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.