refactor: restructure AGENTS.md with progressive disclosure

Amp-Thread-ID: https://ampcode.com/threads/T-019bdfa7-58b4-731b-83ee-83f2b2bea030
Co-authored-by: Amp <amp@ampcode.com>

docs/guidance/code-style.md

@@ -0,0 +1,56 @@
+---
+globs:
+  - '**/*.ts'
+  - '**/*.tsx'
+  - '**/*.vue'
+---
+
+# Code Style
+
+## Formatting (via oxfmt)
+
+- 2-space indent
+- Single quotes
+- No trailing semicolons
+- 80 character width
+
+Run `pnpm format` before committing.
+
+## Imports
+
+Use separate `import type` statements:
+
+```typescript
+// ✅ Correct
+import type { Foo } from './foo'
+import { bar } from './foo'
+
+// ❌ Wrong
+import { bar, type Foo } from './foo'
+```
+
+## Naming
+
+- Vue components: `PascalCase.vue` (e.g., `MenuHamburger.vue`)
+- Composables: `useXyz.ts`
+- Pinia stores: `*Store.ts`
+
+## Code Organization
+
+- Minimize exported surface area per module
+- No barrel files (`index.ts` re-exports) within `src/`
+- Prefer function declarations over function expressions
+- Keep functions short and focused
+- Minimize nesting (avoid arrow anti-pattern)
+- Favor immutability and pure functions
+
+## Comments
+
+Code should be self-documenting. Avoid comments unless absolutely necessary. If you must comment, explain *why*, not *what*.
+
+## Libraries
+
+- Use `es-toolkit` for utilities (not lodash)
+- Use `VueUse` for reactive utilities
+- Avoid new PrimeVue component usage
+- Use vue-i18n for all user-facing strings

docs/guidance/git-workflow.md

@@ -0,0 +1,31 @@
+---
+globs:
+  - '.github/**/*'
+---
+
+# Git & PR Workflow
+
+## Commit Messages
+
+Use `prefix:` format: `feat:`, `fix:`, `test:`, `refactor:`, `docs:`
+
+Never mention Claude/AI in commits.
+
+## Pull Requests
+
+- Reference linked issues: `Fixes #123`
+- Keep descriptions concise and information-dense
+- No emojis or excessive headers
+- Follow the template in `.github/`
+- Keep PRs focused — suggest splitting if >300 lines of non-test code
+
+## Quality Gates (CI)
+
+All must pass before merge:
+
+- `pnpm lint`
+- `pnpm typecheck`
+- `pnpm knip`
+- Relevant tests
+
+Never use `--no-verify` to bypass failing tests. If tests fail, identify root cause and fix or document blockers.

docs/guidance/tailwind.md

@@ -0,0 +1,45 @@
+---
+globs:
+  - '**/*.vue'
+  - '**/*.css'
+---
+
+# Tailwind Conventions
+
+## Class Merging
+
+Always use `cn()` for conditional classes:
+
+```vue
+<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />
+```
+
+Never use `:class="[]"` array syntax.
+
+## Theme & Dark Mode
+
+Never use the `dark:` variant. Use semantic tokens from `style.css`:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="bg-white dark:bg-gray-900" />
+
+<!-- ✅ Correct -->
+<div class="bg-node-component-surface" />
+```
+
+## Sizing
+
+Use Tailwind fraction utilities, not arbitrary percentages:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="w-[80%] h-[50%]" />
+
+<!-- ✅ Correct -->
+<div class="w-4/5 h-1/2" />
+```
+
+## Specificity
+
+Never use `!important` or the `!` prefix. If existing `!important` rules interfere, fix those instead.

docs/guidance/vue-components.md

@@ -10,10 +10,30 @@ Applies to all `.vue` files anywhere in the codebase.
 ## Vue 3 Composition API
 
 - Use `<script setup lang="ts">` for component logic
-- Destructure props (Vue 3.5 style with defaults) like `const { color = 'blue' } = defineProps<...>()`
-- Use `ref`/`reactive` for state
-- Use `computed()` for derived state
+- Destructure props (Vue 3.5 style with defaults):
+
+  ```typescript
+  const { nodes, showTotal = true } = defineProps<{
+    nodes: ApiNodeCost[]
+    showTotal?: boolean
+  }>()
+  ```
+
+- Do not use `withDefaults` or runtime props declaration
+- Do not import Vue macros unnecessarily
+- Prefer `defineModel` over separate prop/emit for v-model bindings
+- Define slots via template usage, not `defineSlots`
+- Use same-name shorthand for slot props: `:is-expanded` not `:is-expanded="isExpanded"`
+- Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`)
+
+## State Management
+
+- Use `ref`/`reactive` for state, `computed()` for derived state
 - Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
+- Prefer `computed` over `watch` when possible
+- Prefer `watch`/`watchEffect` only for side effects
+- Be judicious with refs — if a prop suffices, don't add a ref
+- Use provide/inject only when a Store or shared composable won't work
 
 ## Component Communication