vuejs-ai/skills: Stop Your Agent Writing React-flavored Vue

Ask for "a Vue 3 component with a composable" and watch an LLM quietly reach for React muscle memory: useEffect-style lifecycle thinking, useMemo where a computed belongs, prop-drilling where provide/inject is idiomatic. vuejs-ai/skills (2.8k stars) is a community collection of eight skills that encode Vue 3 conventions — derived, per the README, from real-world issues — so the agent writes the Vue way in the first draft.

Why This Skill Matters

The eight skills map to the places agents actually go wrong: vue-best-practices covers Composition API with TypeScript, common gotchas, SSR guidance, and performance; vue-router-best-practices handles Vue Router 4 navigation guards, route params, and route-component lifecycle; vue-debug-guides targets runtime errors, async error handling, and hydration issues — the failure modes that only show up at runtime. There are also skills for Options API codebases, Pinia state patterns, testing with Vitest and Playwright, JSX syntax differences from React, and a create-adaptable-composable skill for MaybeRef/MaybeRefOrGetter input patterns.

Honesty note from the source: the README labels this an early experiment whose skills "may be incomplete due to hallucinations" and asks for feedback, with a plan to propose transferring the project to the Vue organization if it proves valuable. Treat it as a community project, not an official Vue resource.

Installation

The standard installer:

npx skills add vuejs-ai/skills

Claude Code users can install via the marketplace instead:

/plugin marketplace add vuejs-ai/skills
/plugin install vue-skills-bundle@vue-skills

Or pick individual skills: /plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills.

Real Workflow: Review a Component Before Review

You have a pull request with a new composable and want the Vue idioms checked before a human reviewer sees it.

1. Install the bundle and start a session in the project.
2. Prompt with the README's recommended prefix — it makes triggering reliable:

use vue skill, review this composable for reactivity and MaybeRef patterns

3. The vue-best-practices and create-adaptable-composable skills check the conventions: computed versus useMemo habits, ref unwrapping, MaybeRefOrGetter acceptance, provide/inject where prop-drilling crept in.

The README's own demo shows the effect end to end: a "create a todo app" prompt produces a component, and the repo links the diff of what changed after the skill was applied.

Real Workflow: Debug a Hydration Mismatch

SSR hydration errors are where agents flail hardest. The vue-debug-guides skill is scoped to exactly that — runtime errors, warnings, async error handling, hydration issues — so a prompt like "explain this hydration mismatch warning and fix the cause" pulls structured debugging steps instead of guesses.

Tips

• Prefix prompts with use vue skill — the README is explicit that triggering without it "may be inconsistent" depending on how closely your prompt matches the skill's description keywords.
• Options API codebases should install vue-options-api-best-practices — its coverage of this context and TypeScript with Options API is separate from the Composition API skill.
• Install the testing skill alongside the others if you use Vitest, Vue Test Utils, or Playwright — coverage lives in its own skill.

When Not to Use This

This is a community experiment, not an official Vue project — the README itself warns of possible incompleteness, so verify non-obvious claims against the Vue docs. And if your team is on Nuxt with its own conventions, the SSR guidance here is Vue-level, not Nuxt-level.

See the leaderboard for more skills.