omgkit 2.2.0 → 2.3.0

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

@@ -1,429 +1,118 @@
 ---
-name: vue
-description: Modern Vue 3 development with Composition API, TypeScript, Pinia, Vue Router, and testing patterns
-category: frameworks
-triggers:
-  - vue
-  - vue 3
-  - vue.js
-  - vuejs
-  - composition api
-  - pinia
-  - vue router
-  - nuxt
-  - vite vue
+name: building-vue-apps
+description: Builds production Vue 3 applications with Composition API, TypeScript, Pinia, and Vue Router. Use when creating Vue.js SPAs, component libraries, or reactive web interfaces.
 ---
 
 # Vue.js
 
-Modern **Vue 3 development** following industry best practices. This skill covers Composition API, TypeScript integration, Pinia state management, Vue Router, component patterns, testing with Vitest, and production-ready configurations used by top engineering teams.
+## Quick Start
 
-## Purpose
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 
-Build reactive, maintainable Vue applications with confidence:
+const count = ref(0);
+const doubled = computed(() => count.value * 2);
+</script>
 
-- Master Composition API and `<script setup>` syntax
-- Implement type-safe components with TypeScript
-- Manage state effectively with Pinia stores
-- Handle routing with Vue Router
-- Create reusable composables
-- Write comprehensive tests with Vitest
-- Build performant applications
+<template>
+  <button @click="count++">
+    Count: {{ count }} (doubled: {{ doubled }})
+  </button>
+</template>
+```
 
 ## Features
 
-### 1. Component Architecture with TypeScript
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Composition API | Reactive state, composables, lifecycle | [COMPOSITION.md](COMPOSITION.md) |
+| TypeScript | Props, emits, refs typing | [TYPESCRIPT.md](TYPESCRIPT.md) |
+| Pinia | State management, stores, plugins | [PINIA.md](PINIA.md) |
+| Vue Router | Navigation, guards, lazy loading | [ROUTER.md](ROUTER.md) |
+| Testing | Vitest, Vue Test Utils patterns | [TESTING.md](TESTING.md) |
+| Performance | Lazy loading, memoization, virtual lists | [PERFORMANCE.md](PERFORMANCE.md) |
+
+## Common Patterns
+
+### Component with Props and Emits
 
 ```vue
-<!-- src/components/UserCard.vue -->
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue';
-import type { User, UserRole } from '@/types';
-
-// Props with TypeScript
 interface Props {
-  user: User;
+  user: { id: string; name: string; email: string };
   showActions?: boolean;
-  variant?: 'default' | 'compact' | 'detailed';
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showActions: true,
-  variant: 'default',
-});
-
-// Emits with TypeScript
-interface Emits {
-  (e: 'edit', user: User): void;
-  (e: 'delete', userId: string): void;
-  (e: 'select', user: User, selected: boolean): void;
-}
-
-const emit = defineEmits<Emits>();
-
-// Expose methods to parent
-defineExpose({
-  focus: () => cardRef.value?.focus(),
-});
-
-// Refs
-const cardRef = ref<HTMLDivElement | null>(null);
-const isSelected = ref(false);
-const isLoading = ref(false);
-
-// Computed
-const fullName = computed(() =>
-  `${props.user.firstName} ${props.user.lastName}`
-);
-
-const roleLabel = computed(() => {
-  const labels: Record<UserRole, string> = {
-    admin: 'Administrator',
-    user: 'User',
-    guest: 'Guest',
-  };
-  return labels[props.user.role];
-});
-
-const cardClasses = computed(() => ({
-  'user-card': true,
-  [`user-card--${props.variant}`]: true,
-  'user-card--selected': isSelected.value,
-  'user-card--loading': isLoading.value,
-}));
-
-// Watchers
-watch(() => props.user.id, (newId, oldId) => {
-  if (newId !== oldId) {
-    isSelected.value = false;
-  }
 });
 
-// Methods
-function handleEdit() {
-  emit('edit', props.user);
-}
-
-function handleDelete() {
-  emit('delete', props.user.id);
-}
-
-function toggleSelect() {
-  isSelected.value = !isSelected.value;
-  emit('select', props.user, isSelected.value);
-}
-
-// Lifecycle
-onMounted(() => {
-  console.log('UserCard mounted for:', props.user.id);
-});
+const emit = defineEmits<{
+  (e: 'edit', user: Props['user']): void;
+  (e: 'delete', id: string): void;
+}>();
 </script>
 
 <template>
-  <div
-    ref="cardRef"
-    :class="cardClasses"
-    tabindex="0"
-    @click="toggleSelect"
-  >
-    <div class="user-card__avatar">
-      <img
-        :src="user.avatarUrl || '/default-avatar.png'"
-        :alt="fullName"
-      />
-    </div>
-
-    <div class="user-card__content">
-      <h3 class="user-card__name">{{ fullName }}</h3>
-      <p class="user-card__email">{{ user.email }}</p>
-      <span class="user-card__role" :class="`role--${user.role}`">
-        {{ roleLabel }}
-      </span>
-    </div>
-
-    <div v-if="showActions" class="user-card__actions">
-      <button @click.stop="handleEdit">Edit</button>
-      <button @click.stop="handleDelete">Delete</button>
+  <div class="user-card">
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.email }}</p>
+    <div v-if="showActions">
+      <button @click="emit('edit', user)">Edit</button>
+      <button @click="emit('delete', user.id)">Delete</button>
     </div>
-
-    <slot name="footer" :user="user" :selected="isSelected" />
   </div>
 </template>
-
-<style scoped>
-.user-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.user-card--selected {
-  border-color: var(--primary-color);
-  background: var(--primary-bg);
-}
-
-.user-card--compact {
-  padding: 0.5rem;
-}
-
-.user-card--loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-</style>
 ```
 
-### 2. Composables (Reusable Logic)
+### Composable for Reusable Logic
 
 ```typescript
-// src/composables/useUser.ts
-import { ref, computed, watch, type Ref } from 'vue';
-import type { User, UpdateUserData } from '@/types';
-import { userService } from '@/services/user.service';
-
-interface UseUserOptions {
-  immediate?: boolean;
-  onError?: (error: Error) => void;
-}
-
-export function useUser(userId: Ref<string | null>, options: UseUserOptions = {}) {
-  const { immediate = true, onError } = options;
+// composables/useFetch.ts
+import { ref, watch, type Ref } from 'vue';
 
-  const user = ref<User | null>(null);
+export function useFetch<T>(url: Ref<string>) {
+  const data = ref<T | null>(null);
   const loading = ref(false);
   const error = ref<Error | null>(null);
 
-  const isLoaded = computed(() => !!user.value);
-  const fullName = computed(() =>
-    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
-  );
-
-  async function fetchUser() {
-    if (!userId.value) {
-      user.value = null;
-      return;
-    }
-
+  async function fetchData() {
     loading.value = true;
     error.value = null;
-
-    try {
-      user.value = await userService.getById(userId.value);
-    } catch (e) {
-      error.value = e as Error;
-      onError?.(e as Error);
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function updateUser(data: UpdateUserData) {
-    if (!userId.value || !user.value) return;
-
-    loading.value = true;
     try {
-      user.value = await userService.update(userId.value, data);
+      const response = await fetch(url.value);
+      data.value = await response.json();
     } catch (e) {
       error.value = e as Error;
-      throw e;
     } finally {
       loading.value = false;
     }
   }
 
-  watch(userId, fetchUser, { immediate });
-
-  return {
-    user,
-    loading,
-    error,
-    isLoaded,
-    fullName,
-    fetchUser,
-    updateUser,
-  };
-}
-
+  watch(url, fetchData, { immediate: true });
 
-// src/composables/usePagination.ts
-import { ref, computed, watch } from 'vue';
-
-interface UsePaginationOptions {
-  initialPage?: number;
-  initialLimit?: number;
-  total?: number;
-}
-
-export function usePagination(options: UsePaginationOptions = {}) {
-  const page = ref(options.initialPage ?? 1);
-  const limit = ref(options.initialLimit ?? 20);
-  const total = ref(options.total ?? 0);
-
-  const totalPages = computed(() =>
-    Math.ceil(total.value / limit.value) || 1
-  );
-
-  const hasNextPage = computed(() => page.value < totalPages.value);
-  const hasPrevPage = computed(() => page.value > 1);
-
-  const offset = computed(() => (page.value - 1) * limit.value);
-
-  function nextPage() {
-    if (hasNextPage.value) page.value++;
-  }
-
-  function prevPage() {
-    if (hasPrevPage.value) page.value--;
-  }
-
-  function goToPage(pageNum: number) {
-    if (pageNum >= 1 && pageNum <= totalPages.value) {
-      page.value = pageNum;
-    }
-  }
-
-  function setTotal(newTotal: number) {
-    total.value = newTotal;
-    if (page.value > totalPages.value) {
-      page.value = totalPages.value || 1;
-    }
-  }
-
-  return {
-    page,
-    limit,
-    total,
-    totalPages,
-    hasNextPage,
-    hasPrevPage,
-    offset,
-    nextPage,
-    prevPage,
-    goToPage,
-    setTotal,
-  };
-}
-
-
-// src/composables/useAsync.ts
-import { ref, shallowRef, type Ref } from 'vue';
-
-interface UseAsyncOptions<T> {
-  immediate?: boolean;
-  initialData?: T;
-  onSuccess?: (data: T) => void;
-  onError?: (error: Error) => void;
-}
-
-export function useAsync<T, P extends unknown[] = []>(
-  asyncFn: (...args: P) => Promise<T>,
-  options: UseAsyncOptions<T> = {}
-) {
-  const { initialData, onSuccess, onError } = options;
-
-  const data = shallowRef<T | undefined>(initialData) as Ref<T | undefined>;
-  const loading = ref(false);
-  const error = ref<Error | null>(null);
-
-  async function execute(...args: P): Promise<T | undefined> {
-    loading.value = true;
-    error.value = null;
-
-    try {
-      const result = await asyncFn(...args);
-      data.value = result;
-      onSuccess?.(result);
-      return result;
-    } catch (e) {
-      error.value = e as Error;
-      onError?.(e as Error);
-      return undefined;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  return {
-    data,
-    loading,
-    error,
-    execute,
-  };
+  return { data, loading, error, refetch: fetchData };
 }
 ```
 
-### 3. Pinia State Management
+### Pinia Store
 
 ```typescript
-// src/stores/user.store.ts
+// stores/user.ts
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
-import type { User, LoginCredentials, RegisterData } from '@/types';
-import { authService } from '@/services/auth.service';
-import { useStorage } from '@vueuse/core';
 
 export const useUserStore = defineStore('user', () => {
-  // State
   const user = ref<User | null>(null);
-  const token = useStorage<string | null>('auth_token', null);
-  const loading = ref(false);
-  const error = ref<string | null>(null);
-
-  // Getters
-  const isAuthenticated = computed(() => !!token.value && !!user.value);
-  const isAdmin = computed(() => user.value?.role === 'admin');
-  const fullName = computed(() =>
-    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
-  );
+  const token = ref<string | null>(null);
 
-  // Actions
-  async function login(credentials: LoginCredentials) {
-    loading.value = true;
-    error.value = null;
+  const isAuthenticated = computed(() => !!user.value);
 
-    try {
-      const response = await authService.login(credentials);
-      token.value = response.token;
-      user.value = response.user;
-    } catch (e) {
-      error.value = (e as Error).message;
-      throw e;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function register(data: RegisterData) {
-    loading.value = true;
-    error.value = null;
-
-    try {
-      const response = await authService.register(data);
-      token.value = response.token;
-      user.value = response.user;
-    } catch (e) {
-      error.value = (e as Error).message;
-      throw e;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function fetchCurrentUser() {
-    if (!token.value) return;
-
-    loading.value = true;
-    try {
-      user.value = await authService.getCurrentUser();
-    } catch (e) {
-      logout();
-    } finally {
-      loading.value = false;
-    }
+  async function login(credentials: { email: string; password: string }) {
+    const res = await authService.login(credentials);
+    user.value = res.user;
+    token.value = res.token;
   }
 
   function logout() {
@@ -431,901 +120,65 @@ export const useUserStore = defineStore('user', () => {
     token.value = null;
   }
 
-  function $reset() {
-    user.value = null;
-    token.value = null;
-    loading.value = false;
-    error.value = null;
-  }
-
-  return {
-    // State
-    user,
-    token,
-    loading,
-    error,
-    // Getters
-    isAuthenticated,
-    isAdmin,
-    fullName,
-    // Actions
-    login,
-    register,
-    fetchCurrentUser,
-    logout,
-    $reset,
-  };
+  return { user, token, isAuthenticated, login, logout };
 });
+```
 
+## Workflows
 
-// src/stores/notification.store.ts
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-interface Notification {
-  id: string;
-  type: 'success' | 'error' | 'warning' | 'info';
-  message: string;
-  duration?: number;
-}
-
-export const useNotificationStore = defineStore('notification', () => {
-  const notifications = ref<Notification[]>([]);
-
-  function add(notification: Omit<Notification, 'id'>) {
-    const id = crypto.randomUUID();
-    const newNotification: Notification = {
-      ...notification,
-      id,
-      duration: notification.duration ?? 5000,
-    };
-
-    notifications.value.push(newNotification);
-
-    if (newNotification.duration > 0) {
-      setTimeout(() => remove(id), newNotification.duration);
-    }
-
-    return id;
-  }
-
-  function remove(id: string) {
-    const index = notifications.value.findIndex(n => n.id === id);
-    if (index !== -1) {
-      notifications.value.splice(index, 1);
-    }
-  }
-
-  function success(message: string) {
-    return add({ type: 'success', message });
-  }
-
-  function error(message: string) {
-    return add({ type: 'error', message });
-  }
-
-  function warning(message: string) {
-    return add({ type: 'warning', message });
-  }
-
-  function info(message: string) {
-    return add({ type: 'info', message });
-  }
+### Component Development
 
-  return {
-    notifications,
-    add,
-    remove,
-    success,
-    error,
-    warning,
-    info,
-  };
-});
-```
+1. Define props interface with TypeScript
+2. Define emits with typed events
+3. Use `<script setup>` syntax
+4. Create composables for reusable logic
+5. Write tests with Vitest + Vue Test Utils
 
-### 4. Vue Router Configuration
+### Router Setup
 
 ```typescript
-// src/router/index.ts
-import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
-import { useUserStore } from '@/stores/user.store';
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    component: () => import('@/layouts/DefaultLayout.vue'),
-    children: [
-      {
-        path: '',
-        name: 'home',
-        component: () => import('@/views/HomeView.vue'),
-      },
-      {
-        path: 'dashboard',
-        name: 'dashboard',
-        component: () => import('@/views/DashboardView.vue'),
-        meta: { requiresAuth: true },
-      },
-      {
-        path: 'users',
-        name: 'users',
-        component: () => import('@/views/UsersView.vue'),
-        meta: { requiresAuth: true, roles: ['admin'] },
-      },
-      {
-        path: 'users/:id',
-        name: 'user-detail',
-        component: () => import('@/views/UserDetailView.vue'),
-        props: true,
-        meta: { requiresAuth: true },
-      },
-    ],
-  },
-  {
-    path: '/auth',
-    component: () => import('@/layouts/AuthLayout.vue'),
-    children: [
-      {
-        path: 'login',
-        name: 'login',
-        component: () => import('@/views/auth/LoginView.vue'),
-        meta: { guestOnly: true },
-      },
-      {
-        path: 'register',
-        name: 'register',
-        component: () => import('@/views/auth/RegisterView.vue'),
-        meta: { guestOnly: true },
-      },
-    ],
-  },
+const routes = [
+  { path: '/', component: () => import('./views/Home.vue') },
   {
-    path: '/:pathMatch(.*)*',
-    name: 'not-found',
-    component: () => import('@/views/NotFoundView.vue'),
+    path: '/dashboard',
+    component: () => import('./views/Dashboard.vue'),
+    meta: { requiresAuth: true },
   },
 ];
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) return savedPosition;
-    if (to.hash) return { el: to.hash, behavior: 'smooth' };
-    return { top: 0 };
-  },
-});
-
-// Navigation Guards
-router.beforeEach(async (to, from, next) => {
+router.beforeEach((to, from, next) => {
   const userStore = useUserStore();
-
-  // Initialize user if token exists but user is not loaded
-  if (userStore.token && !userStore.user) {
-    await userStore.fetchCurrentUser();
-  }
-
-  // Check authentication
   if (to.meta.requiresAuth && !userStore.isAuthenticated) {
-    return next({ name: 'login', query: { redirect: to.fullPath } });
+    next({ path: '/login', query: { redirect: to.fullPath } });
+  } else {
+    next();
   }
-
-  // Check guest-only routes
-  if (to.meta.guestOnly && userStore.isAuthenticated) {
-    return next({ name: 'dashboard' });
-  }
-
-  // Check role-based access
-  const requiredRoles = to.meta.roles as string[] | undefined;
-  if (requiredRoles && userStore.user) {
-    if (!requiredRoles.includes(userStore.user.role)) {
-      return next({ name: 'dashboard' });
-    }
-  }
-
-  next();
 });
-
-export default router;
 ```
 
-### 5. Form Handling with Validation
-
-```vue
-<!-- src/views/auth/RegisterView.vue -->
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useUserStore } from '@/stores/user.store';
-import { useNotificationStore } from '@/stores/notification.store';
-
-interface FormState {
-  email: string;
-  password: string;
-  confirmPassword: string;
-  firstName: string;
-  lastName: string;
-}
-
-interface FormErrors {
-  email?: string;
-  password?: string;
-  confirmPassword?: string;
-  firstName?: string;
-  lastName?: string;
-}
-
-const router = useRouter();
-const userStore = useUserStore();
-const notifications = useNotificationStore();
-
-const form = reactive<FormState>({
-  email: '',
-  password: '',
-  confirmPassword: '',
-  firstName: '',
-  lastName: '',
-});
-
-const errors = reactive<FormErrors>({});
-const submitting = ref(false);
-
-function validateEmail(email: string): string | undefined {
-  if (!email) return 'Email is required';
-  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Invalid email format';
-}
-
-function validatePassword(password: string): string | undefined {
-  if (!password) return 'Password is required';
-  if (password.length < 8) return 'Password must be at least 8 characters';
-  if (!/[A-Z]/.test(password)) return 'Password must contain uppercase letter';
-  if (!/[0-9]/.test(password)) return 'Password must contain a number';
-}
-
-function validateForm(): boolean {
-  errors.email = validateEmail(form.email);
-  errors.password = validatePassword(form.password);
-  errors.confirmPassword = form.password !== form.confirmPassword
-    ? 'Passwords do not match'
-    : undefined;
-  errors.firstName = !form.firstName ? 'First name is required' : undefined;
-  errors.lastName = !form.lastName ? 'Last name is required' : undefined;
-
-  return !Object.values(errors).some(Boolean);
-}
-
-async function handleSubmit() {
-  if (!validateForm()) return;
-
-  submitting.value = true;
-
-  try {
-    await userStore.register({
-      email: form.email,
-      password: form.password,
-      firstName: form.firstName,
-      lastName: form.lastName,
-    });
-
-    notifications.success('Registration successful!');
-    router.push({ name: 'dashboard' });
-  } catch (error) {
-    notifications.error((error as Error).message);
-  } finally {
-    submitting.value = false;
-  }
-}
-</script>
-
-<template>
-  <form @submit.prevent="handleSubmit" class="register-form">
-    <h1>Create Account</h1>
-
-    <div class="form-row">
-      <div class="form-group">
-        <label for="firstName">First Name</label>
-        <input
-          id="firstName"
-          v-model="form.firstName"
-          type="text"
-          :class="{ error: errors.firstName }"
-        />
-        <span v-if="errors.firstName" class="error-message">
-          {{ errors.firstName }}
-        </span>
-      </div>
-
-      <div class="form-group">
-        <label for="lastName">Last Name</label>
-        <input
-          id="lastName"
-          v-model="form.lastName"
-          type="text"
-          :class="{ error: errors.lastName }"
-        />
-        <span v-if="errors.lastName" class="error-message">
-          {{ errors.lastName }}
-        </span>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="email">Email</label>
-      <input
-        id="email"
-        v-model="form.email"
-        type="email"
-        :class="{ error: errors.email }"
-      />
-      <span v-if="errors.email" class="error-message">
-        {{ errors.email }}
-      </span>
-    </div>
-
-    <div class="form-group">
-      <label for="password">Password</label>
-      <input
-        id="password"
-        v-model="form.password"
-        type="password"
-        :class="{ error: errors.password }"
-      />
-      <span v-if="errors.password" class="error-message">
-        {{ errors.password }}
-      </span>
-    </div>
-
-    <div class="form-group">
-      <label for="confirmPassword">Confirm Password</label>
-      <input
-        id="confirmPassword"
-        v-model="form.confirmPassword"
-        type="password"
-        :class="{ error: errors.confirmPassword }"
-      />
-      <span v-if="errors.confirmPassword" class="error-message">
-        {{ errors.confirmPassword }}
-      </span>
-    </div>
-
-    <button type="submit" :disabled="submitting">
-      {{ submitting ? 'Creating...' : 'Create Account' }}
-    </button>
-
-    <p class="login-link">
-      Already have an account?
-      <RouterLink :to="{ name: 'login' }">Sign in</RouterLink>
-    </p>
-  </form>
-</template>
-```
-
-### 6. Testing with Vitest
-
-```typescript
-// src/components/__tests__/UserCard.spec.ts
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import UserCard from '@/components/UserCard.vue';
-import type { User } from '@/types';
-
-const mockUser: User = {
-  id: '1',
-  email: 'test@example.com',
-  firstName: 'John',
-  lastName: 'Doe',
-  role: 'user',
-  avatarUrl: null,
-  createdAt: new Date().toISOString(),
-};
-
-describe('UserCard', () => {
-  it('renders user information correctly', () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser },
-    });
-
-    expect(wrapper.text()).toContain('John Doe');
-    expect(wrapper.text()).toContain('test@example.com');
-  });
-
-  it('emits edit event when edit button is clicked', async () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser },
-    });
-
-    await wrapper.find('button:first-child').trigger('click');
-
-    expect(wrapper.emitted('edit')).toBeTruthy();
-    expect(wrapper.emitted('edit')![0]).toEqual([mockUser]);
-  });
-
-  it('emits delete event with user id', async () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser },
-    });
-
-    const deleteButton = wrapper.findAll('button')[1];
-    await deleteButton.trigger('click');
-
-    expect(wrapper.emitted('delete')).toBeTruthy();
-    expect(wrapper.emitted('delete')![0]).toEqual(['1']);
-  });
-
-  it('hides actions when showActions is false', () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser, showActions: false },
-    });
-
-    expect(wrapper.find('.user-card__actions').exists()).toBe(false);
-  });
-
-  it('toggles selection on click', async () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser },
-    });
-
-    await wrapper.trigger('click');
-
-    expect(wrapper.emitted('select')).toBeTruthy();
-    expect(wrapper.emitted('select')![0]).toEqual([mockUser, true]);
-    expect(wrapper.classes()).toContain('user-card--selected');
-  });
-});
-
-
-// src/stores/__tests__/user.store.spec.ts
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useUserStore } from '@/stores/user.store';
-import { authService } from '@/services/auth.service';
-
-vi.mock('@/services/auth.service', () => ({
-  authService: {
-    login: vi.fn(),
-    register: vi.fn(),
-    getCurrentUser: vi.fn(),
-  },
-}));
-
-describe('User Store', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    vi.clearAllMocks();
-  });
-
-  it('initial state is correct', () => {
-    const store = useUserStore();
-
-    expect(store.user).toBeNull();
-    expect(store.isAuthenticated).toBe(false);
-  });
-
-  it('login sets user and token', async () => {
-    const mockResponse = {
-      user: { id: '1', email: 'test@example.com', role: 'user' },
-      token: 'test-token',
-    };
-    vi.mocked(authService.login).mockResolvedValue(mockResponse);
-
-    const store = useUserStore();
-    await store.login({ email: 'test@example.com', password: 'password' });
-
-    expect(store.user).toEqual(mockResponse.user);
-    expect(store.token).toBe('test-token');
-    expect(store.isAuthenticated).toBe(true);
-  });
-
-  it('logout clears user and token', async () => {
-    const store = useUserStore();
-    store.user = { id: '1', email: 'test@example.com' } as any;
-    store.token = 'test-token';
-
-    store.logout();
-
-    expect(store.user).toBeNull();
-    expect(store.token).toBeNull();
-    expect(store.isAuthenticated).toBe(false);
-  });
-
-  it('handles login error', async () => {
-    vi.mocked(authService.login).mockRejectedValue(new Error('Invalid credentials'));
-
-    const store = useUserStore();
-
-    await expect(
-      store.login({ email: 'test@example.com', password: 'wrong' })
-    ).rejects.toThrow('Invalid credentials');
-
-    expect(store.error).toBe('Invalid credentials');
-  });
-});
-
-
-// src/composables/__tests__/usePagination.spec.ts
-import { describe, it, expect } from 'vitest';
-import { usePagination } from '@/composables/usePagination';
-
-describe('usePagination', () => {
-  it('initializes with default values', () => {
-    const { page, limit, total } = usePagination();
-
-    expect(page.value).toBe(1);
-    expect(limit.value).toBe(20);
-    expect(total.value).toBe(0);
-  });
-
-  it('calculates total pages correctly', () => {
-    const { totalPages, setTotal } = usePagination({ initialLimit: 10 });
-
-    setTotal(45);
-
-    expect(totalPages.value).toBe(5);
-  });
-
-  it('navigates pages correctly', () => {
-    const { page, nextPage, prevPage, setTotal } = usePagination();
-    setTotal(100);
-
-    nextPage();
-    expect(page.value).toBe(2);
-
-    nextPage();
-    expect(page.value).toBe(3);
-
-    prevPage();
-    expect(page.value).toBe(2);
-  });
-
-  it('prevents navigation beyond bounds', () => {
-    const { page, nextPage, prevPage, setTotal, limit } = usePagination();
-    setTotal(30);
-
-    prevPage();
-    expect(page.value).toBe(1);
-
-    page.value = 2;
-    nextPage();
-    expect(page.value).toBe(2);
-  });
-});
-```
-
-### 7. API Service Layer
-
-```typescript
-// src/services/api.service.ts
-import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
-import { useUserStore } from '@/stores/user.store';
-
-const api: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
-  timeout: 10000,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-// Request interceptor
-api.interceptors.request.use((config) => {
-  const userStore = useUserStore();
-  if (userStore.token) {
-    config.headers.Authorization = `Bearer ${userStore.token}`;
-  }
-  return config;
-});
-
-// Response interceptor
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      const userStore = useUserStore();
-      userStore.logout();
-      window.location.href = '/auth/login';
-    }
-    return Promise.reject(error);
-  }
-);
-
-export { api };
-
-
-// src/services/user.service.ts
-import { api } from './api.service';
-import type { User, CreateUserData, UpdateUserData, PaginatedResponse } from '@/types';
-
-interface UserFilters {
-  search?: string;
-  role?: string;
-  page?: number;
-  limit?: number;
-}
-
-export const userService = {
-  async getAll(filters: UserFilters = {}): Promise<PaginatedResponse<User>> {
-    const { data } = await api.get('/users', { params: filters });
-    return data;
-  },
-
-  async getById(id: string): Promise<User> {
-    const { data } = await api.get(`/users/${id}`);
-    return data;
-  },
-
-  async create(userData: CreateUserData): Promise<User> {
-    const { data } = await api.post('/users', userData);
-    return data;
-  },
-
-  async update(id: string, userData: UpdateUserData): Promise<User> {
-    const { data } = await api.patch(`/users/${id}`, userData);
-    return data;
-  },
-
-  async delete(id: string): Promise<void> {
-    await api.delete(`/users/${id}`);
-  },
-};
-```
-
-## Use Cases
-
-### Data Table with Pagination and Filters
-
-```vue
-<!-- src/views/UsersView.vue -->
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { usePagination } from '@/composables/usePagination';
-import { useAsync } from '@/composables/useAsync';
-import { userService } from '@/services/user.service';
-import UserCard from '@/components/UserCard.vue';
-import type { User } from '@/types';
-
-const search = ref('');
-const roleFilter = ref('');
-
-const {
-  page,
-  limit,
-  totalPages,
-  hasNextPage,
-  hasPrevPage,
-  nextPage,
-  prevPage,
-  setTotal,
-} = usePagination({ initialLimit: 10 });
-
-const { data: users, loading, execute: fetchUsers } = useAsync(
-  () => userService.getAll({
-    search: search.value,
-    role: roleFilter.value,
-    page: page.value,
-    limit: limit.value,
-  })
-);
-
-watch([search, roleFilter], () => {
-  page.value = 1;
-  fetchUsers();
-});
-
-watch(page, fetchUsers);
-
-watch(users, (response) => {
-  if (response) setTotal(response.total);
-});
-
-fetchUsers();
-
-function handleEdit(user: User) {
-  // Navigate to edit page
-}
-
-function handleDelete(userId: string) {
-  // Confirm and delete
-}
-</script>
-
-<template>
-  <div class="users-view">
-    <header class="users-view__header">
-      <h1>Users</h1>
-      <RouterLink :to="{ name: 'user-create' }" class="btn btn--primary">
-        Add User
-      </RouterLink>
-    </header>
-
-    <div class="users-view__filters">
-      <input
-        v-model="search"
-        type="search"
-        placeholder="Search users..."
-      />
-      <select v-model="roleFilter">
-        <option value="">All Roles</option>
-        <option value="admin">Admin</option>
-        <option value="user">User</option>
-        <option value="guest">Guest</option>
-      </select>
-    </div>
+## Best Practices
 
-    <div v-if="loading" class="loading">Loading...</div>
+| Do | Avoid |
+|----|-------|
+| Use Composition API with `<script setup>` | Options API in new code |
+| Type props/emits with interfaces | `any` types |
+| Create composables for shared logic | Duplicating reactive logic |
+| Use Pinia for global state | Overusing provide/inject |
+| Lazy load routes and components | Bundling everything upfront |
 
-    <div v-else-if="users?.data.length" class="users-view__list">
-      <UserCard
-        v-for="user in users.data"
-        :key="user.id"
-        :user="user"
-        @edit="handleEdit"
-        @delete="handleDelete"
-      />
-    </div>
+## Project Structure
 
-    <div v-else class="empty">No users found</div>
-
-    <div class="pagination">
-      <button :disabled="!hasPrevPage" @click="prevPage">Previous</button>
-      <span>Page {{ page }} of {{ totalPages }}</span>
-      <button :disabled="!hasNextPage" @click="nextPage">Next</button>
-    </div>
-  </div>
-</template>
 ```
-
-### Modal Component with Teleport
-
-```vue
-<!-- src/components/Modal.vue -->
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue';
-
-interface Props {
-  modelValue: boolean;
-  title?: string;
-  persistent?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  persistent: false,
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'close'): void;
-}>();
-
-const modalRef = ref<HTMLDivElement | null>(null);
-
-function close() {
-  emit('update:modelValue', false);
-  emit('close');
-}
-
-function handleBackdropClick() {
-  if (!props.persistent) close();
-}
-
-function handleEscape(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.modelValue && !props.persistent) {
-    close();
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', handleEscape);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscape);
-});
-
-watch(() => props.modelValue, (isOpen) => {
-  document.body.style.overflow = isOpen ? 'hidden' : '';
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="modelValue"
-        class="modal-backdrop"
-        @click="handleBackdropClick"
-      >
-        <div
-          ref="modalRef"
-          class="modal"
-          role="dialog"
-          aria-modal="true"
-          @click.stop
-        >
-          <header v-if="title || $slots.header" class="modal__header">
-            <slot name="header">
-              <h2>{{ title }}</h2>
-            </slot>
-            <button class="modal__close" @click="close">&times;</button>
-          </header>
-
-          <div class="modal__body">
-            <slot />
-          </div>
-
-          <footer v-if="$slots.footer" class="modal__footer">
-            <slot name="footer" :close="close" />
-          </footer>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped>
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: white;
-  border-radius: 8px;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow: auto;
-}
-
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-</style>
+src/
+├── App.vue
+├── main.ts
+├── components/         # Reusable components
+├── composables/        # Composition functions
+├── views/              # Page components
+├── stores/             # Pinia stores
+├── router/             # Route definitions
+├── services/           # API services
+└── types/              # TypeScript types
 ```
 
-## Best Practices
-
-### Do's
-
-- Use Composition API with `<script setup>`
-- Use TypeScript for type safety
-- Create composables for reusable logic
-- Use Pinia for global state management
-- Use Vue Router for navigation
-- Implement proper error boundaries
-- Write unit tests with Vitest
-- Use lazy loading for routes
-- Follow single responsibility principle
-- Use provide/inject for deep prop drilling
-
-### Don'ts
-
-- Don't use Options API in new code
-- Don't mutate props directly
-- Don't use `this` in Composition API
-- Don't overuse global state
-- Don't skip error handling
-- Don't ignore TypeScript errors
-- Don't use `any` type
-- Don't create memory leaks in watchers
-- Don't skip component testing
-- Don't mix template refs with reactive refs
-
-## References
-
-- [Vue 3 Documentation](https://vuejs.org/)
-- [Pinia Documentation](https://pinia.vuejs.org/)
-- [Vue Router Documentation](https://router.vuejs.org/)
-- [Vitest Documentation](https://vitest.dev/)
-- [VueUse Composables](https://vueuse.org/)
+For detailed examples and patterns, see reference files above.