vue-skills – AI‑agent skills for Vue 3 development

What it is – An early‑stage, community‑driven collection of skills that can be loaded into AI coding assistants (e.g., Claude Code) to make them better at writing Vue 3 code. Each skill encodes patterns, best‑practice rules, and edge‑case knowledge that the model might otherwise miss.

---

Installation

# Generic installer (works with any compatible agent)
npx skills add vuejs-ai/skills

For Claude Code users there is a marketplace workflow:

/plugin marketplace add vuejs-ai/skills          # register the repo
/plugin install vue-skills-bundle@vue-skills      # install every skill at once
# or install individual skills
/plugin install vue-best-practices@vue-skills
/plugin install vue-router-best-practices@vue-skills

---

How to use

When prompting the assistant, prepend the phrase use vue skill so the model knows to activate the relevant rule set.

Use vue skill, create a todo app with Pinia and Vue Router

Without the prefix the skill may or may not fire, depending on keyword matching.

---

Available skills

Skill	When to use	What it covers
vue-best-practices	Vue 3 + Composition API + TS	General best practices, SSR tips, performance tricks
vue-options-api-best-practices	Options‑API code	this handling, lifecycle, TS typings for Options API
vue-router-best-practices	Vue Router 4	Navigation guards, params, route‑component lifecycle
vue-pinia-best-practices	Pinia state management	Store setup, reactivity patterns
vue-testing-best-practices	Unit/E2E testing	Vitest, Vue Test Utils, Playwright guidance
vue-jsx-best-practices	JSX in Vue	Syntax differences from React JSX
vue-debug-guides	Debugging Vue 3	Runtime errors, hydration issues, async error handling
create-adaptable-composable	Writing reusable composables	MaybeRef / MaybeRefOrGetter input patterns

---

Example output

vue-best-practices – Todo app demo

Prompt: create a todo app Result: The assistant produces a more readable project structure, splits components, extracts state into a composable (useTodos.ts), and uses shallowRef for primitive reactive data. Full demo links are provided in the README.

create-adaptable-composable – useHidden

Prompt: create a reusable composable for controlling hidden for an element Result: Generates a composable that accepts MaybeRef/MaybeRefOrGetter arguments, enabling flexible reactivity. The generated TypeScript signature is shown in the README.

---

Methodology

• Skill types – Capability: solves problems the model cannot handle without the skill (e.g., version‑specific quirks).
  Efficiency: improves solutions that the model could already produce but not optimally.
• Validation – Automated evaluation runs a baseline (no skill) and a with‑skill run. Skills are kept only when they change a failing baseline into a passing result.

---

Contributing

Development occurs on the dev branch; main holds only published, vetted skills. Workflow: branch from dev → PR to dev → merge → GitHub Action syncs to main.

---

Related projects

• antfu/skills – similar skill collection for Vue/Vite/Nuxt.
• vueuse/vueuse-skills – skills focused on VueUse.
• onmax/nuxt-skills – Nuxt‑specific agent skills.

---

License

MIT.