Frontend Skills
Polski

Frameworks

Vue components

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.

fe-vuevue, nuxt12 rules81 tokens always loaded, 1070 tokens when used, 1926 tokens in references on demand.

Install

init installs this skill when the project uses vue, nuxt. Pick your agent to see where its files land.

Agent
npx github:dawidolko/frontend-skills init

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents
AgentFound by
Claude CodeCLAUDE.md .claude CLAUDE.local.md
OpenAI Codex.codex AGENTS.override.md
Cursor.cursor .cursorrules
GitHub Copilot.github/copilot-instructions.md .github/instructions .github/skills .github/prompts
Gemini CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.json opencode.jsonc .opencode
Cline.clinerules .cline
Zed.rules .zed
JetBrains Junie.junie
Kiro.kiro
Augment.augment .augment-guidelines
Trae.trae
Continue.continue
Amazon Q Developer.amazonq
Aider.aider.conf.yml CONVENTIONS.md

Where fe-vue lands for Claude Code

  • .claude/skills/fe-vue/SKILL.mdskill
  • .claude/skills/fe-vue/references/vue.mdskill
  • .claude/rules/fe-vue.mdrule file
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for OpenAI Codex

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.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.
The real file

Where fe-vue lands for Cursor

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • .cursor/rules/fe-vue.mdcrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-vue.mdc
---
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>`.
The real file

Where fe-vue lands for GitHub Copilot

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • .github/instructions/fe-vue.instructions.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-vue.instructions.md
---
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>`.
The real file

Where fe-vue lands for Gemini CLI

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.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.
The real file

Where fe-vue lands for Antigravity CLI

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • .agents/rules/fe-vue.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for Devin / Windsurf

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • .devin/rules/fe-vue.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for OpenCode

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.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.
The real file

Where fe-vue lands for Cline

  • .claude/skills/fe-vue/SKILL.mdskill
  • .claude/skills/fe-vue/references/vue.mdskill
  • .clinerules/fe-vue.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for Zed

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.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.
The real file

Where fe-vue lands for JetBrains Junie

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.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.
The real file

Where fe-vue lands for Kiro

  • .kiro/skills/fe-vue/SKILL.mdskill
  • .kiro/skills/fe-vue/references/vue.mdskill
  • .kiro/steering/fe-vue.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for Augment

  • .agents/skills/fe-vue/SKILL.mdskill
  • .agents/skills/fe-vue/references/vue.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.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.
The real file

Where fe-vue lands for Trae

  • .trae/skills/fe-vue/SKILL.mdskill
  • .trae/skills/fe-vue/references/vue.mdskill
  • .trae/rules/fe-vue.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for Continue

  • .frontend-skills/skills/fe-vue/SKILL.mdskill
  • .frontend-skills/skills/fe-vue/references/vue.mdskill
  • .continue/rules/fe-vue.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-vue.md
---
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>`.
The real file

Where fe-vue lands for Amazon Q Developer

  • .frontend-skills/skills/fe-vue/SKILL.mdskill
  • .frontend-skills/skills/fe-vue/references/vue.mdskill
  • .amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.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`.
The real file

Where fe-vue lands for Aider

  • .frontend-skills/skills/fe-vue/SKILL.mdskill
  • .frontend-skills/skills/fe-vue/references/vue.mdskill
  • CONVENTIONS.mdinstruction block
  • .aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.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`.
The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

  • Use the fe-vue skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain vue/require-v-for-key and fix it here.

Rules it teaches

  • vue/require-v-for-key

    Every v-for gives its items a :key from the data; on a template v-for the key goes on the template tag.

    moderatestatic

  • vue/no-index-key

    A v-for key comes from the item's data, not from the loop index, when the list can change.

    moderatestatic

  • vue/no-v-if-with-v-for

    Never put v-if and v-for on the same element; filter in a computed list or move v-if to a wrapper.

    moderatestatic

  • vue/no-mutating-props

    A component never changes its props (or objects and arrays inside them); it emits an event or keeps a local copy.

    moderatestatic

  • vue/ref-value-in-script

    In script code, read and compare a ref or computed through .value; the ref object itself is always truthy.

    moderatestatic

  • vue/no-reactivity-loss

    Never destructure or reassign a reactive() object; use toRefs, a ref, or change its properties.

    moderatestatic

  • vue/computed-pure

    A computed getter only derives a value - no async work, no requests and no changes to other state.

    moderatestatic

  • vue/detailed-props

    Declare props with their types (an object with type, or a TypeScript type), not as a bare array of names.

    minorstatic

  • vue/multi-word-names

    Name components with two or more words (TodoItem, not Item); App, pages and layouts are exempt.

    minorstatic

  • vue/link-for-navigation

    Navigate with RouterLink or NuxtLink, not a button whose click handler only calls router.push or navigateTo.

    moderatestaticWCAG 4.1.2

  • a11y/no-click-on-static

    A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.

    seriousstaticWCAG 2.1.1, 4.1.2

  • a11y/input-label

    Every form field has a programmatic label (label element, aria-label or aria-labelledby); a placeholder is not a label.

    criticalstaticWCAG 1.3.1, 3.3.2, 4.1.2

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

  • 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.

Steps the agent follows

  1. Check the profile: Vue 3.5 (useId, useTemplateRef, onWatcherCleanup, reactive props destructure, lazy hydration); Nuxt adds fe-nuxt; stores follow fe-state.
  2. Write <script setup lang="ts">; declare defineProps, defineEmits (typed) and defineModel for two-way bindings. Options API code stays Options API unless the task is a migration.
  3. Use ref for state, computed for derived values, watch with onWatcherCleanup or an AbortController for side effects; shallowRef for large data you replace.
  4. Extract reusable logic into useX() composables in composables/ that take refs or getters and return plain objects of refs.
  5. Use useId() for id/for/aria-describedby; move focus to the page heading after a route change; bind text with {{ }}; v-html only for sanitized HTML (see fe-security).
  6. Images and media: import them or use @/assets paths (js/asset-import); icons from the project set (html/project-icons, html/icon-from-set).
  7. Split routes and heavy widgets with () => import(...) and defineAsyncComponent.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed reports missing and index keys, v-if with v-for, prop mutation, refs without .value, lost reactivity, impure computeds, untyped props and single-word names.
  • Run ESLint with eslint-plugin-vue flat/recommended and vue-tsc --noEmit; never silence a rule to pass.
  • Vue DevTools: watch the component tree and the timeline for components that re-render on unrelated changes.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious.
audit: counts by severity, each rule with its first location, the exit code.

Reference files

SKILL.md on GitHub