vue-best-practices Skill (vuejs-ai) for Claude Code: Vue 3

Makes Claude write Vue 3 with the Composition API, script setup and TypeScript, split into clear components and composables.

Installs: 44K; on skills.sh
Stars: 3.2K; on GitHub
Files: 22; besides SKILL.md
Updated: Oct 2026; last repo commit

vue-best-practices makes Claude follow a fixed workflow on Vue tasks. It confirms the stack (Vue 3, Composition API, script setup with TypeScript), reads four core references, plans component boundaries, applies Vue basics, adds optional features only when needed, and tunes performance after behaviour works.

It ships 22 reference guides and no scripts. The README calls the repo an early experiment that may contain mistakes from hallucinations, and suggests starting prompts with "use vue skill" so it triggers reliably.

Good for

Vue 3 developers who want consistent Composition API code
Teams refactoring large components into smaller ones
Developers working with SSR, Vue Router, Pinia or Vite with Vue

Install vue-best-practices

Claude Code

Copy this prompt.

Install the vue-best-practices skill in Claude Code. Run this command:

/plugin marketplace add vuejs-ai/skills
/plugin install vue-best-practices@vue-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The README's marketplace route can install this skill on its own as a plugin, or all 8 Vue skills with vue-skills-bundle@vue-skills. The skills CLI line with --skill also installs only this one; the README's plain npx skills add vuejs-ai/skills installs all 8. Pick one route. SKILL.md optionally loads vue-options-api-best-practices and vue-jsx-best-practices if they are installed.

From the project README. Source.

What's in the skill

When it loads

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

Sections in SKILL.md

Core Principles
1) Confirm architecture before coding (required)
1.1 Must-read core references (required)
1.2 Plan component boundaries before coding (required)
2) Apply essential Vue foundations (required)
Reactivity
SFC structure and template safety
Choose useful boundaries
Component data flow
Composables
3) Consider optional features only when requirements call for them
3.1 Standard optional features
3.2 Less-common optional features
4) Run performance optimization after behavior is correct
5) Final self-check before finishing

Key facts

Author: github.com/vuejs-ai, per the SKILL.md metadata
Repo: vuejs-ai/skills
Installs on skills.sh: 44,036 (Nov 2, 2026)
GitHub stars: 3,229 (Nov 2, 2026)
License: MIT
Last commit: Oct 23, 2026
Skill version: 19.1.0
Files: 23 files including SKILL.md: 22 reference guides
Status: The README calls the repo an early experiment and community project
skills.sh checks: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Vue 3, Composition API, script setup with TypeScript; read 4 core references first
The four required references are reactivity, sfc, component-data-flow and composables. It loads the Options API or JSX skills only if the project uses them and they are installed.
Read · 1) Confirm architecture
Sketch owners, state and contracts before a non-trivial feature
Local fixes keep existing boundaries. The test is behaviour that changes together, not file length.
1.2) Plan component boundaries
Reactivity, SFC structure, props down and events up, composables
Keep state minimal with ref and reactive, derive with computed, and keep templates declarative.
Write · 2) Essential foundations
Slots, attrs, KeepAlive, Teleport, Suspense, transitions, directives, plugins
Loaded only when a requirement calls for them.
Read · 3) Optional features
Virtualise big lists, v-once and v-memo, avoid over-abstracted list items
Done after behaviour is correct, not before.
Read · 4) Performance pass
Checklist on behaviour, reactivity, typed contracts, ownership and tests
Refactors must preserve behaviour and use the project's tests.
5) Final self-check

From the official docs

Questions

How do I install vue-best-practices?

Use the install box above, which installs this skill alone. The README's own command, npx skills add vuejs-ai/skills, installs all 8 Vue skills at once. For Claude Code it also describes a marketplace route that can install this skill on its own or the whole bundle.

How do I make Claude use it?

The README says to start your prompt with "Use vue skill," to trigger it reliably. Without that, triggering may be inconsistent, depending on how closely your prompt matches the skill description.

Does it need other skills?

No other skill is required. SKILL.md says to load vue-options-api-best-practices if the project uses Options API and vue-jsx-best-practices for JSX, if they are available. Both are in the same repo.

Does it need an API key?

No key is named, and the folder has no scripts: SKILL.md and 22 reference guides.

Does vue-best-practices work in the Claude app or Claude.ai?

You can zip the skill folder and upload it under Customize, then Skills, in the Claude app. That is our generic instruction; the README documents the skills CLI and a Claude Code marketplace only.

Is it safe to use?

It is Markdown instructions with no scripts, so it cannot run anything itself. The README warns the skills are an early experiment that may be incomplete or wrong, so review the code Claude writes and run your tests.

vue-best-practices vs vue-options-api-best-practices?

vue-best-practices defaults to the Composition API with script setup and TypeScript. SKILL.md says to use the Options API skill only when the project explicitly uses Options API. That skill covers data(), methods and the this context.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/vue-best-practices

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

skills · github.com
commands.md · github.com
SKILL.md · github.com
README.md · github.com
SKILL.md · github.com