tribunal-kit 4.2.0 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/.agent/ARCHITECTURE.md +21 -14
  2. package/.agent/agents/swarm-worker-contracts.md +5 -5
  3. package/.agent/agents/ui-ux-auditor.md +292 -0
  4. package/.agent/rules/GEMINI.md +8 -8
  5. package/.agent/scripts/__pycache__/_colors.cpython-311.pyc +0 -0
  6. package/.agent/scripts/__pycache__/_utils.cpython-311.pyc +0 -0
  7. package/.agent/scripts/__pycache__/case_law_manager.cpython-311.pyc +0 -0
  8. package/.agent/scripts/_colors.js +18 -0
  9. package/.agent/scripts/_utils.js +42 -0
  10. package/.agent/scripts/auto_preview.js +197 -0
  11. package/.agent/scripts/bundle_analyzer.js +290 -0
  12. package/.agent/scripts/case_law_manager.js +684 -0
  13. package/.agent/scripts/checklist.js +266 -0
  14. package/.agent/scripts/colors.js +17 -0
  15. package/.agent/scripts/compress_skills.js +141 -0
  16. package/.agent/scripts/consolidate_skills.js +149 -0
  17. package/.agent/scripts/context_broker.js +609 -0
  18. package/.agent/scripts/deep_compress.js +150 -0
  19. package/.agent/scripts/dependency_analyzer.js +272 -0
  20. package/.agent/scripts/graph_builder.js +199 -0
  21. package/.agent/scripts/graph_zoom.js +154 -0
  22. package/.agent/scripts/inner_loop_validator.js +465 -0
  23. package/.agent/scripts/lint_runner.js +187 -0
  24. package/.agent/scripts/minify_context.js +100 -0
  25. package/.agent/scripts/patch_skills_meta.js +156 -0
  26. package/.agent/scripts/patch_skills_output.js +244 -0
  27. package/.agent/scripts/schema_validator.js +297 -0
  28. package/.agent/scripts/security_scan.js +303 -0
  29. package/.agent/scripts/session_manager.js +276 -0
  30. package/.agent/scripts/skill_evolution.js +644 -0
  31. package/.agent/scripts/skill_integrator.js +313 -0
  32. package/.agent/scripts/strengthen_skills.js +193 -0
  33. package/.agent/scripts/strip_tribunal.js +47 -0
  34. package/.agent/scripts/swarm_dispatcher.js +360 -0
  35. package/.agent/scripts/test_runner.js +193 -0
  36. package/.agent/scripts/utils.js +32 -0
  37. package/.agent/scripts/verify_all.js +256 -0
  38. package/.agent/skills/agent-organizer/SKILL.md +12 -4
  39. package/.agent/skills/agentic-patterns/SKILL.md +12 -4
  40. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +12 -4
  41. package/.agent/skills/api-patterns/SKILL.md +209 -201
  42. package/.agent/skills/api-security-auditor/SKILL.md +12 -4
  43. package/.agent/skills/app-builder/SKILL.md +12 -4
  44. package/.agent/skills/app-builder/templates/SKILL.md +76 -68
  45. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +1 -1
  46. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +1 -1
  47. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +1 -1
  48. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +1 -1
  49. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +1 -1
  50. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +1 -1
  51. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +1 -1
  52. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +1 -1
  53. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +1 -1
  54. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +1 -1
  55. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +1 -1
  56. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +1 -1
  57. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +1 -1
  58. package/.agent/skills/appflow-wireframe/SKILL.md +12 -4
  59. package/.agent/skills/architecture/SKILL.md +12 -4
  60. package/.agent/skills/authentication-best-practices/SKILL.md +12 -4
  61. package/.agent/skills/bash-linux/SKILL.md +12 -4
  62. package/.agent/skills/behavioral-modes/SKILL.md +12 -4
  63. package/.agent/skills/brainstorming/SKILL.md +12 -4
  64. package/.agent/skills/building-native-ui/SKILL.md +12 -4
  65. package/.agent/skills/clean-code/SKILL.md +12 -4
  66. package/.agent/skills/code-review-checklist/SKILL.md +12 -4
  67. package/.agent/skills/config-validator/SKILL.md +12 -4
  68. package/.agent/skills/csharp-developer/SKILL.md +12 -4
  69. package/.agent/skills/data-validation-schemas/SKILL.md +290 -282
  70. package/.agent/skills/database-design/SKILL.md +202 -194
  71. package/.agent/skills/deployment-procedures/SKILL.md +12 -4
  72. package/.agent/skills/devops-engineer/SKILL.md +12 -4
  73. package/.agent/skills/devops-incident-responder/SKILL.md +12 -4
  74. package/.agent/skills/doc.md +1 -1
  75. package/.agent/skills/documentation-templates/SKILL.md +12 -4
  76. package/.agent/skills/edge-computing/SKILL.md +12 -4
  77. package/.agent/skills/error-resilience/SKILL.md +390 -382
  78. package/.agent/skills/extract-design-system/SKILL.md +12 -4
  79. package/.agent/skills/framer-motion-expert/SKILL.md +206 -199
  80. package/.agent/skills/frontend-design/SKILL.md +163 -155
  81. package/.agent/skills/game-design-expert/SKILL.md +12 -4
  82. package/.agent/skills/game-engineering-expert/SKILL.md +12 -4
  83. package/.agent/skills/geo-fundamentals/SKILL.md +12 -4
  84. package/.agent/skills/github-operations/SKILL.md +12 -4
  85. package/.agent/skills/gsap-core/SKILL.md +54 -48
  86. package/.agent/skills/gsap-frameworks/SKILL.md +54 -48
  87. package/.agent/skills/gsap-performance/SKILL.md +54 -48
  88. package/.agent/skills/gsap-plugins/SKILL.md +54 -48
  89. package/.agent/skills/gsap-react/SKILL.md +54 -48
  90. package/.agent/skills/gsap-scrolltrigger/SKILL.md +54 -48
  91. package/.agent/skills/gsap-timeline/SKILL.md +54 -48
  92. package/.agent/skills/gsap-utils/SKILL.md +54 -48
  93. package/.agent/skills/i18n-localization/SKILL.md +12 -4
  94. package/.agent/skills/intelligent-routing/SKILL.md +41 -33
  95. package/.agent/skills/knowledge-graph/SKILL.md +36 -0
  96. package/.agent/skills/lint-and-validate/SKILL.md +12 -4
  97. package/.agent/skills/llm-engineering/SKILL.md +12 -4
  98. package/.agent/skills/local-first/SKILL.md +12 -4
  99. package/.agent/skills/mcp-builder/SKILL.md +12 -4
  100. package/.agent/skills/mobile-design/SKILL.md +225 -217
  101. package/.agent/skills/monorepo-management/SKILL.md +296 -288
  102. package/.agent/skills/motion-engineering/SKILL.md +195 -187
  103. package/.agent/skills/nextjs-react-expert/SKILL.md +196 -188
  104. package/.agent/skills/nodejs-best-practices/SKILL.md +12 -4
  105. package/.agent/skills/observability/SKILL.md +12 -4
  106. package/.agent/skills/parallel-agents/SKILL.md +12 -4
  107. package/.agent/skills/performance-profiling/SKILL.md +12 -4
  108. package/.agent/skills/plan-writing/SKILL.md +12 -4
  109. package/.agent/skills/platform-engineer/SKILL.md +12 -4
  110. package/.agent/skills/playwright-best-practices/SKILL.md +12 -4
  111. package/.agent/skills/powershell-windows/SKILL.md +12 -4
  112. package/.agent/skills/project-idioms/SKILL.md +12 -4
  113. package/.agent/skills/python-patterns/SKILL.md +12 -4
  114. package/.agent/skills/python-pro/SKILL.md +285 -277
  115. package/.agent/skills/react-specialist/SKILL.md +239 -231
  116. package/.agent/skills/readme-builder/SKILL.md +12 -4
  117. package/.agent/skills/realtime-patterns/SKILL.md +12 -4
  118. package/.agent/skills/red-team-tactics/SKILL.md +12 -4
  119. package/.agent/skills/rust-pro/SKILL.md +12 -4
  120. package/.agent/skills/seo-fundamentals/SKILL.md +12 -4
  121. package/.agent/skills/server-management/SKILL.md +12 -4
  122. package/.agent/skills/shadcn-ui-expert/SKILL.md +12 -4
  123. package/.agent/skills/skill-creator/SKILL.md +12 -4
  124. package/.agent/skills/sql-pro/SKILL.md +12 -4
  125. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +12 -4
  126. package/.agent/skills/swiftui-expert/SKILL.md +12 -4
  127. package/.agent/skills/systematic-debugging/SKILL.md +12 -4
  128. package/.agent/skills/tailwind-patterns/SKILL.md +12 -4
  129. package/.agent/skills/tdd-workflow/SKILL.md +12 -4
  130. package/.agent/skills/test-result-analyzer/SKILL.md +12 -4
  131. package/.agent/skills/testing-patterns/SKILL.md +12 -4
  132. package/.agent/skills/trend-researcher/SKILL.md +12 -4
  133. package/.agent/skills/typescript-advanced/SKILL.md +297 -289
  134. package/.agent/skills/ui-ux-pro-max/SKILL.md +12 -4
  135. package/.agent/skills/ui-ux-researcher/SKILL.md +12 -4
  136. package/.agent/skills/vue-expert/SKILL.md +237 -229
  137. package/.agent/skills/vulnerability-scanner/SKILL.md +12 -4
  138. package/.agent/skills/web-accessibility-auditor/SKILL.md +12 -4
  139. package/.agent/skills/web-design-guidelines/SKILL.md +12 -4
  140. package/.agent/skills/webapp-testing/SKILL.md +12 -4
  141. package/.agent/skills/whimsy-injector/SKILL.md +12 -4
  142. package/.agent/skills/workflow-optimizer/SKILL.md +12 -4
  143. package/.agent/workflows/audit.md +6 -6
  144. package/.agent/workflows/deploy.md +1 -1
  145. package/.agent/workflows/generate.md +23 -6
  146. package/.agent/workflows/session.md +5 -5
  147. package/.agent/workflows/swarm.md +2 -2
  148. package/README.md +242 -186
  149. package/bin/tribunal-kit.js +297 -57
  150. package/package.json +81 -77
  151. package/scripts/changelog.js +167 -0
  152. package/scripts/sync-version.js +81 -0
  153. package/scripts/validate-payload.js +73 -0
  154. package/.agent/scripts/__pycache__/auto_preview.cpython-311.pyc +0 -0
  155. package/.agent/scripts/__pycache__/bundle_analyzer.cpython-311.pyc +0 -0
  156. package/.agent/scripts/__pycache__/checklist.cpython-311.pyc +0 -0
  157. package/.agent/scripts/__pycache__/dependency_analyzer.cpython-311.pyc +0 -0
  158. package/.agent/scripts/__pycache__/security_scan.cpython-311.pyc +0 -0
  159. package/.agent/scripts/__pycache__/session_manager.cpython-311.pyc +0 -0
  160. package/.agent/scripts/__pycache__/skill_integrator.cpython-311.pyc +0 -0
  161. package/.agent/scripts/__pycache__/swarm_dispatcher.cpython-311.pyc +0 -0
  162. package/.agent/scripts/__pycache__/test_runner.cpython-311.pyc +0 -0
  163. package/.agent/scripts/__pycache__/verify_all.cpython-311.pyc +0 -0
  164. package/.agent/scripts/auto_preview.py +0 -180
  165. package/.agent/scripts/bundle_analyzer.py +0 -259
  166. package/.agent/scripts/case_law_manager.py +0 -755
  167. package/.agent/scripts/checklist.py +0 -209
  168. package/.agent/scripts/compress_skills.py +0 -167
  169. package/.agent/scripts/consolidate_skills.py +0 -173
  170. package/.agent/scripts/deep_compress.py +0 -202
  171. package/.agent/scripts/dependency_analyzer.py +0 -247
  172. package/.agent/scripts/lint_runner.py +0 -188
  173. package/.agent/scripts/minify_context.py +0 -80
  174. package/.agent/scripts/patch_skills_meta.py +0 -177
  175. package/.agent/scripts/patch_skills_output.py +0 -285
  176. package/.agent/scripts/schema_validator.py +0 -279
  177. package/.agent/scripts/security_scan.py +0 -224
  178. package/.agent/scripts/session_manager.py +0 -261
  179. package/.agent/scripts/skill_evolution.py +0 -563
  180. package/.agent/scripts/skill_integrator.py +0 -234
  181. package/.agent/scripts/strengthen_skills.py +0 -220
  182. package/.agent/scripts/strip_tribunal.py +0 -41
  183. package/.agent/scripts/swarm_dispatcher.py +0 -350
  184. package/.agent/scripts/test_runner.py +0 -192
  185. package/.agent/scripts/test_swarm_dispatcher.py +0 -163
  186. package/.agent/scripts/verify_all.py +0 -195
@@ -196,7 +196,7 @@ Used as the theoretical backbone for P1 checks:
196
196
 
197
197
  ---
198
198
 
199
- ## 🤖 LLM-Specific Traps
199
+
200
200
 
201
201
  AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
202
202
 
@@ -208,7 +208,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
208
208
 
209
209
  ---
210
210
 
211
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
211
+
212
212
 
213
213
  **Slash command: `/review` or `/tribunal-full`**
214
214
  **Active reviewers: `logic-reviewer` · `security-auditor`**
@@ -219,7 +219,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
219
219
  2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
220
220
  3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
221
221
 
222
- ### ✅ Pre-Flight Self-Audit
222
+
223
223
 
224
224
  Review these questions before confirming output:
225
225
  ```
@@ -233,4 +233,12 @@ Review these questions before confirming output:
233
233
 
234
234
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
235
235
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
236
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
236
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
237
+
238
+
239
+ ## Pre-Flight Checklist
240
+ - [ ] Have I reviewed the user's specific constraints and requests?
241
+ - [ ] Have I checked the environment for relevant existing implementations?
242
+
243
+ ## VBC Protocol (Verification-Before-Completion)
244
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -1,233 +1,233 @@
1
- ---
2
- name: vue-expert
3
- description: Vue 3.5+ Composition API. Script setup, reactive refs, computed, watchers, composables, Pinia, Vue Router 4, Nuxt 4. Use when building Vue/Nuxt applications.
4
- allowed-tools: Read, Write, Edit, Glob, Grep
5
- version: 3.1.0
6
- last-updated: 2026-04-06
7
- ---
8
-
9
- # Vue 3.5+ & Nuxt 4 — Dense Reference
10
-
11
- ## Hallucination Traps (Read First)
12
- - ❌ Options API (`data()`, `methods:`, `computed:`) → ✅ `<script setup lang="ts">`
13
- - ❌ `defineComponent()` with `<script setup>` → ✅ redundant, skip it
14
- - ❌ `defineModel` in Vue < 3.4 → ✅ added in 3.4+
15
- - ❌ `ref.value` in template → ✅ auto-unwrapped in template (no `.value`)
16
- - ❌ `reactive()` for primitives → ✅ use `ref()` — `reactive()` breaks on reassign
17
- - ❌ `watch(state.count, ...)` (primitive) → ✅ `watch(() => state.count, ...)`
18
- - ❌ `onBeforeMount` for data fetch → ✅ use `await` directly in `<script setup>` + `<Suspense>`
19
- - ❌ Pinia `this.$store` → ✅ `useStore()` from `pinia`
20
- - ❌ `useRoute()` / `useRouter()` outside setup → ✅ only works inside `<script setup>` or composables
21
-
22
- ---
23
-
24
- ## `<script setup>` — The Only Way
25
-
26
- ```vue
27
- <script setup lang="ts">
28
- import { ref, computed, watch, onMounted } from "vue";
29
-
30
- // Props
31
- const props = defineProps<{ title: string; count?: number }>();
32
- // With defaults:
33
- const props = withDefaults(defineProps<{ variant?: "primary" | "secondary" }>(), { variant: "primary" });
34
-
35
- // Emits
36
- const emit = defineEmits<{ update: [value: string]; delete: [id: number] }>();
37
-
38
- // v-model (Vue 3.4+)
39
- const modelValue = defineModel<string>(); // default model
40
- const count = defineModel<number>("count"); // named model
41
-
42
- // Expose to parent ref
43
- defineExpose({ reset: () => {}, focus: () => {} });
44
- </script>
45
- ```
46
-
47
- ---
48
-
49
- ## Reactivity
50
-
51
- ```ts
52
- // ref — for primitives and objects (access via .value in JS, auto-unwrap in template)
53
- const count = ref(0);
54
- count.value++;
55
-
56
- // reactive — for objects (loses reactivity on reassign/destructure)
57
- const state = reactive({ name: "Alice", age: 25 });
58
- // ❌ const { name } = state; // loses reactivity
59
- // ✅ const name = computed(() => state.name);
60
-
61
- // computed — cached, re-runs only when deps change
62
- const doubled = computed(() => count.value * 2);
63
- const fullName = computed({
64
- get: () => `${first.value} ${last.value}`,
65
- set: (v) => { [first.value, last.value] = v.split(" "); },
66
- });
67
-
68
- // watch
69
- watch(count, (newVal, oldVal) => {}); // immediate: false by default
70
- watch(() => props.id, fetchUser, { immediate: true });
71
- watchEffect(() => { console.log(count.value); }); // auto-tracks deps
72
- ```
73
-
74
- ---
75
-
76
- ## Composables (Custom Hooks)
77
-
78
- ```ts
79
- // useCounter.ts
80
- export function useCounter(initial = 0) {
81
- const count = ref(initial);
82
- const increment = () => count.value++;
83
- const reset = () => (count.value = initial);
84
- return { count: readonly(count), increment, reset };
85
- }
86
-
87
- // useAsyncData.ts
88
- export function useAsyncData<T>(fn: () => Promise<T>) {
89
- const data = ref<T | null>(null);
90
- const error = ref<Error | null>(null);
91
- const loading = ref(false);
92
- async function execute() {
93
- loading.value = true;
94
- try { data.value = await fn(); }
95
- catch (e) { error.value = e as Error; }
96
- finally { loading.value = false; }
97
- }
98
- execute();
99
- return { data, error, loading, refresh: execute };
100
- }
101
- ```
102
-
103
- ---
104
-
105
- ## Pinia
106
-
107
- ```ts
108
- // stores/counter.ts
109
- import { defineStore } from "pinia";
110
- export const useCounterStore = defineStore("counter", () => {
111
- const count = ref(0); // Setup Store (preferred)
112
- const doubled = computed(() => count.value * 2);
113
- function increment() { count.value++; }
114
- return { count, doubled, increment };
115
- });
116
-
117
- // Usage in component:
118
- const store = useCounterStore();
119
- // ❌ const { count } = store; // loses reactivity!
120
- // ✅ const count = storeToRefs(store).count;
121
- import { storeToRefs } from "pinia";
122
- const { count } = storeToRefs(store);
123
-
124
- // Persist plugin:
125
- import { createPinia } from "pinia";
126
- import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
127
- const pinia = createPinia().use(piniaPluginPersistedstate);
128
- ```
129
-
130
- ---
131
-
132
- ## Vue Router 4
133
-
134
- ```ts
135
- // router/index.ts
136
- import { createRouter, createWebHistory } from "vue-router";
137
- const router = createRouter({
138
- history: createWebHistory(),
139
- routes: [
140
- { path: "/", component: () => import("./views/Home.vue") }, // lazy-loaded
141
- { path: "/user/:id", component: UserView, props: true }, // props:true passes params as props
142
- { path: "/:pathMatch(.*)*", component: NotFound }, // 404 catch-all
143
- ],
144
- });
145
- // Route guards
146
- router.beforeEach(async (to, from) => {
147
- if (to.meta.requiresAuth && !isLoggedIn()) return { name: "Login" };
148
- });
149
-
150
- // In component:
151
- import { useRouter, useRoute } from "vue-router";
152
- const router = useRouter();
153
- const route = useRoute();
154
- router.push({ name: "User", params: { id: 42 } });
155
- const userId = route.params.id as string;
156
- ```
157
-
158
- ---
159
-
160
- ## Templates
161
-
162
- ```vue
163
- <template>
164
- <!-- v-model -->
165
- <input v-model="email" />
166
- <MyInput v-model:title="title" v-model:count="count" /> <!-- named model -->
167
-
168
- <!-- v-for with key (ALWAYS set key) -->
169
- <li v-for="item in items" :key="item.id">{{ item.name }}</li>
170
-
171
- <!-- Dynamic components -->
172
- <component :is="currentTab" />
173
-
174
- <!-- Teleport — render in a different DOM node -->
175
- <Teleport to="body"><Modal v-if="showModal" /></Teleport>
176
-
177
- <!-- Transition -->
178
- <Transition name="fade" mode="out-in">
179
- <component :is="view" :key="view" />
180
- </Transition>
181
-
182
- <!-- Suspense (async components / composables with await) -->
183
- <Suspense><AsyncComponent /><template #fallback>Loading...</template></Suspense>
184
- </template>
185
-
186
- <style>
187
- /* Transition CSS */
188
- .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
189
- .fade-enter-from, .fade-leave-to { opacity: 0; }
190
- </style>
191
- ```
192
-
193
- ---
194
-
195
- ## Nuxt 4
196
-
197
- ```
198
- auto-imports: ref, computed, useRoute, useFetch — no imports needed
199
- composables/: auto-imported by filename
200
- server/api/: server routes (GET/POST)
201
- pages/: file-based routing
202
- layouts/: layout components
203
- middleware/: route guards
204
- ```
205
-
206
- ```ts
207
- // pages/users/[id].vue
208
- const { id } = useRoute().params; // auto-imported
209
- const { data, error, refresh } = await useFetch(`/api/users/${id}`, {
210
- lazy: false, // SSR: wait for data before rendering
211
- server: true, // fetch on server (default)
212
- transform: (r) => r.user,
213
- });
214
- // ❌ TRAP: useFetch in Nuxt ≠ @tanstack/react-query. It's Nuxt-specific.
215
- // ❌ TRAP: useAsyncData key must be UNIQUE per page/component
216
- ```
217
-
218
- ---
219
-
220
- ## Performance
221
- - ✅ Use `v-memo` for expensive list items that rarely change
222
- - ✅ `defineAsyncComponent(() => import("./Heavy.vue"))` for code splitting
223
- - ✅ `:key` on `<component :is>` forces re-mount on route change (prevents stale state)
224
- - ❌ Avoid deeply nested reactive objects — use `shallowRef`/`shallowReactive` for large data
225
- - ❌ Never mutate props — emit events instead
1
+ ---
2
+ name: vue-expert
3
+ description: Vue 3.5+ Composition API. Script setup, reactive refs, computed, watchers, composables, Pinia, Vue Router 4, Nuxt 4. Use when building Vue/Nuxt applications.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep
5
+ version: 3.1.0
6
+ last-updated: 2026-04-06
7
+ ---
8
+
9
+ # Vue 3.5+ & Nuxt 4 — Dense Reference
10
+
11
+ ## Hallucination Traps (Read First)
12
+ - ❌ Options API (`data()`, `methods:`, `computed:`) → ✅ `<script setup lang="ts">`
13
+ - ❌ `defineComponent()` with `<script setup>` → ✅ redundant, skip it
14
+ - ❌ `defineModel` in Vue < 3.4 → ✅ added in 3.4+
15
+ - ❌ `ref.value` in template → ✅ auto-unwrapped in template (no `.value`)
16
+ - ❌ `reactive()` for primitives → ✅ use `ref()` — `reactive()` breaks on reassign
17
+ - ❌ `watch(state.count, ...)` (primitive) → ✅ `watch(() => state.count, ...)`
18
+ - ❌ `onBeforeMount` for data fetch → ✅ use `await` directly in `<script setup>` + `<Suspense>`
19
+ - ❌ Pinia `this.$store` → ✅ `useStore()` from `pinia`
20
+ - ❌ `useRoute()` / `useRouter()` outside setup → ✅ only works inside `<script setup>` or composables
21
+
22
+ ---
23
+
24
+ ## `<script setup>` — The Only Way
25
+
26
+ ```vue
27
+ <script setup lang="ts">
28
+ import { ref, computed, watch, onMounted } from "vue";
29
+
30
+ // Props
31
+ const props = defineProps<{ title: string; count?: number }>();
32
+ // With defaults:
33
+ const props = withDefaults(defineProps<{ variant?: "primary" | "secondary" }>(), { variant: "primary" });
34
+
35
+ // Emits
36
+ const emit = defineEmits<{ update: [value: string]; delete: [id: number] }>();
37
+
38
+ // v-model (Vue 3.4+)
39
+ const modelValue = defineModel<string>(); // default model
40
+ const count = defineModel<number>("count"); // named model
41
+
42
+ // Expose to parent ref
43
+ defineExpose({ reset: () => {}, focus: () => {} });
44
+ </script>
45
+ ```
46
+
47
+ ---
48
+
49
+ ## Reactivity
226
50
 
51
+ ```ts
52
+ // ref — for primitives and objects (access via .value in JS, auto-unwrap in template)
53
+ const count = ref(0);
54
+ count.value++;
55
+
56
+ // reactive — for objects (loses reactivity on reassign/destructure)
57
+ const state = reactive({ name: "Alice", age: 25 });
58
+ // ❌ const { name } = state; // loses reactivity
59
+ // ✅ const name = computed(() => state.name);
60
+
61
+ // computed — cached, re-runs only when deps change
62
+ const doubled = computed(() => count.value * 2);
63
+ const fullName = computed({
64
+ get: () => `${first.value} ${last.value}`,
65
+ set: (v) => { [first.value, last.value] = v.split(" "); },
66
+ });
67
+
68
+ // watch
69
+ watch(count, (newVal, oldVal) => {}); // immediate: false by default
70
+ watch(() => props.id, fetchUser, { immediate: true });
71
+ watchEffect(() => { console.log(count.value); }); // auto-tracks deps
72
+ ```
73
+
74
+ ---
75
+
76
+ ## Composables (Custom Hooks)
77
+
78
+ ```ts
79
+ // useCounter.ts
80
+ export function useCounter(initial = 0) {
81
+ const count = ref(initial);
82
+ const increment = () => count.value++;
83
+ const reset = () => (count.value = initial);
84
+ return { count: readonly(count), increment, reset };
85
+ }
86
+
87
+ // useAsyncData.ts
88
+ export function useAsyncData<T>(fn: () => Promise<T>) {
89
+ const data = ref<T | null>(null);
90
+ const error = ref<Error | null>(null);
91
+ const loading = ref(false);
92
+ async function execute() {
93
+ loading.value = true;
94
+ try { data.value = await fn(); }
95
+ catch (e) { error.value = e as Error; }
96
+ finally { loading.value = false; }
97
+ }
98
+ execute();
99
+ return { data, error, loading, refresh: execute };
100
+ }
101
+ ```
227
102
 
228
103
  ---
229
104
 
230
- ## 🤖 LLM-Specific Traps
105
+ ## Pinia
106
+
107
+ ```ts
108
+ // stores/counter.ts
109
+ import { defineStore } from "pinia";
110
+ export const useCounterStore = defineStore("counter", () => {
111
+ const count = ref(0); // Setup Store (preferred)
112
+ const doubled = computed(() => count.value * 2);
113
+ function increment() { count.value++; }
114
+ return { count, doubled, increment };
115
+ });
116
+
117
+ // Usage in component:
118
+ const store = useCounterStore();
119
+ // ❌ const { count } = store; // loses reactivity!
120
+ // ✅ const count = storeToRefs(store).count;
121
+ import { storeToRefs } from "pinia";
122
+ const { count } = storeToRefs(store);
123
+
124
+ // Persist plugin:
125
+ import { createPinia } from "pinia";
126
+ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
127
+ const pinia = createPinia().use(piniaPluginPersistedstate);
128
+ ```
129
+
130
+ ---
131
+
132
+ ## Vue Router 4
133
+
134
+ ```ts
135
+ // router/index.ts
136
+ import { createRouter, createWebHistory } from "vue-router";
137
+ const router = createRouter({
138
+ history: createWebHistory(),
139
+ routes: [
140
+ { path: "/", component: () => import("./views/Home.vue") }, // lazy-loaded
141
+ { path: "/user/:id", component: UserView, props: true }, // props:true passes params as props
142
+ { path: "/:pathMatch(.*)*", component: NotFound }, // 404 catch-all
143
+ ],
144
+ });
145
+ // Route guards
146
+ router.beforeEach(async (to, from) => {
147
+ if (to.meta.requiresAuth && !isLoggedIn()) return { name: "Login" };
148
+ });
149
+
150
+ // In component:
151
+ import { useRouter, useRoute } from "vue-router";
152
+ const router = useRouter();
153
+ const route = useRoute();
154
+ router.push({ name: "User", params: { id: 42 } });
155
+ const userId = route.params.id as string;
156
+ ```
157
+
158
+ ---
159
+
160
+ ## Templates
161
+
162
+ ```vue
163
+ <template>
164
+ <!-- v-model -->
165
+ <input v-model="email" />
166
+ <MyInput v-model:title="title" v-model:count="count" /> <!-- named model -->
167
+
168
+ <!-- v-for with key (ALWAYS set key) -->
169
+ <li v-for="item in items" :key="item.id">{{ item.name }}</li>
170
+
171
+ <!-- Dynamic components -->
172
+ <component :is="currentTab" />
173
+
174
+ <!-- Teleport — render in a different DOM node -->
175
+ <Teleport to="body"><Modal v-if="showModal" /></Teleport>
176
+
177
+ <!-- Transition -->
178
+ <Transition name="fade" mode="out-in">
179
+ <component :is="view" :key="view" />
180
+ </Transition>
181
+
182
+ <!-- Suspense (async components / composables with await) -->
183
+ <Suspense><AsyncComponent /><template #fallback>Loading...</template></Suspense>
184
+ </template>
185
+
186
+ <style>
187
+ /* Transition CSS */
188
+ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
189
+ .fade-enter-from, .fade-leave-to { opacity: 0; }
190
+ </style>
191
+ ```
192
+
193
+ ---
194
+
195
+ ## Nuxt 4
196
+
197
+ ```
198
+ auto-imports: ref, computed, useRoute, useFetch — no imports needed
199
+ composables/: auto-imported by filename
200
+ server/api/: server routes (GET/POST)
201
+ pages/: file-based routing
202
+ layouts/: layout components
203
+ middleware/: route guards
204
+ ```
205
+
206
+ ```ts
207
+ // pages/users/[id].vue
208
+ const { id } = useRoute().params; // auto-imported
209
+ const { data, error, refresh } = await useFetch(`/api/users/${id}`, {
210
+ lazy: false, // SSR: wait for data before rendering
211
+ server: true, // fetch on server (default)
212
+ transform: (r) => r.user,
213
+ });
214
+ // ❌ TRAP: useFetch in Nuxt ≠ @tanstack/react-query. It's Nuxt-specific.
215
+ // ❌ TRAP: useAsyncData key must be UNIQUE per page/component
216
+ ```
217
+
218
+ ---
219
+
220
+ ## Performance
221
+ - ✅ Use `v-memo` for expensive list items that rarely change
222
+ - ✅ `defineAsyncComponent(() => import("./Heavy.vue"))` for code splitting
223
+ - ✅ `:key` on `<component :is>` forces re-mount on route change (prevents stale state)
224
+ - ❌ Avoid deeply nested reactive objects — use `shallowRef`/`shallowReactive` for large data
225
+ - ❌ Never mutate props — emit events instead
226
+
227
+
228
+ ---
229
+
230
+
231
231
 
232
232
  AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
233
233
 
@@ -239,7 +239,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
239
239
 
240
240
  ---
241
241
 
242
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
242
+
243
243
 
244
244
  **Slash command: `/review` or `/tribunal-full`**
245
245
  **Active reviewers: `logic-reviewer` · `security-auditor`**
@@ -250,7 +250,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
250
250
  2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
251
251
  3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
252
252
 
253
- ### ✅ Pre-Flight Self-Audit
253
+
254
254
 
255
255
  Review these questions before confirming output:
256
256
  ```
@@ -264,4 +264,12 @@ Review these questions before confirming output:
264
264
 
265
265
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
266
266
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
267
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
267
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
268
+
269
+
270
+ ## Pre-Flight Checklist
271
+ - [ ] Have I reviewed the user's specific constraints and requests?
272
+ - [ ] Have I checked the environment for relevant existing implementations?
273
+
274
+ ## VBC Protocol (Verification-Before-Completion)
275
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -356,7 +356,7 @@ If a secret is committed:
356
356
 
357
357
  ---
358
358
 
359
- ## 🤖 LLM-Specific Traps
359
+
360
360
 
361
361
  AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
362
362
 
@@ -368,7 +368,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
368
368
 
369
369
  ---
370
370
 
371
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
371
+
372
372
 
373
373
  **Slash command: `/review` or `/tribunal-full`**
374
374
  **Active reviewers: `logic-reviewer` · `security-auditor`**
@@ -379,7 +379,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
379
379
  2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
380
380
  3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
381
381
 
382
- ### ✅ Pre-Flight Self-Audit
382
+
383
383
 
384
384
  Review these questions before confirming output:
385
385
  ```
@@ -393,4 +393,12 @@ Review these questions before confirming output:
393
393
 
394
394
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
395
395
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
396
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
396
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
397
+
398
+
399
+ ## Pre-Flight Checklist
400
+ - [ ] Have I reviewed the user's specific constraints and requests?
401
+ - [ ] Have I checked the environment for relevant existing implementations?
402
+
403
+ ## VBC Protocol (Verification-Before-Completion)
404
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -170,7 +170,7 @@ When content changes dynamically without a page reload (e.g., Toast notification
170
170
 
171
171
  ---
172
172
 
173
- ## 🤖 LLM-Specific Traps
173
+
174
174
 
175
175
  AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
176
176
 
@@ -182,7 +182,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
182
182
 
183
183
  ---
184
184
 
185
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
185
+
186
186
 
187
187
  **Slash command: `/review` or `/tribunal-full`**
188
188
  **Active reviewers: `logic-reviewer` · `security-auditor`**
@@ -193,7 +193,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
193
193
  2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
194
194
  3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
195
195
 
196
- ### ✅ Pre-Flight Self-Audit
196
+
197
197
 
198
198
  Review these questions before confirming output:
199
199
  ```
@@ -207,4 +207,12 @@ Review these questions before confirming output:
207
207
 
208
208
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
209
209
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
210
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
210
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
211
+
212
+
213
+ ## Pre-Flight Checklist
214
+ - [ ] Have I reviewed the user's specific constraints and requests?
215
+ - [ ] Have I checked the environment for relevant existing implementations?
216
+
217
+ ## VBC Protocol (Verification-Before-Completion)
218
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -138,7 +138,7 @@ Pre-Flight: ✅ All checks passed
138
138
 
139
139
  ---
140
140
 
141
- ## 🤖 LLM-Specific Traps
141
+
142
142
 
143
143
  AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
144
144
 
@@ -150,7 +150,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
150
150
 
151
151
  ---
152
152
 
153
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
153
+
154
154
 
155
155
  **Slash command: `/review` or `/tribunal-full`**
156
156
  **Active reviewers: `logic-reviewer` · `security-auditor`**
@@ -161,7 +161,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
161
161
  2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
162
162
  3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
163
163
 
164
- ### ✅ Pre-Flight Self-Audit
164
+
165
165
 
166
166
  Review these questions before confirming output:
167
167
  ```
@@ -175,4 +175,12 @@ Review these questions before confirming output:
175
175
 
176
176
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
177
177
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
178
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
178
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
179
+
180
+
181
+ ## Pre-Flight Checklist
182
+ - [ ] Have I reviewed the user's specific constraints and requests?
183
+ - [ ] Have I checked the environment for relevant existing implementations?
184
+
185
+ ## VBC Protocol (Verification-Before-Completion)
186
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.