tribunal-kit 4.3.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 (98) hide show
  1. package/.agent/scripts/case_law_manager.js +684 -684
  2. package/.agent/scripts/graph_builder.js +199 -0
  3. package/.agent/scripts/graph_zoom.js +154 -0
  4. package/.agent/skills/agent-organizer/SKILL.md +9 -1
  5. package/.agent/skills/agentic-patterns/SKILL.md +9 -1
  6. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +9 -1
  7. package/.agent/skills/api-patterns/SKILL.md +206 -198
  8. package/.agent/skills/api-security-auditor/SKILL.md +9 -1
  9. package/.agent/skills/app-builder/SKILL.md +9 -1
  10. package/.agent/skills/app-builder/templates/SKILL.md +77 -69
  11. package/.agent/skills/appflow-wireframe/SKILL.md +9 -1
  12. package/.agent/skills/architecture/SKILL.md +9 -1
  13. package/.agent/skills/authentication-best-practices/SKILL.md +9 -1
  14. package/.agent/skills/bash-linux/SKILL.md +9 -1
  15. package/.agent/skills/behavioral-modes/SKILL.md +9 -1
  16. package/.agent/skills/brainstorming/SKILL.md +9 -1
  17. package/.agent/skills/building-native-ui/SKILL.md +9 -1
  18. package/.agent/skills/clean-code/SKILL.md +9 -1
  19. package/.agent/skills/code-review-checklist/SKILL.md +9 -1
  20. package/.agent/skills/config-validator/SKILL.md +9 -1
  21. package/.agent/skills/csharp-developer/SKILL.md +9 -1
  22. package/.agent/skills/data-validation-schemas/SKILL.md +287 -279
  23. package/.agent/skills/database-design/SKILL.md +199 -191
  24. package/.agent/skills/deployment-procedures/SKILL.md +9 -1
  25. package/.agent/skills/devops-engineer/SKILL.md +9 -1
  26. package/.agent/skills/devops-incident-responder/SKILL.md +9 -1
  27. package/.agent/skills/documentation-templates/SKILL.md +9 -1
  28. package/.agent/skills/edge-computing/SKILL.md +9 -1
  29. package/.agent/skills/error-resilience/SKILL.md +387 -379
  30. package/.agent/skills/extract-design-system/SKILL.md +9 -1
  31. package/.agent/skills/framer-motion-expert/SKILL.md +203 -195
  32. package/.agent/skills/frontend-design/SKILL.md +160 -152
  33. package/.agent/skills/game-design-expert/SKILL.md +9 -1
  34. package/.agent/skills/game-engineering-expert/SKILL.md +9 -1
  35. package/.agent/skills/geo-fundamentals/SKILL.md +9 -1
  36. package/.agent/skills/github-operations/SKILL.md +9 -1
  37. package/.agent/skills/gsap-core/SKILL.md +54 -46
  38. package/.agent/skills/gsap-frameworks/SKILL.md +54 -46
  39. package/.agent/skills/gsap-performance/SKILL.md +54 -46
  40. package/.agent/skills/gsap-plugins/SKILL.md +54 -46
  41. package/.agent/skills/gsap-react/SKILL.md +54 -46
  42. package/.agent/skills/gsap-scrolltrigger/SKILL.md +54 -46
  43. package/.agent/skills/gsap-timeline/SKILL.md +54 -46
  44. package/.agent/skills/gsap-utils/SKILL.md +54 -46
  45. package/.agent/skills/i18n-localization/SKILL.md +9 -1
  46. package/.agent/skills/intelligent-routing/SKILL.md +38 -30
  47. package/.agent/skills/knowledge-graph/SKILL.md +36 -0
  48. package/.agent/skills/lint-and-validate/SKILL.md +9 -1
  49. package/.agent/skills/llm-engineering/SKILL.md +9 -1
  50. package/.agent/skills/local-first/SKILL.md +9 -1
  51. package/.agent/skills/mcp-builder/SKILL.md +9 -1
  52. package/.agent/skills/mobile-design/SKILL.md +222 -214
  53. package/.agent/skills/monorepo-management/SKILL.md +293 -285
  54. package/.agent/skills/motion-engineering/SKILL.md +193 -185
  55. package/.agent/skills/nextjs-react-expert/SKILL.md +193 -185
  56. package/.agent/skills/nodejs-best-practices/SKILL.md +9 -1
  57. package/.agent/skills/observability/SKILL.md +9 -1
  58. package/.agent/skills/parallel-agents/SKILL.md +9 -1
  59. package/.agent/skills/performance-profiling/SKILL.md +9 -1
  60. package/.agent/skills/plan-writing/SKILL.md +9 -1
  61. package/.agent/skills/platform-engineer/SKILL.md +9 -1
  62. package/.agent/skills/playwright-best-practices/SKILL.md +9 -1
  63. package/.agent/skills/powershell-windows/SKILL.md +9 -1
  64. package/.agent/skills/project-idioms/SKILL.md +9 -1
  65. package/.agent/skills/python-patterns/SKILL.md +9 -1
  66. package/.agent/skills/python-pro/SKILL.md +282 -274
  67. package/.agent/skills/react-specialist/SKILL.md +236 -228
  68. package/.agent/skills/readme-builder/SKILL.md +9 -1
  69. package/.agent/skills/realtime-patterns/SKILL.md +9 -1
  70. package/.agent/skills/red-team-tactics/SKILL.md +9 -1
  71. package/.agent/skills/rust-pro/SKILL.md +9 -1
  72. package/.agent/skills/seo-fundamentals/SKILL.md +9 -1
  73. package/.agent/skills/server-management/SKILL.md +9 -1
  74. package/.agent/skills/shadcn-ui-expert/SKILL.md +9 -1
  75. package/.agent/skills/skill-creator/SKILL.md +9 -1
  76. package/.agent/skills/sql-pro/SKILL.md +9 -1
  77. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +9 -1
  78. package/.agent/skills/swiftui-expert/SKILL.md +9 -1
  79. package/.agent/skills/systematic-debugging/SKILL.md +9 -1
  80. package/.agent/skills/tailwind-patterns/SKILL.md +9 -1
  81. package/.agent/skills/tdd-workflow/SKILL.md +9 -1
  82. package/.agent/skills/test-result-analyzer/SKILL.md +9 -1
  83. package/.agent/skills/testing-patterns/SKILL.md +9 -1
  84. package/.agent/skills/trend-researcher/SKILL.md +9 -1
  85. package/.agent/skills/typescript-advanced/SKILL.md +294 -286
  86. package/.agent/skills/ui-ux-pro-max/SKILL.md +9 -1
  87. package/.agent/skills/ui-ux-researcher/SKILL.md +9 -1
  88. package/.agent/skills/vue-expert/SKILL.md +234 -226
  89. package/.agent/skills/vulnerability-scanner/SKILL.md +9 -1
  90. package/.agent/skills/web-accessibility-auditor/SKILL.md +9 -1
  91. package/.agent/skills/web-design-guidelines/SKILL.md +9 -1
  92. package/.agent/skills/webapp-testing/SKILL.md +9 -1
  93. package/.agent/skills/whimsy-injector/SKILL.md +9 -1
  94. package/.agent/skills/workflow-optimizer/SKILL.md +9 -1
  95. package/README.md +242 -242
  96. package/bin/tribunal-kit.js +30 -22
  97. package/package.json +81 -80
  98. package/scripts/validate-payload.js +73 -0
@@ -114,4 +114,12 @@ Review these questions before confirming output:
114
114
 
115
115
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
116
116
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
117
- - ✅ **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.
117
+ - ✅ **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.
118
+
119
+
120
+ ## Pre-Flight Checklist
121
+ - [ ] Have I reviewed the user's specific constraints and requests?
122
+ - [ ] Have I checked the environment for relevant existing implementations?
123
+
124
+ ## VBC Protocol (Verification-Before-Completion)
125
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -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,228 +1,228 @@
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
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
226
226
 
227
227
 
228
228
  ---
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -158,4 +158,12 @@ Review these questions before confirming output:
158
158
 
159
159
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
160
160
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
161
- - ✅ **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.
161
+ - ✅ **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.
162
+
163
+
164
+ ## Pre-Flight Checklist
165
+ - [ ] Have I reviewed the user's specific constraints and requests?
166
+ - [ ] Have I checked the environment for relevant existing implementations?
167
+
168
+ ## VBC Protocol (Verification-Before-Completion)
169
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -314,4 +314,12 @@ Review these questions before confirming output:
314
314
 
315
315
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
316
316
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
317
- - ✅ **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.
317
+ - ✅ **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.
318
+
319
+
320
+ ## Pre-Flight Checklist
321
+ - [ ] Have I reviewed the user's specific constraints and requests?
322
+ - [ ] Have I checked the environment for relevant existing implementations?
323
+
324
+ ## VBC Protocol (Verification-Before-Completion)
325
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
@@ -218,4 +218,12 @@ Review these questions before confirming output:
218
218
 
219
219
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
220
220
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
221
- - ✅ **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.
221
+ - ✅ **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.
222
+
223
+
224
+ ## Pre-Flight Checklist
225
+ - [ ] Have I reviewed the user's specific constraints and requests?
226
+ - [ ] Have I checked the environment for relevant existing implementations?
227
+
228
+ ## VBC Protocol (Verification-Before-Completion)
229
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.