devskill 2.0.2

package/skills/vue-options-api-best-practices/reference/ts-options-api-type-event-handlers.md

@@ -0,0 +1,202 @@
+---
+title: Explicitly Type Event Handlers in Options API Methods
+impact: MEDIUM
+impactDescription: Untyped event handler arguments default to 'any', missing type errors and losing IDE support for DOM event properties
+type: best-practice
+tags: [vue3, typescript, options-api, events, type-safety, DOM]
+---
+
+# Explicitly Type Event Handlers in Options API Methods
+
+**Impact: MEDIUM** - Without explicit type annotations, event handler parameters in Options API methods are typed as `any`. This defeats TypeScript's purpose, causing `noImplicitAny` errors in strict mode and losing type safety for DOM event properties.
+
+## Task Checklist
+
+- [ ] Always add type annotations to event handler method parameters
+- [ ] Use the correct DOM event type (Event, MouseEvent, KeyboardEvent, etc.)
+- [ ] Use type assertions for event.target when accessing element-specific properties
+- [ ] Enable `strict: true` in tsconfig.json to catch implicit any errors
+
+## The Problem
+
+```typescript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  methods: {
+    // BAD - 'event' is implicitly 'any'
+    handleClick(event) {
+      console.log(event.target.value)  // No type checking!
+    },
+
+    // BAD - Causes error with noImplicitAny
+    handleInput(event) {
+      // Error: Parameter 'event' implicitly has an 'any' type
+      this.searchTerm = event.target.value
+    }
+  }
+})
+```
+
+## The Solution: Explicit Event Types
+
+```typescript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      searchTerm: ''
+    }
+  },
+  methods: {
+    // GOOD - Explicit Event type
+    handleClick(event: MouseEvent) {
+      console.log(event.clientX, event.clientY)
+      // Cast target for element-specific properties
+      const button = event.target as HTMLButtonElement
+      console.log(button.disabled)
+    },
+
+    // GOOD - Explicit Event type with target assertion
+    handleInput(event: Event) {
+      const input = event.target as HTMLInputElement
+      this.searchTerm = input.value
+    },
+
+    // GOOD - KeyboardEvent for keyboard handlers
+    handleKeydown(event: KeyboardEvent) {
+      if (event.key === 'Enter') {
+        this.submit()
+      }
+    }
+  }
+})
+```
+
+## Common DOM Event Types
+
+| Event Type | Use For |
+|------------|---------|
+| `Event` | Generic events, custom events |
+| `MouseEvent` | click, dblclick, mouseenter, mouseleave, etc. |
+| `KeyboardEvent` | keydown, keyup, keypress |
+| `InputEvent` | input (modern browsers) |
+| `FocusEvent` | focus, blur |
+| `SubmitEvent` | form submit |
+| `DragEvent` | drag, drop, dragenter, dragover |
+| `TouchEvent` | touchstart, touchend, touchmove |
+| `WheelEvent` | wheel |
+
+## Type Assertions for event.target
+
+`event.target` is typed as `EventTarget | null`, which is too generic. Use type assertions:
+
+```typescript
+methods: {
+  // Input element
+  onInputChange(event: Event) {
+    const target = event.target as HTMLInputElement
+    console.log(target.value)
+    console.log(target.checked)  // for checkboxes
+  },
+
+  // Select element
+  onSelectChange(event: Event) {
+    const target = event.target as HTMLSelectElement
+    console.log(target.value)
+    console.log(target.selectedIndex)
+  },
+
+  // Form element
+  onFormSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    const form = event.target as HTMLFormElement
+    const formData = new FormData(form)
+  },
+
+  // Using currentTarget (often more reliable)
+  onButtonClick(event: MouseEvent) {
+    // currentTarget is the element the handler is attached to
+    const button = event.currentTarget as HTMLButtonElement
+    console.log(button.dataset.id)
+  }
+}
+```
+
+## Template Usage
+
+```vue
+<template>
+  <div>
+    <!-- Mouse events -->
+    <button @click="handleClick">Click me</button>
+
+    <!-- Input events -->
+    <input @input="handleInput" @keydown="handleKeydown" />
+
+    <!-- Form events -->
+    <form @submit.prevent="handleSubmit">
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+```
+
+## With Custom Component Events
+
+For custom component events, type based on what the component emits:
+
+```typescript
+methods: {
+  // Child emits: emit('update', { id: number, value: string })
+  handleChildUpdate(payload: { id: number; value: string }) {
+    console.log(payload.id, payload.value)
+  },
+
+  // Child emits primitive: emit('change', newValue)
+  handleValueChange(newValue: number) {
+    this.count = newValue
+  }
+}
+```
+
+## Generic Event Handler Pattern
+
+For reusable handlers:
+
+```typescript
+methods: {
+  // Generic handler that works with any input
+  updateField<T extends HTMLInputElement | HTMLTextAreaElement>(
+    field: keyof typeof this.$data,
+    event: Event
+  ) {
+    const target = event.target as T
+    ;(this as any)[field] = target.value
+  }
+}
+```
+
+## Why currentTarget vs target?
+
+- **target**: The element that triggered the event (could be a child)
+- **currentTarget**: The element the event listener is attached to
+
+```typescript
+methods: {
+  // If button contains <span>Click</span>, clicking the span:
+  // - event.target = span
+  // - event.currentTarget = button
+  handleClick(event: MouseEvent) {
+    // Use currentTarget when you want the handler's element
+    const button = event.currentTarget as HTMLButtonElement
+  }
+}
+```
+
+## Reference
+
+- [Vue.js TypeScript with Options API - Typing Event Handlers](https://vuejs.org/guide/typescript/options-api.html#typing-event-handlers)
+- [MDN Event Interface](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+- [TypeScript DOM Types](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts)

package/skills/vue-options-api-best-practices/reference/ts-options-api-use-definecomponent.md

@@ -0,0 +1,172 @@
+---
+title: Always Use defineComponent for TypeScript Type Inference
+impact: HIGH
+impactDescription: Without defineComponent, TypeScript cannot infer types for props, computed properties, methods, or the 'this' context in Options API components
+type: best-practice
+tags: [vue3, typescript, options-api, defineComponent, type-inference]
+---
+
+# Always Use defineComponent for TypeScript Type Inference
+
+**Impact: HIGH** - When using TypeScript with Vue's Options API, you MUST wrap your component definition with `defineComponent()` to enable proper type inference. Without it, `this` is typed as `any`, losing all TypeScript benefits.
+
+## Task Checklist
+
+- [ ] Always import and use `defineComponent` from 'vue' for Options API components
+- [ ] Enable `strict: true` (or at minimum `noImplicitThis: true`) in tsconfig.json
+- [ ] Consider migrating to Composition API with `<script setup>` for better type inference
+
+## The Problem
+
+Vue's Options API relies heavily on the `this` context, which TypeScript cannot automatically type without `defineComponent`:
+
+**BAD - No type inference:**
+```typescript
+// No defineComponent - 'this' is typed as 'any'
+export default {
+  props: {
+    message: String
+  },
+  computed: {
+    // 'this' is 'any' - no type checking!
+    greeting() {
+      return this.message + '!'  // No type inference
+    }
+  },
+  methods: {
+    // 'this' is 'any' - mistakes won't be caught
+    handleClick() {
+      console.log(this.mesage)  // Typo not caught!
+    }
+  }
+}
+```
+
+**GOOD - Full type inference:**
+```typescript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      localState: ''
+    }
+  },
+  computed: {
+    // 'this.message' is typed as string
+    // 'this.count' is typed as number
+    greeting(): string {
+      return this.message + '!'
+    }
+  },
+  methods: {
+    handleClick() {
+      console.log(this.mesage)  // Error: Property 'mesage' does not exist
+      console.log(this.message)  // OK: string
+    }
+  }
+})
+```
+
+## What defineComponent Enables
+
+1. **Props type inference**: Vue infers types from `type`, `required`, and `default`
+2. **`this` context typing**: All options (data, computed, methods) are properly typed
+3. **Cross-option references**: Access data in methods, computed properties, etc. with full types
+4. **IDE autocompletion**: Get suggestions for all component properties and methods
+
+## TypeScript Configuration Required
+
+For proper `this` type checking, enable strict mode or at minimum `noImplicitThis`:
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "strict": true,
+    // Or at minimum:
+    "noImplicitThis": true
+  }
+}
+```
+
+Without this, TypeScript allows implicit `any` for `this`, defeating the purpose of using `defineComponent`.
+
+## defineComponent is a No-Op at Runtime
+
+`defineComponent` does nothing at runtime - it simply returns the object you pass to it. Its only purpose is to help TypeScript infer types:
+
+```typescript
+// At runtime, this is equivalent to:
+// export default { props: { ... }, ... }
+export default defineComponent({
+  props: { /* ... */ }
+})
+```
+
+This means there's zero runtime cost to using `defineComponent`.
+
+## When to Use defineComponent vs script setup
+
+| Approach | Use Case |
+|----------|----------|
+| `defineComponent` | Options API, Class-based migration, JSX/TSX components |
+| `<script setup>` | New components, better type inference, less boilerplate |
+
+**Official recommendation**: "While Vue does support TypeScript usage with Options API, it is recommended to use Vue with TypeScript via Composition API as it offers simpler, more efficient and more robust type inference."
+
+## With Vue Single-File Components
+
+```vue
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'MyComponent',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    upperTitle(): string {
+      return this.title.toUpperCase()
+    }
+  }
+})
+</script>
+
+<template>
+  <h1>{{ upperTitle }}</h1>
+</template>
+```
+
+## Common Mistake: Missing defineComponent
+
+This often happens when copying JavaScript components to TypeScript:
+
+```typescript
+// Copied from JS - MISSING defineComponent!
+export default {
+  name: 'MyComponent',
+  // ... entire component without type inference
+}
+```
+
+Always add `defineComponent` when converting to TypeScript.
+
+## Reference
+
+- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
+- [Vue.js Using Vue with TypeScript](https://vuejs.org/guide/typescript/overview.html)

package/skills/vue-options-api-best-practices/reference/ts-strict-mode-options-api.md

@@ -0,0 +1,197 @@
+---
+title: Enable strict Mode for Proper Options API TypeScript Support
+impact: HIGH
+impactDescription: Without strict mode, 'this' in Options API components is typed as 'any', losing all type safety
+type: gotcha
+tags: [typescript, options-api, tsconfig, this-typing, configuration]
+---
+
+# Enable strict Mode for Proper Options API TypeScript Support
+
+**Impact: HIGH** - Without `strict: true` (or at minimum `noImplicitThis: true`) in your tsconfig.json, the `this` context in Options API components is typed as `any`. This silently disables type checking for all property access on component instances.
+
+## Task Checklist
+
+- [ ] Enable `strict: true` in tsconfig.json (recommended)
+- [ ] Or enable `noImplicitThis: true` at minimum
+- [ ] Wrap components with `defineComponent()` for proper inference
+- [ ] Verify type errors appear when accessing non-existent properties
+
+## The Problem
+
+TypeScript's default behavior without strict mode allows implicit `any` typing, which defeats the purpose of using TypeScript with Vue's Options API.
+
+**tsconfig.json without strict mode:**
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020"
+    // No strict mode - this is DANGEROUS
+  }
+}
+```
+
+**Component with hidden type errors:**
+```typescript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      count: 0,
+      message: 'Hello'
+    }
+  },
+  methods: {
+    increment() {
+      // Without strict mode, these errors are SILENT:
+      this.cont++          // Typo: should be 'count'
+      this.nonExistent     // Property doesn't exist
+      this.message.toFixed() // Wrong method for string
+    }
+  }
+})
+```
+
+All of the above errors compile successfully without strict mode because `this` is implicitly `any`.
+
+## Correct Configuration
+
+**Recommended tsconfig.json:**
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "isolatedModules": true
+  }
+}
+```
+
+**Minimum for Options API type safety:**
+```json
+{
+  "compilerOptions": {
+    "noImplicitThis": true
+  }
+}
+```
+
+## What strict Mode Enables
+
+The `strict` flag is a shorthand for enabling multiple type-checking options:
+
+| Option | Effect |
+|--------|--------|
+| `noImplicitThis` | Errors on `this` with implicit `any` type |
+| `noImplicitAny` | Errors on expressions with implicit `any` type |
+| `strictNullChecks` | null and undefined are distinct types |
+| `strictFunctionTypes` | Stricter function parameter checking |
+| `strictPropertyInitialization` | Class properties must be initialized |
+| `strictBindCallApply` | Stricter bind, call, apply typing |
+| `alwaysStrict` | Emits "use strict" in output |
+
+## Correct Component with Proper Typing
+
+```typescript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      count: 0,
+      message: 'Hello'
+    }
+  },
+  computed: {
+    doubleCount(): number {
+      return this.count * 2  // 'this.count' is typed as number
+    }
+  },
+  methods: {
+    increment() {
+      this.count++           // Type-safe: count is number
+      // this.cont++         // ERROR: Property 'cont' does not exist
+    },
+    greet(name: string) {
+      return `${this.message}, ${name}!`  // Type-safe
+    }
+  }
+})
+```
+
+## Common Errors After Enabling Strict Mode
+
+### Error: Property 'xxx' does not exist
+
+```typescript
+// Before: worked silently
+this.unknownProp
+
+// After: TypeScript error
+// Property 'unknownProp' does not exist on type 'ComponentPublicInstance<...>'
+```
+
+Fix by adding the property to `data()` or declaring it properly.
+
+### Error: Object is possibly 'undefined'
+
+```typescript
+methods: {
+  getFirst() {
+    const items = this.items
+    // Error: Object is possibly 'undefined'
+    return items[0].name
+  }
+}
+```
+
+Fix with proper null checks:
+```typescript
+methods: {
+  getFirst() {
+    return this.items?.[0]?.name
+  }
+}
+```
+
+## Important: defineComponent is Required
+
+Even with strict mode, you must use `defineComponent()` to enable proper type inference:
+
+```typescript
+// BAD - No type inference for 'this'
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    increment() {
+      this.count++  // 'this' is any even with strict mode!
+    }
+  }
+}
+
+// GOOD - Full type inference
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    increment() {
+      this.count++  // 'this.count' is properly typed as number
+    }
+  }
+})
+```
+
+## Reference
+
+- [Vue.js TypeScript Overview - tsconfig.json](https://vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json)
+- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
+- [TypeScript strict Mode](https://www.typescriptlang.org/tsconfig#strict)

package/skills/vue-pinia-best-practices/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hyf0, SerKo <https://github.com/serkodev>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/vue-pinia-best-practices/SKILL.md

@@ -0,0 +1,21 @@
+---
+name: vue-pinia-best-practices
+description: "Pinia stores, state management patterns, store setup, and reactivity with stores."
+version: 1.0.0
+license: MIT
+author: github.com/vuejs-ai
+---
+
+Pinia best practices, common gotchas, and state management patterns.
+
+### Store Setup
+- Getting "getActivePinia was called" error at startup → See [pinia-no-active-pinia-error](reference/pinia-no-active-pinia-error.md)
+- Setup stores missing state in DevTools or SSR → See [pinia-setup-store-return-all-state](reference/pinia-setup-store-return-all-state.md)
+
+### Reactivity
+- Store destructuring stops updating UI reactively → See [pinia-store-destructuring-breaks-reactivity](reference/pinia-store-destructuring-breaks-reactivity.md)
+- Store methods lose context in template calls → See [store-method-binding-parentheses](reference/store-method-binding-parentheses.md)
+
+### State Patterns
+- Filters reset on refresh or can't be shared → See [state-url-for-ephemeral-filters](reference/state-url-for-ephemeral-filters.md)
+- Building production app without DevTools or conventions → See [state-use-pinia-for-large-apps](reference/state-use-pinia-for-large-apps.md)

package/skills/vue-pinia-best-practices/SYNC.md

@@ -0,0 +1,5 @@
+# Sync Info
+
+- **Source:** `vendor/vuejs-ai/skills/vue-pinia-best-practices`
+- **Git SHA:** `f3dd1bf4d3ac78331bdc903e4519d561c538ca6a`
+- **Synced:** 2026-03-24