devskill 2.0.2

package/skills/vue-jsx-best-practices/reference/render-function-jsx-vue-vs-react.md

@@ -0,0 +1,141 @@
+---
+title: Vue JSX Uses HTML Attributes Not React Conventions
+impact: MEDIUM
+impactDescription: Using className or htmlFor in Vue JSX causes TypeScript errors and inconsistent code style
+type: gotcha
+tags: [vue3, jsx, tsx, render-function]
+---
+
+# Vue JSX Uses HTML Attributes Not React Conventions
+
+**Impact: MEDIUM** - Vue's JSX transform uses standard HTML attribute names (`class`, `for`) instead of React's JavaScript-friendly names (`className`, `htmlFor`). With proper TypeScript configuration, using React conventions like `className` or `htmlFor` will produce TypeScript errors, which is good for catching these inconsistencies early. Note that Vue's runtime is lenient and will actually convert these attributes correctly, but using HTML attributes is the recommended practice for consistency with Vue templates and proper type safety.
+
+When writing JSX in Vue, use the same attribute names you would use in regular HTML templates. This is a fundamental difference from React's JSX where `class` and `for` are reserved JavaScript keywords.
+
+## Task Checklist
+
+- [ ] Use `class` instead of `className` in Vue JSX
+- [ ] Use `for` instead of `htmlFor` in Vue JSX
+- [ ] Use standard HTML event names with `on` prefix (onClick, onInput)
+- [ ] When migrating React components to Vue, update all attribute names
+- [ ] Configure TypeScript properly for Vue JSX type inference
+
+**Incorrect (React-style):**
+```jsx
+// AVOID: React conventions cause TypeScript errors in Vue JSX
+// (Vue runtime is lenient and converts these, but types don't allow them)
+export default {
+  setup() {
+    return () => (
+      <div className="container">
+        <label htmlFor="email">Email:</label>
+        <input id="email" className="input-field" />
+      </div>
+    )
+  }
+}
+```
+
+```tsx
+// AVOID: TypeScript will reject className/htmlFor with Vue's JSX types
+const Button = () => (
+  <button
+    className="btn btn-primary"  // TS error: Property 'className' does not exist
+    htmlFor="form"               // TS error: Property 'htmlFor' does not exist
+  >
+    Submit
+  </button>
+)
+```
+
+**Correct (Vue-style):**
+```jsx
+// CORRECT: Use standard HTML attributes
+export default {
+  setup() {
+    return () => (
+      <div class="container">
+        <label for="email">Email:</label>
+        <input id="email" class="input-field" />
+      </div>
+    )
+  }
+}
+```
+
+```tsx
+// CORRECT: Vue TSX with HTML attributes
+const Button = () => (
+  <button
+    class="btn btn-primary"
+  >
+    Submit
+  </button>
+)
+```
+
+## TypeScript Configuration for Vue JSX
+
+To enable proper type inference and IntelliSense for Vue JSX/TSX, configure your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+  }
+}
+```
+
+Starting from Vue 3.4, Vue no longer implicitly registers the global JSX namespace, so `jsxImportSource` is required for TypeScript to use Vue's JSX type definitions.
+
+## Vite Configuration
+
+For Vite projects, ensure you have the JSX plugin configured in `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+export default defineConfig({
+  plugins: [vue(), vueJsx()]
+})
+```
+
+## Other Attribute Differences
+
+| React JSX | Vue JSX | HTML |
+|-----------|---------|------|
+| className | class | class |
+| htmlFor | for | for |
+| onChange | onInput (for live updates) | oninput |
+| tabIndex | tabindex | tabindex |
+| readOnly | readonly | readonly |
+
+## Event Handling in Vue JSX
+
+```jsx
+// Vue JSX event handling
+export default {
+  setup() {
+    const handleClick = () => console.log('clicked')
+    const handleInput = (e) => console.log(e.target.value)
+
+    return () => (
+      <div>
+        <button onClick={handleClick}>Click</button>
+        <input onInput={handleInput} />
+
+        {/* Event modifiers via helper */}
+        <div onClick={withModifiers(handleClick, ['self'])}>
+          Only triggers on self
+        </div>
+      </div>
+    )
+  }
+}
+```
+
+## Reference
+- [Vue.js JSX and TSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx)

package/skills/vue-options/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: vue-options
+description: Vue 3 Options API — data, props, computed, methods, watch, emits, provide/inject, lifecycle hooks, and mixins. Use when the project uses Options API style (Vue 2 legacy or explicit Vue 3 Options API preference).
+metadata:
+  author: Vũ Lưu
+  version: "2026.3.23"
+  source: Hand-written based on https://vuejs.org/api/options-state.html
+---
+
+# Vue Options API
+
+> Use this skill for Vue projects written in **Options API** style.
+> For new Vue 3 projects, prefer the `vue` skill (Composition API with `<script setup>`).
+
+## Core
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| State: data, computed, methods, watch | Reactive state, derived values, event handlers, side effects | [state](references/state.md) |
+| Props & Emits | Receiving data from parent, emitting events to parent | [props-emits](references/props-emits.md) |
+| Lifecycle Hooks | Component creation, mounting, updating, unmounting | [lifecycle](references/lifecycle.md) |
+
+## Features
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| provide / inject | Dependency injection across deep component trees | [provide-inject](references/provide-inject.md) |
+| Mixins | Reusable logic shared across components (use with caution) | [mixins](references/mixins.md) |
+
+## Quick Reference
+
+### Full SFC Template
+
+```vue
+<script>
+export default {
+  name: 'MyComponent',
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  emits: ['update'],
+
+  data() {
+    return {
+      localCount: this.count
+    }
+  },
+
+  computed: {
+    doubled() {
+      return this.localCount * 2
+    }
+  },
+
+  watch: {
+    count(newVal) {
+      this.localCount = newVal
+    }
+  },
+
+  methods: {
+    increment() {
+      this.localCount++
+      this.$emit('update', this.localCount)
+    }
+  },
+
+  mounted() {
+    console.log('Component mounted')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h1>{{ title }}</h1>
+    <p>Count: {{ localCount }} | Doubled: {{ doubled }}</p>
+    <button @click="increment">Increment</button>
+  </div>
+</template>
+```
+
+### Key Rules
+
+- `data` must be a **function** (not an object) to avoid shared state across instances.
+- `computed` properties are **cached** — only recompute when dependencies change.
+- Use `watch` for **side effects** (API calls, logging), not for deriving state.
+- Declare all `emits` explicitly to document the component's contract.
+- Avoid `mixins` in new code — prefer composables (Composition API) for reuse.

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

@@ -0,0 +1,107 @@
+---
+name: lifecycle
+description: Vue Options API lifecycle hooks — creation, mounting, updating, unmounting.
+---
+
+# Lifecycle Hooks
+
+## Diagram
+
+```
+new Vue()
+  │
+  ├── beforeCreate   → instance initializing (no data/props yet)
+  ├── created        → data/props/computed/methods available; no DOM yet
+  │
+  ├── beforeMount    → template compiled; about to insert into DOM
+  ├── mounted        → component inserted into DOM ✅ (use for DOM access)
+  │
+  ├── beforeUpdate   → reactive data changed; DOM not yet updated
+  ├── updated        → DOM updated ✅ (avoid heavy logic here)
+  │
+  ├── beforeUnmount  → component about to be removed (cleanup here ✅)
+  └── unmounted      → component removed from DOM
+```
+
+## Common Hooks
+
+### created
+Runs after instance is set up. Use for initial data fetching (no DOM available).
+
+```js
+export default {
+  data() {
+    return { user: null }
+  },
+  async created() {
+    this.user = await api.getUser(this.userId)
+  }
+}
+```
+
+### mounted
+Runs after DOM is inserted. Use for DOM manipulation, third-party libs initialization.
+
+```js
+export default {
+  mounted() {
+    // Access the component's DOM
+    this.$el.focus()
+    // Initialize a chart, map, etc.
+    this.chart = new Chart(this.$refs.canvas, { ... })
+  }
+}
+```
+
+### beforeUnmount
+Run cleanup before the component is destroyed — remove event listeners, clear timers, destroy third-party instances.
+
+```js
+export default {
+  data() {
+    return { timer: null }
+  },
+  mounted() {
+    this.timer = setInterval(this.tick, 1000)
+  },
+  beforeUnmount() {
+    clearInterval(this.timer)
+    this.chart?.destroy()
+  }
+}
+```
+
+### updated
+Runs after every reactive re-render. Use sparingly — prefer `watch` or `computed` for reacting to specific changes.
+
+```js
+export default {
+  updated() {
+    // Runs on every update — be careful with performance
+    console.log('DOM updated')
+  }
+}
+```
+
+## Keep-Alive Hooks
+
+When a component is wrapped in `<KeepAlive>`:
+
+```js
+export default {
+  activated() {
+    // Component brought back into view
+    this.startPolling()
+  },
+  deactivated() {
+    // Component hidden but kept alive
+    this.stopPolling()
+  }
+}
+```
+
+<!--
+Source references:
+- https://vuejs.org/api/options-lifecycle.html
+- https://vuejs.org/guide/essentials/lifecycle.html
+-->

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

@@ -0,0 +1,96 @@
+---
+name: mixins
+description: Vue Options API mixins — reusable logic shared across components. Use with caution in new code.
+---
+
+# Mixins
+
+> ⚠️ **Discouraged in new code.** Mixins cause naming conflicts and make data flow hard to trace. Prefer composables (Composition API) when possible.
+
+## Basic Usage
+
+```js
+// mixins/timestampMixin.js
+export const timestampMixin = {
+  data() {
+    return {
+      createdAt: null,
+      updatedAt: null
+    }
+  },
+  methods: {
+    touchUpdatedAt() {
+      this.updatedAt = new Date().toISOString()
+    }
+  },
+  created() {
+    this.createdAt = new Date().toISOString()
+  }
+}
+```
+
+```js
+// Component using the mixin
+import { timestampMixin } from './mixins/timestampMixin'
+
+export default {
+  mixins: [timestampMixin],
+  data() {
+    return { title: 'My Post' }
+  },
+  methods: {
+    save() {
+      this.touchUpdatedAt() // from mixin
+      // save logic...
+    }
+  }
+}
+```
+
+## Merge Strategy
+
+When a mixin and the component define the same option, Vue merges them:
+
+| Option | Merge Strategy |
+|--------|---------------|
+| `data` | Merged, component wins on conflict |
+| `hooks` (e.g. `mounted`) | Both called; mixin hook runs first |
+| `methods`, `computed` | Component wins on conflict |
+
+## Problems with Mixins
+
+```js
+// ❌ Hard to tell where `isLoading` came from
+export default {
+  mixins: [loadingMixin, userMixin],
+  methods: {
+    fetchData() {
+      this.isLoading = true // which mixin owns this?
+    }
+  }
+}
+```
+
+- **Name conflicts** are silent and hard to debug.
+- **Unclear ownership** — hard to know which mixin a property belongs to.
+- **Cannot pass parameters** to customize mixin behavior.
+
+## Mixin vs Composable
+
+```js
+// ✅ Composable (Composition API) — explicit, parameter-friendly
+import { useLoading } from './composables/useLoading'
+
+export default {
+  setup() {
+    const { isLoading, startLoading } = useLoading()
+    return { isLoading, startLoading }
+  }
+}
+```
+
+<!--
+Source references:
+- https://vuejs.org/api/options-composition.html#mixins
+- https://vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques
+-->

package/skills/vue-options/references/props-emits.md

@@ -0,0 +1,106 @@
+---
+name: props-emits
+description: Vue Options API props declaration and emits for parent-child communication.
+---
+
+# Props & Emits
+
+## props
+
+Declare all props explicitly with types and defaults. Never mutate props directly.
+
+```js
+export default {
+  props: {
+    // Basic type
+    title: String,
+
+    // Required prop
+    userId: {
+      type: Number,
+      required: true
+    },
+
+    // With default value
+    status: {
+      type: String,
+      default: 'active'
+    },
+
+    // Multiple types
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+
+    // Object with default (must use factory function)
+    config: {
+      type: Object,
+      default: () => ({ theme: 'light' })
+    },
+
+    // Custom validator
+    size: {
+      type: String,
+      validator: (value) => ['sm', 'md', 'lg'].includes(value)
+    }
+  }
+}
+```
+
+> ❌ Never do `this.propName = value` — mutating props breaks data flow.
+> ✅ Instead, emit an event or use a local `data` copy.
+
+## emits
+
+Always declare emitted events explicitly. Improves readability and avoids attribute fallthrough conflicts.
+
+```js
+export default {
+  // Simple declaration
+  emits: ['submit', 'cancel'],
+
+  // With validation
+  emits: {
+    submit: (payload) => {
+      // Return true = valid, false = warning
+      return payload && payload.email
+    },
+    cancel: null // no validation
+  },
+
+  methods: {
+    handleSubmit() {
+      this.$emit('submit', { email: this.email })
+    }
+  }
+}
+```
+
+## Two-way binding with v-model
+
+```js
+// Child component
+export default {
+  props: {
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    onInput(event) {
+      this.$emit('update:modelValue', event.target.value)
+    }
+  }
+}
+```
+
+```vue
+<!-- Parent usage -->
+<MyInput v-model="username" />
+```
+
+<!--
+Source references:
+- https://vuejs.org/api/options-state.html#props
+- https://vuejs.org/guide/components/events.html
+-->

package/skills/vue-options/references/provide-inject.md

@@ -0,0 +1,92 @@
+---
+name: provide-inject
+description: Vue Options API provide/inject for dependency injection across deep component trees.
+---
+
+# provide / inject
+
+Use for passing data/functions deep into a component tree without prop drilling.
+Only use when props would require passing through many intermediate components.
+
+## Basic Usage
+
+```js
+// Ancestor component (Provider)
+export default {
+  provide() {
+    return {
+      theme: 'dark',
+      appTitle: this.title // from data/props
+    }
+  },
+  data() {
+    return { title: 'My App' }
+  }
+}
+```
+
+```js
+// Deep descendant component (Consumer)
+export default {
+  inject: ['theme', 'appTitle'],
+  mounted() {
+    console.log(this.theme)    // 'dark'
+    console.log(this.appTitle) // 'My App'
+  }
+}
+```
+
+## With Default Values
+
+```js
+export default {
+  inject: {
+    theme: {
+      default: 'light'  // fallback if no provider found
+    },
+    user: {
+      from: 'currentUser', // alias the injection key
+      default: null
+    }
+  }
+}
+```
+
+## Reactive provide
+
+By default, provided values are **not reactive**. To make them reactive, provide a `ref` or reactive object.
+
+```js
+import { ref } from 'vue'
+
+export default {
+  provide() {
+    const count = ref(0)
+    return {
+      count,
+      increment: () => count.value++
+    }
+  }
+}
+```
+
+```js
+// Consumer can now react to count changes
+export default {
+  inject: ['count', 'increment']
+}
+```
+
+## When to Use
+
+| Use provide/inject | Use props instead |
+|--------------------|-------------------|
+| Data needed by many deeply nested components | Direct parent-child communication |
+| App-wide context (theme, locale, auth) | Fewer than 2-3 component levels deep |
+| Avoiding prop drilling | Data flow needs to be explicit and traceable |
+
+<!--
+Source references:
+- https://vuejs.org/api/options-composition.html#provide
+- https://vuejs.org/guide/components/provide-inject.html
+-->