devskill 2.0.2

package/skills/vue-options/references/state.md

@@ -0,0 +1,115 @@
+---
+name: state
+description: Vue Options API state options — data, computed, methods, watch.
+---
+
+# State: data, computed, methods, watch
+
+## data
+
+Must be a **function** returning an object. This ensures each component instance gets its own reactive state.
+
+```js
+export default {
+  data() {
+    return {
+      message: 'Hello',
+      count: 0,
+      user: null
+    }
+  }
+}
+```
+
+> ❌ Never use a plain object — it would be shared across all instances.
+
+## computed
+
+Derived reactive values. **Cached** until dependencies change — use instead of methods for template expressions.
+
+```js
+export default {
+  data() {
+    return { firstName: 'John', lastName: 'Doe' }
+  },
+  computed: {
+    fullName() {
+      return `${this.firstName} ${this.lastName}`
+    },
+    // Writable computed
+    fullNameWritable: {
+      get() {
+        return `${this.firstName} ${this.lastName}`
+      },
+      set(value) {
+        ;[this.firstName, this.lastName] = value.split(' ')
+      }
+    }
+  }
+}
+```
+
+## methods
+
+Functions for event handlers and component logic. Not cached — called fresh every time.
+
+```js
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    increment() {
+      this.count++
+    },
+    async fetchUser(id) {
+      this.user = await api.getUser(id)
+    }
+  }
+}
+```
+
+> Do **not** use arrow functions for methods — they break `this` binding.
+
+## watch
+
+Run side effects when reactive data changes. Use for API calls, logging, or syncing external state.
+
+```js
+export default {
+  data() {
+    return { searchQuery: '', results: [] }
+  },
+  watch: {
+    // Simple watcher
+    searchQuery(newVal, oldVal) {
+      this.fetchResults(newVal)
+    },
+    // Deep watcher (watches nested object changes)
+    user: {
+      handler(newVal) {
+        console.log('User changed:', newVal)
+      },
+      deep: true
+    },
+    // Immediate watcher (runs on mount too)
+    userId: {
+      handler(id) {
+        this.fetchUser(id)
+      },
+      immediate: true
+    }
+  }
+}
+```
+
+| Option | Purpose |
+|--------|---------|
+| `deep: true` | Watch nested object properties |
+| `immediate: true` | Run handler immediately on mount |
+| `flush: 'post'` | Run after DOM update |
+
+<!--
+Source references:
+- https://vuejs.org/api/options-state.html
+-->

package/skills/vue-options-api-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-options-api-best-practices/SKILL.md

@@ -0,0 +1,23 @@
+---
+name: vue-options-api-best-practices
+description: "Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only."
+version: 2.0.0
+license: MIT
+author: github.com/vuejs-ai
+---
+
+Vue.js Options API best practices, TypeScript integration, and common gotchas.
+
+### TypeScript
+- Need to enable TypeScript type inference for component properties → See [ts-options-api-use-definecomponent](reference/ts-options-api-use-definecomponent.md)
+- Enabling type safety for Options API this context → See [ts-strict-mode-options-api](reference/ts-strict-mode-options-api.md)
+- Using old TypeScript versions with prop validators → See [ts-options-api-arrow-functions-validators](reference/ts-options-api-arrow-functions-validators.md)
+- Event handler parameters need proper type safety → See [ts-options-api-type-event-handlers](reference/ts-options-api-type-event-handlers.md)
+- Need to type object or array props with interfaces → See [ts-options-api-proptype-complex-types](reference/ts-options-api-proptype-complex-types.md)
+- Injected properties missing TypeScript types completely → See [ts-options-api-provide-inject-limitations](reference/ts-options-api-provide-inject-limitations.md)
+- Complex computed properties lack clear type documentation → See [ts-options-api-computed-return-types](reference/ts-options-api-computed-return-types.md)
+
+### Methods & Lifecycle
+- Methods aren't binding to component instance context → See [no-arrow-functions-in-methods](reference/no-arrow-functions-in-methods.md)
+- Lifecycle hooks losing access to component data → See [no-arrow-functions-in-lifecycle-hooks](reference/no-arrow-functions-in-lifecycle-hooks.md)
+- Debounced functions sharing state across component instances → See [stateful-methods-lifecycle](reference/stateful-methods-lifecycle.md)

package/skills/vue-options-api-best-practices/SYNC.md

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

package/skills/vue-options-api-best-practices/reference/no-arrow-functions-in-lifecycle-hooks.md

@@ -0,0 +1,95 @@
+---
+title: Never Use Arrow Functions for Options API Lifecycle Hooks
+impact: HIGH
+impactDescription: Arrow functions in lifecycle hooks break `this` binding to component instance
+type: capability
+tags: [vue3, vue2, options-api, lifecycle, arrow-functions, this-binding, mounted, created]
+---
+
+# Never Use Arrow Functions for Options API Lifecycle Hooks
+
+**Impact: HIGH** - Using arrow functions for lifecycle hooks in the Options API prevents Vue from binding `this` to the component instance. This causes `this` to be `undefined` or reference the wrong context, leading to runtime errors when accessing component data, methods, or other properties.
+
+Arrow functions lexically bind `this` from their enclosing scope. Vue's Options API lifecycle hooks (created, mounted, updated, unmounted, etc.) require regular functions so Vue can set `this` to the component instance at runtime.
+
+## Task Checklist
+
+- [ ] Always use regular function syntax for Options API lifecycle hooks
+- [ ] Use ES6 method shorthand (preferred) for cleaner code
+- [ ] Arrow functions ARE allowed inside lifecycle hooks for callbacks
+
+**Incorrect:**
+```javascript
+export default {
+  data() {
+    return { message: 'Hello' }
+  },
+  // WRONG: Arrow function - `this` will be undefined
+  created: () => {
+    console.log(this.message) // Error: Cannot read property 'message' of undefined
+  },
+  // WRONG: Arrow function for mounted
+  mounted: () => {
+    this.initializePlugin() // Error: this.initializePlugin is not a function
+  },
+  // WRONG: Arrow function for beforeUnmount
+  beforeUnmount: () => {
+    this.cleanup() // Will fail!
+  },
+  methods: {
+    initializePlugin() { /* ... */ },
+    cleanup() { /* ... */ }
+  }
+}
+```
+
+**Correct:**
+```javascript
+export default {
+  data() {
+    return { message: 'Hello' }
+  },
+  // CORRECT: ES6 method shorthand (preferred)
+  created() {
+    console.log(this.message) // Works! this refers to component instance
+  },
+  // CORRECT: Regular function expression
+  mounted: function() {
+    this.initializePlugin() // Works!
+  },
+  // CORRECT: Method shorthand
+  beforeUnmount() {
+    this.cleanup() // Works!
+  },
+  methods: {
+    initializePlugin() {
+      // Arrow functions ARE fine for callbacks inside lifecycle hooks
+      this.$nextTick(() => {
+        this.isReady = true // Arrow inherits `this` from mounted
+      })
+    },
+    cleanup() { /* ... */ }
+  }
+}
+```
+
+## All Affected Lifecycle Hooks
+
+The following Options API hooks must NOT use arrow functions:
+- `beforeCreate`
+- `created`
+- `beforeMount`
+- `mounted`
+- `beforeUpdate`
+- `updated`
+- `beforeUnmount` (Vue 3) / `beforeDestroy` (Vue 2)
+- `unmounted` (Vue 3) / `destroyed` (Vue 2)
+- `activated`
+- `deactivated`
+- `errorCaptured`
+- `renderTracked`
+- `renderTriggered`
+
+## Reference
+- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
+- [Vue.js Options Lifecycle](https://vuejs.org/api/options-lifecycle.html)

package/skills/vue-options-api-best-practices/reference/no-arrow-functions-in-methods.md

@@ -0,0 +1,68 @@
+---
+title: Never Use Arrow Functions in Methods Option
+impact: HIGH
+impactDescription: Arrow functions prevent Vue from binding `this` to the component instance
+type: capability
+tags: [vue3, vue2, options-api, methods, this-binding]
+---
+
+# Never Use Arrow Functions in Methods Option
+
+**Impact: HIGH** - Using arrow functions in the `methods` option causes `this` to be `undefined` or the wrong context, leading to runtime errors when trying to access component data, computed properties, or other methods.
+
+Arrow functions lexically bind `this` from their enclosing scope, not from the object they're defined on. Vue's `methods` option requires regular functions so Vue can bind `this` to the component instance.
+
+## Task Checklist
+
+- [ ] Always use regular function syntax for methods in Options API
+- [ ] If using ES6 shorthand, use method shorthand (preferred)
+- [ ] Arrow functions ARE allowed inside methods for callbacks
+
+**Incorrect:**
+```javascript
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    // WRONG: Arrow function - `this` will be undefined
+    increment: () => {
+      this.count++ // Error: Cannot read property 'count' of undefined
+    },
+    // WRONG: Arrow function assigned to property
+    decrement: () => {
+      this.count--
+    }
+  }
+}
+```
+
+**Correct:**
+```javascript
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    // CORRECT: ES6 method shorthand (preferred)
+    increment() {
+      this.count++ // Works! this refers to component instance
+    },
+    // CORRECT: Traditional function expression
+    decrement: function() {
+      this.count--
+    },
+    // Arrow functions ARE fine for callbacks INSIDE methods
+    fetchData() {
+      fetch('/api/data')
+        .then(response => response.json())
+        .then(data => {
+          this.data = data // Arrow function inherits `this` from fetchData
+        })
+    }
+  }
+}
+```
+
+## Reference
+- [Vue.js Methods - Avoid Arrow Functions](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#methods)

package/skills/vue-options-api-best-practices/reference/stateful-methods-lifecycle.md

@@ -0,0 +1,61 @@
+---
+title: Create Stateful Methods in Lifecycle Hooks
+impact: MEDIUM
+impactDescription: Stateful functions like debounce/throttle in methods are shared across all component instances
+type: capability
+tags: [vue3, options-api, debounce, throttle, lifecycle, cleanup]
+---
+
+# Create Stateful Methods in Lifecycle Hooks
+
+**Impact: MEDIUM** - If you define debounced, throttled, or other stateful functions directly in the `methods` option, all instances of the component share the same function state. This causes race conditions and bugs in lists of components.
+
+When a component is reused (e.g., in v-for), each instance needs its own debounced/throttled function. Define these in the `created()` hook and clean them up in `unmounted()` to prevent memory leaks.
+
+## Task Checklist
+
+- [ ] Never define debounced/throttled functions directly in `methods`
+- [ ] Create stateful functions in `created()` lifecycle hook
+- [ ] Always clean up (cancel timers) in `unmounted()`
+
+**Incorrect:**
+```javascript
+import { debounce } from 'lodash-es'
+
+export default {
+  methods: {
+    // WRONG: All component instances share this debounced function!
+    // If used in a v-for, clicking one button affects all instances
+    handleClick: debounce(function() {
+      this.performSearch()
+    }, 500)
+  }
+}
+```
+
+**Correct:**
+```javascript
+import { debounce } from 'lodash-es'
+
+export default {
+  created() {
+    // CORRECT: Each instance gets its own debounced function
+    this.debouncedSearch = debounce(this.performSearch, 500)
+  },
+  unmounted() {
+    // CORRECT: Clean up to prevent memory leaks and stale calls
+    this.debouncedSearch.cancel()
+  },
+  methods: {
+    handleClick() {
+      this.debouncedSearch()
+    },
+    performSearch() {
+      // Actual search logic
+    }
+  }
+}
+```
+
+## Reference
+- [Vue.js Reactivity Fundamentals - Stateful Methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods)

package/skills/vue-options-api-best-practices/reference/ts-options-api-arrow-functions-validators.md

@@ -0,0 +1,141 @@
+---
+title: Use Arrow Functions for Prop Validators in TypeScript < 4.7
+impact: HIGH
+impactDescription: Regular functions in prop validators can break type inference for the entire component in TypeScript versions before 4.7
+type: gotcha
+tags: [vue3, typescript, options-api, props, type-inference, defineComponent, legacy]
+---
+
+# Use Arrow Functions for Prop Validators in TypeScript < 4.7
+
+> **LEGACY CONCERN:** This issue was fixed in TypeScript 4.7 (released May 2022). Most modern projects using TypeScript 4.7+ do not need this workaround. If you're starting a new project or have upgraded TypeScript recently, you can safely use regular functions in prop validators. This rule is primarily relevant for legacy codebases still running TypeScript < 4.7.
+
+**Impact: HIGH** - If your TypeScript version is less than 4.7, using regular functions for `validator` and `default` prop options can cause TypeScript to fail when inferring the type of `this`, which breaks type inference for the ENTIRE component, not just the prop.
+
+## Task Checklist
+
+- [ ] Check your TypeScript version (`tsc --version`)
+- [ ] If TypeScript < 4.7, use arrow functions for all `validator` and `default` prop options
+- [ ] Consider upgrading to TypeScript 4.7+ to avoid this limitation entirely
+
+## The Problem
+
+TypeScript needs to infer the type of `this` inside regular functions. In Vue's Options API context, this inference can fail in versions before 4.7, causing cascading type inference failures.
+
+**BAD - Can break type inference in TS < 4.7:**
+```typescript
+import { defineComponent, PropType } from 'vue'
+
+interface Book {
+  title: string
+  author: string
+  year: number
+}
+
+export default defineComponent({
+  props: {
+    book: {
+      type: Object as PropType<Book>,
+      required: true,
+      // Regular function - causes inference issues in TS < 4.7
+      validator: function(book: Book) {
+        return book.title.length > 0
+      }
+    },
+    count: {
+      type: Number,
+      // Regular function - causes inference issues in TS < 4.7
+      default: function() {
+        return 0
+      }
+    }
+  },
+  // Type inference for computed, methods, etc. may break!
+  computed: {
+    bookTitle() {
+      // 'this' might be typed as 'any' due to broken inference
+      return this.book.title
+    }
+  }
+})
+```
+
+**GOOD - Use arrow functions:**
+```typescript
+import { defineComponent, PropType } from 'vue'
+
+interface Book {
+  title: string
+  author: string
+  year: number
+}
+
+export default defineComponent({
+  props: {
+    book: {
+      type: Object as PropType<Book>,
+      required: true,
+      // Arrow function - safe for all TS versions
+      validator: (book: Book) => book.title.length > 0
+    },
+    count: {
+      type: Number,
+      // Arrow function - safe for all TS versions
+      default: () => 0
+    }
+  },
+  computed: {
+    bookTitle() {
+      // 'this' is properly typed
+      return this.book.title  // Type: string
+    }
+  }
+})
+```
+
+## Why Arrow Functions Work
+
+Arrow functions don't have their own `this` binding, so TypeScript doesn't need to infer a `this` type for them. This avoids the type inference bug that affects regular functions in older TypeScript versions.
+
+## For Object/Array Default Values
+
+Arrow functions are especially important for object and array defaults (which Vue requires to be functions anyway):
+
+```typescript
+props: {
+  config: {
+    type: Object as PropType<Config>,
+    // Must be a function, use arrow syntax
+    default: () => ({
+      enabled: true,
+      maxItems: 10
+    })
+  },
+  tags: {
+    type: Array as PropType<string[]>,
+    // Must be a function, use arrow syntax
+    default: () => []
+  }
+}
+```
+
+## When You Can Ignore This
+
+- **TypeScript 4.7+**: This issue was fixed in TypeScript 4.7 (May 2022). If your project uses 4.7 or later, regular functions work fine. Since TypeScript 4.7 has been available for over 3 years, most actively maintained projects have already upgraded and do not need this workaround.
+- **New projects**: If you're starting a new Vue project in 2024 or later, you'll almost certainly be using TypeScript 4.7+ by default and can ignore this rule entirely.
+- **Arrow functions are still fine**: While not required in modern TypeScript, using arrow functions for validators and defaults remains a valid stylistic choice and causes no issues.
+
+## Checking Your TypeScript Version
+
+```bash
+# Check installed TypeScript version
+npx tsc --version
+
+# Or check package.json
+grep typescript package.json
+```
+
+## Reference
+
+- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html#caveats)
+- [TypeScript 4.7 Release Notes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/)