Vue components

---
paths:
  - "**/*.vue"
  - "src/composables/**/*.ts"
  - "src/composables/**/*.js"
---

# Vue components (frontend-skills)

Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code.

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.claude/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code.
globs: **/*.vue, src/composables/**/*.ts, src/composables/**/*.js
alwaysApply: false
---

# Vue components (frontend-skills)

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.agents/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
applyTo: "**/*.vue,src/composables/**/*.ts,src/composables/**/*.js"
description: "Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code."
---

# Vue components (frontend-skills)

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.agents/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
trigger: glob
globs: "**/*.vue, src/composables/**/*.ts, src/composables/**/*.js"
description: "Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code."
---

# Vue components (frontend-skills)

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.agents/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
trigger: glob
globs: "**/*.vue,src/composables/**/*.ts,src/composables/**/*.js"
---

# Vue components (frontend-skills)

Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code.

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.agents/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
paths:
  - "**/*.vue"
  - "src/composables/**/*.ts"
  - "src/composables/**/*.js"
---

# Vue components (frontend-skills)

Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code.

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.claude/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
inclusion: fileMatch
fileMatchPattern: ["**/*.vue", "src/composables/**/*.ts", "src/composables/**/*.js"]
---

# Vue components (frontend-skills)

Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code.

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.kiro/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: "Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code."
globs: **/*.vue,src/composables/**/*.ts,src/composables/**/*.js
alwaysApply: false
---

# Vue components (frontend-skills)

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.trae/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
name: "Vue components"
description: "Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible. Use when creating or editing a .vue file or a composable, fixing a value that does not update, or when asked to review Vue code."
globs: ["**/*.vue", "src/composables/**/*.ts", "src/composables/**/*.js"]
alwaysApply: false
---

# Vue components (frontend-skills)

- Key every `v-for` with an id from the item (vue/require-v-for-key), never the loop index for a list that changes (vue/no-index-key).
- Never put `v-if` and `v-for` on one element; loop over a computed list (vue/no-v-if-with-v-for).
- Never change a prop; emit, use `defineModel()`, or copy to local state (vue/no-mutating-props).
- In script code read refs and computeds through `.value` (vue/ref-value-in-script).
- Never destructure or reassign a `reactive()` object; use `ref`, `toRefs` or `Object.assign` (vue/no-reactivity-loss).
- Computed getters only derive: no async, requests or writes (vue/computed-pure).
- Type props (`defineProps<{...}>()` or objects with `type`), never a bare name array (vue/detailed-props).
- Name components with two or more words (vue/multi-word-names).
- Navigate with `RouterLink`/`NuxtLink`, not a button that calls `router.push` (vue/link-for-navigation).
- Clicks go on `<button>` or links (a11y/no-click-on-static); every field has a label (a11y/input-label).
- Register composables, `watch` and lifecycle hooks synchronously in setup; clean up what a watcher or `onMounted` starts.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-vue/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-vue` (Vue components): when editing `**/*.vue`, `src/composables/**/*.ts`, `src/composables/**/*.js`, first read `.frontend-skills/skills/fe-vue/SKILL.md`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-vue` (Vue components): when editing `**/*.vue`, `src/composables/**/*.ts`, `src/composables/**/*.js`, first read `.frontend-skills/skills/fe-vue/SKILL.md`.