mdk-skills 2.2.0 → 2.2.2

package/.claude/backups/20260510.150310/skills/vue/references/testing.md

@@ -0,0 +1,294 @@
+# Vue Testing
+
+Test patterns for Vue 3 components, composables, and utilities.
+
+## Quick Reference
+
+| Test Type        | Pattern                              |
+| ---------------- | ------------------------------------ |
+| Component        | `mount(Component, { props, slots })` |
+| User interaction | `await wrapper.trigger('click')`     |
+| Emitted events   | `wrapper.emitted('update')`          |
+| Composable       | Call directly, test return values    |
+| Utils            | Pure function testing (easiest)      |
+
+## Stack
+
+- **Vitest** - test runner
+- **@vue/test-utils** - component mounting, interaction
+- **@testing-library/vue** - user-centric alternative
+- **happy-dom / jsdom** - DOM environment
+
+## File Location
+
+Colocate tests with code:
+
+```
+Button.vue → Button.spec.ts
+useAuth.ts → useAuth.spec.ts
+formatters.ts → formatters.spec.ts
+```
+
+## Component Tests
+
+### Basic
+
+```ts
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+it('renders slot', () => {
+  const wrapper = mount(Button, {
+    slots: { default: 'Click me' }
+  })
+  expect(wrapper.text()).toBe('Click me')
+})
+
+it('emits on click', async () => {
+  const wrapper = mount(Button)
+  await wrapper.trigger('click')
+  expect(wrapper.emitted('click')).toHaveLength(1)
+})
+```
+
+### Props
+
+```ts
+it('applies variant class', () => {
+  const wrapper = mount(Button, {
+    props: { variant: 'primary' }
+  })
+  expect(wrapper.classes()).toContain('btn-primary')
+})
+```
+
+### Emits
+
+```ts
+it('emits update with payload', async () => {
+  const wrapper = mount(Input)
+  await wrapper.find('input').setValue('new value')
+  expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
+})
+```
+
+### Slots
+
+```ts
+it('renders named slots', () => {
+  const wrapper = mount(Card, {
+    slots: {
+      header: '<h1>Title</h1>',
+      default: '<p>Content</p>'
+    }
+  })
+  expect(wrapper.html()).toContain('<h1>Title</h1>')
+})
+```
+
+## Composable Tests
+
+Call directly, no mounting needed:
+
+```ts
+import { useCounter } from './useCounter'
+
+it('increments count', () => {
+  const { count, increment } = useCounter(0)
+  expect(count.value).toBe(0)
+  increment()
+  expect(count.value).toBe(1)
+})
+
+it('resets to initial', () => {
+  const { count, increment, reset } = useCounter(5)
+  increment()
+  increment()
+  expect(count.value).toBe(7)
+  reset()
+  expect(count.value).toBe(5)
+})
+```
+
+## Utils Tests
+
+Easiest - pure functions:
+
+```ts
+import { formatCurrency, slugify } from './formatters'
+
+describe('formatCurrency', () => {
+  it('formats USD', () => {
+    expect(formatCurrency(10.5)).toBe('$10.50')
+  })
+})
+
+describe('slugify', () => {
+  it('converts to lowercase', () => {
+    expect(slugify('Hello World')).toBe('hello-world')
+  })
+
+  it('removes special chars', () => {
+    expect(slugify('Hello! World?')).toBe('hello-world')
+  })
+})
+```
+
+## Mocking
+
+**Composables:**
+
+```ts
+import { vi } from 'vitest'
+
+vi.mock('./useAuth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: 1, name: 'Test' },
+    isAuthenticated: true
+  }))
+}))
+```
+
+**API calls:**
+
+```ts
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({ data: [] })
+  })
+)
+```
+
+## Router Mocking
+
+Mock `useRoute` and `useRouter` for component tests:
+
+```ts
+import { vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(() => ({
+    params: { id: '123' },
+    query: { filter: 'active' },
+    path: '/users/123',
+  })),
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+  })),
+}))
+
+it('uses route params', () => {
+  const wrapper = mount(UserPage)
+  expect(wrapper.text()).toContain('123')
+})
+```
+
+**Dynamic route mocking per test:**
+
+```ts
+import { useRoute } from 'vue-router'
+
+it('handles different routes', () => {
+  vi.mocked(useRoute).mockReturnValue({
+    params: { id: '456' },
+  } as any)
+
+  const wrapper = mount(UserPage)
+  expect(wrapper.text()).toContain('456')
+})
+```
+
+## Suspense and Teleport
+
+**Testing async components with Suspense:**
+
+```ts
+import { flushPromises, mount } from '@vue/test-utils'
+
+it('renders async content', async () => {
+  const wrapper = mount(AsyncComponent, {
+    global: {
+      stubs: { Suspense: false }, // Don't stub Suspense
+    },
+  })
+
+  // Wait for async setup to complete
+  await flushPromises()
+
+  expect(wrapper.text()).toContain('Loaded content')
+})
+```
+
+**Testing Teleport:**
+
+```ts
+it('teleports modal content', () => {
+  const wrapper = mount(Modal, {
+    global: {
+      stubs: {
+        teleport: true, // Stub teleport to render inline
+      },
+    },
+  })
+
+  expect(wrapper.text()).toContain('Modal content')
+})
+```
+
+**Access teleported content:**
+
+```ts
+it('finds teleported content', () => {
+  document.body.innerHTML = '<div id="modal-target"></div>'
+
+  mount(Modal, { props: { open: true } })
+
+  // Content teleports to #modal-target
+  expect(document.body.innerHTML).toContain('Modal content')
+})
+```
+
+## Best Practices
+
+**Do:**
+
+- Test behavior (what user sees/does), not implementation
+- Arrange-Act-Assert structure
+- One assertion per test
+- Descriptive test names
+- Mock external dependencies
+
+**Don't:**
+
+- Test Vue internals (reactivity)
+- Test third-party libraries
+- Test trivial getters/setters
+- Test implementation details
+
+## What to Test
+
+**Test:**
+
+- User interactions (clicks, inputs)
+- Conditional rendering
+- Props validation, emitted events
+- Computed values, business logic
+
+**Skip:**
+
+- Vue internals, third-party libs
+- Trivial getters/setters
+- Implementation details
+
+## Running
+
+```bash
+pnpm test                          # all
+pnpm exec vitest Button.spec.ts   # specific
+pnpm exec vitest --watch           # watch
+pnpm test --coverage               # coverage
+```
+
+**Docs:** [vitest.dev](https://vitest.dev/) · [test-utils.vuejs.org](https://test-utils.vuejs.org/)

package/.claude/backups/20260510.150310/skills/vue/references/typescript.md

@@ -0,0 +1,172 @@
+# Vue TypeScript Patterns
+
+TypeScript-specific patterns for Vue 3 development.
+
+## Provide/Inject Types
+
+Use `InjectionKey` for type-safe dependency injection:
+
+```ts
+import type { InjectionKey } from 'vue'
+import type { User } from './types'
+
+// Define typed key
+export const UserKey: InjectionKey<User> = Symbol('user')
+
+// Provider component
+const user = ref<User>({ id: 1, name: 'John' })
+provide(UserKey, user)
+
+// Consumer component
+const user = inject(UserKey) // Ref<User> | undefined
+const user = inject(UserKey)! // Ref<User> (assert non-null)
+```
+
+**With default value:**
+
+```ts
+const user = inject(UserKey, ref({ id: 0, name: 'Guest' }))
+// Type: Ref<User> (no undefined)
+```
+
+## vue-tsc Strict Templates
+
+Enable stricter template type checking:
+
+```bash
+# Check templates with strict mode
+vue-tsc --noEmit --strict-templates
+```
+
+Catches template errors like:
+
+- Accessing non-existent properties
+- Wrong prop types
+- Missing required props
+
+## tsconfig Settings
+
+**Required for Vue 3:**
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "jsx": "preserve"
+  }
+}
+```
+
+**`moduleResolution: "bundler"`** - Matches Vite/webpack resolution. Avoids `.js` extension issues.
+
+**`verbatimModuleSyntax: true`** - Enforces explicit `type` imports:
+
+```ts
+// ❌ May cause issues with bundlers
+import { User } from './types'
+
+// ✅ Explicit type import
+import type { User } from './types'
+```
+
+## Component Type Helpers
+
+**Extract props type from component:**
+
+```ts
+import type { ComponentProps, ComponentSlots, ComponentEmits } from 'vue-component-type-helpers'
+import MyComponent from './MyComponent.vue'
+
+type Props = ComponentProps<typeof MyComponent>
+type Slots = ComponentSlots<typeof MyComponent>
+type Emits = ComponentEmits<typeof MyComponent>
+```
+
+**Extract exposed methods:**
+
+```ts
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+type Exposed = ComponentExposed<typeof MyComponent>
+```
+
+## Generic Components
+
+Define generic components with typed slots:
+
+```vue
+<script setup lang="ts" generic="T extends { id: string }">
+defineProps<{
+  items: T[]
+}>()
+
+defineSlots<{
+  default: (props: { item: T }) => any
+}>()
+</script>
+
+<template>
+  <div v-for="item in items" :key="item.id">
+    <slot :item="item" />
+  </div>
+</template>
+```
+
+## Ref Type Narrowing
+
+Handle ref type narrowing correctly:
+
+```ts
+const maybeUser = ref<User | null>(null)
+
+// ❌ TypeScript still sees User | null
+if (maybeUser.value) {
+  maybeUser.value.name // Error: possibly null
+}
+
+// ✅ Use computed or extract value
+const userName = computed(() => maybeUser.value?.name ?? 'Guest')
+
+// ✅ Or guard in same expression
+maybeUser.value && maybeUser.value.name
+```
+
+## Event Handler Types
+
+Type event handlers correctly:
+
+```ts
+// DOM events
+const onClick = (e: MouseEvent) => { ... }
+const onInput = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  console.log(target.value)
+}
+
+// Component emits
+const onUpdate = (value: string) => { ... }
+```
+
+## Common Mistakes
+
+**Forgetting to import types explicitly:**
+
+```ts
+// ❌ Runtime import of type-only
+import { User } from './types'
+
+// ✅ Type-only import
+import type { User } from './types'
+```
+
+**Not using `as const` for literal types:**
+
+```ts
+// ❌ Type is string[]
+const variants = ['primary', 'secondary']
+
+// ✅ Type is readonly ['primary', 'secondary']
+const variants = ['primary', 'secondary'] as const
+```

package/.claude/backups/20260510.150310/skills/vue/references/utils-client.md

@@ -0,0 +1,156 @@
+# Client Utilities
+
+Pure functions for formatting, validation, transformation, and parsing.
+
+## Quick Reference
+
+| Category     | Examples                                      |
+| ------------ | --------------------------------------------- |
+| Formatters   | `formatCurrency`, `formatDate`, `formatBytes` |
+| Validators   | `isValidEmail`, `isValidUrl`, `isValidPhone`  |
+| Transformers | `slugify`, `truncate`, `capitalize`           |
+| Parsers      | `parseQuery`, `parseJSON`, `parseDate`        |
+
+## Rules
+
+**Pure functions:**
+
+- Same input → same output
+- No side effects
+- No external state mutation
+- No API calls, no refs, no reactive
+
+**When NOT to use utils:**
+
+- Stateful logic → use composables
+- Vue-specific → use composables
+- Component logic → keep in component
+- API calls → use queries
+
+## Structure
+
+```ts
+// utils/formatters.ts
+export function formatCurrency(amount: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount)
+}
+
+export function formatRelativeTime(date: Date): string {
+  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+  const diff = date.getTime() - Date.now()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  return rtf.format(days, 'day')
+}
+```
+
+**Naming:** Descriptive verbs (`formatCurrency`, `validateEmail`, `parseQuery`)
+**Organization:** Group by category (`formatters.ts`, `validators.ts`)
+**Exports:** Named exports only
+
+## Examples by Category
+
+**Formatters:**
+
+```ts
+// utils/formatters.ts
+export function formatBytes(bytes: number): string { ... }
+export function formatPhone(phone: string): string { ... }
+```
+
+**Validators:**
+
+```ts
+// utils/validators.ts
+export function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(email)
+}
+
+export function isValidUrl(url: string): boolean {
+  try { new URL(url); return true }
+  catch { return false }
+}
+```
+
+**Transformers:**
+
+```ts
+// utils/transformers.ts
+export function slugify(text: string): string {
+  return text.toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+}
+
+export function truncate(text: string, length: number): string {
+  return text.length > length ? `${text.slice(0, length)}...` : text
+}
+```
+
+**Parsers:**
+
+```ts
+// utils/parsers.ts
+export function parseQuery(search: string): Record<string, string> {
+  return Object.fromEntries(new URLSearchParams(search))
+}
+
+export function parseJSON<T>(json: string, fallback: T): T {
+  try { return JSON.parse(json) }
+  catch { return fallback }
+}
+```
+
+## Common Mistakes
+
+**Side effects (not pure):**
+
+```ts
+// ❌ Wrong - mutates external state
+let count = 0
+export function increment() {
+  count++
+  return count
+}
+
+// ✅ Correct - pure
+export function add(a: number, b: number): number {
+  return a + b
+}
+```
+
+**Using utils for stateful logic:**
+
+```ts
+// ❌ Wrong - should be composable
+export function useCounter() { ... }
+
+// ✅ Correct - pure transformation
+export function formatCount(count: number): string { ... }
+```
+
+## Organization
+
+**Flat for small projects:**
+
+```
+utils/
+├── formatters.ts
+├── validators.ts
+└── transformers.ts
+```
+
+**Nested for large projects:**
+
+```
+utils/
+├── formatters/
+│   ├── date.ts
+│   ├── currency.ts
+│   └── index.ts
+└── validators/
+    ├── email.ts
+    └── index.ts
+```