@nockdev/awf 6.2.0

package/.agent/skills/frameworks/vue/SKILL.md

@@ -0,0 +1,356 @@
+---
+name: vue
+detect: ["*.vue", "package.json:vue", "nuxt.config.ts", "vite.config.ts"]
+version: "6.1.2"
+category: frontend
+tier: 1
+---
+
+# Vue Patterns — DOMYH Awesome Code
+
+> **Version**: Vue 3.5/Nuxt 4 (2025-2026)
+> **Philosophy**: Progressive, Composition API, reactive
+
+---
+
+## 🎯 When to Use This Skill
+
+Use for: Web apps, SSR with Nuxt, progressive enhancement.
+**NOT for**: Mobile (→ flutter), React apps (→ react).
+
+---
+
+## 📦 Recommended Stack (2025-2026)
+
+### Core
+
+| Library     | Use Case           |
+| ----------- | ------------------ |
+| **Vue 3.5** | Composition API 🏆 |
+| **Nuxt 4**  | Full-stack SSR 🏆  |
+
+### State
+
+| Library    | Use Case          |
+| ---------- | ----------------- |
+| **Pinia**  | Official store 🏆 |
+| **VueUse** | Composables 🏆    |
+
+### UI
+
+| Library       | Use Case            |
+| ------------- | ------------------- |
+| **Radix Vue** | Headless primitives |
+| **PrimeVue**  | Enterprise          |
+| **Vuetify 3** | Material Design     |
+| **Naive UI**  | Customizable        |
+
+### IDE Support
+
+| IDE          | Features             |
+| ------------ | -------------------- |
+| **VS Code**  | Volar extension 🏆   |
+| **WebStorm** | Built-in Vue support |
+
+---
+
+## 🆕 Vue 3.5 Features
+
+### Reactive Props Destructure
+
+```vue
+<script setup lang="ts">
+// ✅ Vue 3.5: Reactive destructure (stable)
+const { user, loading = false } = defineProps<{
+  user: User;
+  loading?: boolean;
+}>();
+
+// Props are now reactive by default!
+watchEffect(() => {
+  console.log(user.name); // Reactive
+});
+</script>
+```
+
+### Improved Template Refs
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+// ✅ Type-safe template refs
+const inputRef = useTemplateRef<HTMLInputElement>("input");
+
+function focus() {
+  inputRef.value?.focus();
+}
+</script>
+
+<template>
+  <input ref="input" />
+</template>
+```
+
+---
+
+## 🔧 Composition API Patterns
+
+### Component Structure
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+interface Props {
+  user: User;
+}
+
+interface Emits {
+  (e: "update", user: User): void;
+  (e: "delete", id: number): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Reactive state
+const isEditing = ref(false);
+
+// Computed
+const displayName = computed(() => `${props.user.name} <${props.user.email}>`);
+
+// Methods
+function handleUpdate(data: Partial<User>) {
+  emit("update", { ...props.user, ...data });
+}
+</script>
+
+<template>
+  <div>
+    <h2>{{ displayName }}</h2>
+    <button @click="emit('delete', user.id)">Delete</button>
+  </div>
+</template>
+```
+
+### Custom Composables
+
+```typescript
+// composables/useUser.ts
+import { ref, computed } from "vue";
+
+export function useUser(id: Ref<number>) {
+  const user = ref<User | null>(null);
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  async function fetch() {
+    loading.value = true;
+    error.value = null;
+    try {
+      user.value = await api.getUser(id.value);
+    } catch (e) {
+      error.value = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // Auto-fetch when id changes
+  watch(id, fetch, { immediate: true });
+
+  return { user, loading, error, refetch: fetch };
+}
+
+// Usage
+const userId = ref(1);
+const { user, loading, error } = useUser(userId);
+```
+
+### useAsyncState Pattern
+
+```typescript
+// composables/useAsyncState.ts
+export function useAsyncState<T>(fn: () => Promise<T>, initialState: T) {
+  const state = ref<T>(initialState) as Ref<T>;
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  async function execute() {
+    loading.value = true;
+    error.value = null;
+    try {
+      state.value = await fn();
+    } catch (e) {
+      error.value = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return { state, loading, error, execute };
+}
+```
+
+---
+
+## 📊 Pinia Stores
+
+### Setup Store (Recommended)
+
+```typescript
+// stores/user.ts
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const useUserStore = defineStore(
+  "user",
+  () => {
+    // State
+    const user = ref<User | null>(null);
+    const token = ref<string | null>(null);
+
+    // Getters
+    const isLoggedIn = computed(() => !!user.value);
+    const fullName = computed(() => user.value?.name ?? "Guest");
+
+    // Actions
+    async function login(email: string, password: string) {
+      const response = await authApi.login(email, password);
+      user.value = response.user;
+      token.value = response.token;
+    }
+
+    function logout() {
+      user.value = null;
+      token.value = null;
+    }
+
+    return { user, token, isLoggedIn, fullName, login, logout };
+  },
+  {
+    persist: true, // pinia-plugin-persistedstate
+  },
+);
+```
+
+### Store Composition
+
+```typescript
+// stores/cart.ts
+export const useCartStore = defineStore("cart", () => {
+  const userStore = useUserStore();
+  const items = ref<CartItem[]>([]);
+
+  const total = computed(() =>
+    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0),
+  );
+
+  async function checkout() {
+    if (!userStore.isLoggedIn) {
+      throw new Error("Must be logged in");
+    }
+    return api.checkout(items.value);
+  }
+
+  return { items, total, checkout };
+});
+```
+
+---
+
+## 🚀 Nuxt 4 Patterns
+
+### Data Fetching
+
+```vue
+<script setup lang="ts">
+// ✅ Server-side data fetching
+const {
+  data: users,
+  pending,
+  error,
+  refresh,
+} = await useFetch("/api/users", {
+  key: "users",
+  default: () => [],
+});
+
+// ✅ With transform
+const { data: user } = await useFetch(`/api/users/${route.params.id}`, {
+  transform: (data) => normalizeUser(data),
+});
+
+// ✅ Lazy fetch
+const { data, pending } = await useLazyFetch("/api/data");
+</script>
+```
+
+### Server Routes
+
+```typescript
+// server/api/users/[id].get.ts
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, "id");
+
+  const user = await db.user.findUnique({
+    where: { id: Number(id) },
+  });
+
+  if (!user) {
+    throw createError({
+      statusCode: 404,
+      message: "User not found",
+    });
+  }
+
+  return user;
+});
+```
+
+### Middleware
+
+```typescript
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware((to, from) => {
+  const user = useSupabaseUser();
+
+  if (!user.value && to.path !== "/login") {
+    return navigateTo("/login");
+  }
+});
+
+// Usage in page
+definePageMeta({
+  middleware: "auth",
+});
+```
+
+---
+
+## ✅ Best Practices Checklist
+
+### Code Quality
+
+- [ ] `<script setup>` syntax
+- [ ] TypeScript with strict mode
+- [ ] Props/emits typed
+- [ ] Composables for logic reuse
+
+### State
+
+- [ ] Pinia for global state
+- [ ] Computed for derived state
+- [ ] VueUse utilities
+
+### Performance
+
+- [ ] `shallowRef` for large objects
+- [ ] `v-once` for static content
+- [ ] Lazy components
+- [ ] `<Suspense>` for async
+
+---
+
+_DOMYH Awesome Code • Vue 3.5/Nuxt 4_

package/.agent/skills/frameworks/vue/data/advanced.yaml

@@ -0,0 +1,253 @@
+# =============================================================================
+# Vue Advanced Patterns (Feb 2026)
+# =============================================================================
+# Vapor Mode, Performance, TypeScript
+
+metadata:
+  skill: vue
+  domain: advanced
+  version: "3.6"
+  updated: "2026-02-05"
+  patterns_count: 5
+
+patterns:
+  - id: vue007
+    name: Vapor Mode (Vue 3.6)
+    category: performance
+    version: "3.6+"
+    description: |
+      No-VDOM compilation for Solid.js-like performance.
+      88% smaller baseline, direct DOM manipulation.
+    text: vapor mode no vdom virtual dom performance solid
+    example: |
+      <!-- ✅ Vue 3.6 Vapor Mode: Add 'vapor' attribute -->
+      <script setup vapor>
+      import { ref } from 'vue';
+
+      // Same Composition API, but compiled to direct DOM updates
+      const count = ref(0);
+
+      function increment() {
+        count.value++;
+      }
+      </script>
+
+      <template>
+        <button @click="increment">Count: {{ count }}</button>
+      </template>
+
+      <!-- ✅ Benefits:
+      - 88% smaller baseline (50KB → 6KB)
+      - Solid.js-like performance
+      - No Virtual DOM overhead
+      - Direct DOM manipulation
+      - Gradual adoption (mix with VDOM components)
+
+      ⚠️ Current Limitations (alpha):
+      - No SSR Hydration yet
+      - No Async Components
+      - No Transitions
+      - No keepAlive
+      - No Suspense -->
+    severity: HIGH
+    docs_url: https://github.com/vuejs/vue-vapor
+
+  - id: vue008
+    name: Provide/Inject TypeScript
+    category: patterns
+    version: "3.0+"
+    description: Type-safe dependency injection
+    text: provide inject dependency injection typescript symbol
+    example: |
+      // ✅ Define injection keys with types
+      // injection-keys.ts
+      import type { InjectionKey, Ref } from 'vue';
+
+      export interface User {
+        id: string;
+        name: string;
+        email: string;
+      }
+
+      export const userKey = Symbol('user') as InjectionKey<Ref<User>>;
+      export const themeKey = Symbol('theme') as InjectionKey<Ref<'light' | 'dark'>>;
+
+      // Provider component
+      <script setup lang="ts">
+      import { provide, ref } from 'vue';
+      import { userKey, themeKey } from './injection-keys';
+
+      const user = ref({ id: '1', name: 'John', email: 'j@e.com' });
+      const theme = ref<'light' | 'dark'>('dark');
+
+      provide(userKey, user);
+      provide(themeKey, theme);
+      </script>
+
+      // Consumer component
+      <script setup lang="ts">
+      import { inject } from 'vue';
+      import { userKey, themeKey } from './injection-keys';
+
+      // ✅ Type-safe injection
+      const user = inject(userKey);  // Ref<User> | undefined
+      const theme = inject(themeKey, ref('light'));  // With default
+      </script>
+    severity: MEDIUM
+    docs_url: https://vuejs.org/guide/components/provide-inject.html
+
+  - id: vue009
+    name: VueUse Utilities
+    category: ecosystem
+    version: "10+"
+    description: Essential composition utilities collection
+    text: vueuse composable utility mouse fetch storage intersection
+    example: |
+      <script setup>
+      import { 
+        useMouse, 
+        useLocalStorage, 
+        useFetch,
+        useIntersectionObserver,
+        useDebounce,
+        useThrottleFn,
+        onClickOutside,
+      } from '@vueuse/core';
+
+      // ✅ Mouse position
+      const { x, y } = useMouse();
+
+      // ✅ Persistent storage
+      const preferences = useLocalStorage('user-prefs', {
+        theme: 'dark',
+        sidebar: 'expanded',
+      });
+
+      // ✅ Fetch with auto-refetch
+      const { data, error, isFetching } = useFetch('/api/users')
+        .get()
+        .json();
+
+      // ✅ Intersection observer
+      const target = ref(null);
+      const { isIntersecting } = useIntersectionObserver(target);
+
+      // ✅ Debounced value
+      const searchQuery = ref('');
+      const debouncedQuery = useDebounce(searchQuery, 300);
+
+      // ✅ Click outside handler
+      const modal = ref(null);
+      onClickOutside(modal, () => closeModal());
+      </script>
+
+      <template>
+        <div ref="modal">Modal content</div>
+        <div ref="target" v-if="isIntersecting">Lazy loaded!</div>
+      </template>
+    severity: MEDIUM
+    docs_url: https://vueuse.org/
+
+  - id: vue010
+    name: TypeScript Best Practices
+    category: typescript
+    version: "3.5+"
+    description: Type-safe Vue component patterns
+    text: typescript props emit generic type infer
+    example: |
+      <script setup lang="ts">
+      // ✅ Typed props
+      interface Props {
+        title: string;
+        count?: number;
+        items: string[];
+      }
+
+      const props = withDefaults(defineProps<Props>(), {
+        count: 0,
+      });
+
+      // ✅ Typed emits
+      interface Emits {
+        (e: 'update', value: string): void;
+        (e: 'delete', id: number): void;
+      }
+
+      const emit = defineEmits<Emits>();
+
+      // ✅ Generic components (Vue 3.5+)
+      // GenericList.vue
+      <script setup lang="ts" generic="T extends { id: string | number }">
+      defineProps<{
+        items: T[];
+        selected?: T;
+      }>();
+
+      defineEmits<{
+        select: [item: T];
+      }>();
+      </script>
+
+      // ✅ Typed slots
+      defineSlots<{
+        default(props: { item: T }): any;
+        empty(): any;
+      }>();
+      </script>
+
+      <!-- Usage with inferred types -->
+      <!-- <GenericList :items="users" @select="handleUser">
+        <template #default="{ item }">
+          {{ item.name }}
+        </template>
+      </GenericList> -->
+    severity: HIGH
+    docs_url: https://vuejs.org/guide/typescript/composition-api.html
+
+  - id: vue011
+    name: Performance Optimization
+    category: performance
+    version: "3.5+"
+    description: Key techniques for fast Vue apps
+    text: performance optimization v-memo shallowRef computed cache
+    example: |
+      <script setup>
+      import { shallowRef, triggerRef, computed } from 'vue';
+
+      // ✅ shallowRef for large lists
+      const largeList = shallowRef([...items]);
+      function updateList(newItems) {
+        largeList.value = newItems;  // Only this triggers reactivity
+      }
+
+      // ✅ Computed with getter only (cached)
+      const expensiveComputed = computed(() => {
+        return items.value.reduce((acc, item) => acc + calculate(item), 0);
+      });
+      </script>
+
+      <template>
+        <!-- ✅ v-memo for skipping updates -->
+        <div v-for="item in items" :key="item.id" v-memo="[item.id, item.selected]">
+          <ExpensiveComponent :item="item" />
+        </div>
+
+        <!-- ✅ v-once for static content -->
+        <div v-once>
+          <h1>{{ staticTitle }}</h1>
+          <p>This never re-renders</p>
+        </div>
+
+        <!-- ✅ Async components for code splitting -->
+        <Suspense>
+          <AsyncHeavyComponent />
+        </Suspense>
+      </template>
+
+      <!-- ✅ Additional tips:
+      - Use shallowRef for large objects/arrays
+      - Avoid inline arrow functions in templates
+      - Use v-show instead of v-if for frequent toggles
+      - Keep component trees shallow -->
+    severity: MEDIUM
+    docs_url: https://vuejs.org/guide/best-practices/performance.html