vue-skills
A set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skills consist only of instructions and references and run no code
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/vue-skillsDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Assembled automatically, review before installing.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .claude/skills
cp -R "$tmp/skills/create-adaptable-composable" .claude/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .claude/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .claude/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .claude/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .claude/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .claude/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .claude/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .claude/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .github/skills
cp -R "$tmp/skills/create-adaptable-composable" .github/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .github/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .github/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .github/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .github/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .github/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .github/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .github/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .devin/skills
cp -R "$tmp/skills/create-adaptable-composable" .devin/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .devin/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .devin/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .devin/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .devin/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .devin/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .devin/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .devin/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .cline/skills
cp -R "$tmp/skills/create-adaptable-composable" .cline/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .cline/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .cline/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .cline/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .cline/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .cline/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .cline/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .cline/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .roo/skills
cp -R "$tmp/skills/create-adaptable-composable" .roo/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .roo/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .roo/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .roo/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .roo/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .roo/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .roo/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .roo/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add vuejs-ai/skills --skill create-adaptable-composable vue-best-practices vue-debug-guides vue-jsx-best-practices vue-options-api-best-practices vue-pinia-best-practices vue-router-best-practices vue-testing-best-practices -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit c9d355f
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/vuejs-ai/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/create-adaptable-composable/ /skills/vue-best-practices/ /skills/vue-debug-guides/ /skills/vue-jsx-best-practices/ /skills/vue-options-api-best-practices/ /skills/vue-pinia-best-practices/ /skills/vue-router-best-practices/ /skills/vue-testing-best-practices/
git -C "$tmp" checkout c9d355ff23f654309dd02006be671859df0a134c
mkdir -p .agents/skills
cp -R "$tmp/skills/create-adaptable-composable" .agents/skills/create-adaptable-composable
cp -R "$tmp/skills/vue-best-practices" .agents/skills/vue-best-practices
cp -R "$tmp/skills/vue-debug-guides" .agents/skills/vue-debug-guides
cp -R "$tmp/skills/vue-jsx-best-practices" .agents/skills/vue-jsx-best-practices
cp -R "$tmp/skills/vue-options-api-best-practices" .agents/skills/vue-options-api-best-practices
cp -R "$tmp/skills/vue-pinia-best-practices" .agents/skills/vue-pinia-best-practices
cp -R "$tmp/skills/vue-router-best-practices" .agents/skills/vue-router-best-practices
cp -R "$tmp/skills/vue-testing-best-practices" .agents/skills/vue-testing-best-practicesCommands for macOS and Linux, on Windows run them in Git Bash.
Install the set with npx skills add vuejs-ai/skills, or in Claude Code via /plugin marketplace add vuejs-ai/skills and /plugin install vue-skills-bundle@vue-skills. For reliable triggering start your prompt with use vue skill.
Other ways from the author
npx skills add vuejs-ai/skillsInstall through the skills CLI for supported agents.
This is third-party code. Review the repository files before installing.
What it does
The set gives the agent eight skills for Vue 3 development. The main skill sets a default stack of Composition API with script setup and TypeScript, requires reading core references on reactivity, single-file components, data flow and composables, and asks the agent to plan component boundaries before writing code. Separate skills cover Vue Router 4, Pinia, testing with Vitest and Playwright, JSX, the Options API, building reusable composables, and debugging errors and SSR hydration issues. Each skill is a SKILL.md with references on specific topics and common mistakes. Rules were selected through automated evals: a rule was kept only if it let the model solve what it could not solve without the skill.
Who it is for. For frontend developers on Vue 3 who want the agent to follow established ecosystem practices.
Good fit when
- The agent writes or refactors Vue 3 code and .vue files
- You need correct patterns for Pinia, Vue Router or Vitest tests
- You are debugging runtime errors or SSR hydration mismatches
Not a fit when
- The project is not on Vue; the references target Vue 3 and its ecosystem
- You want neutral help without being pushed toward Composition API and TypeScript
Example request
Use vue skill and build a todo list component with Composition API and PiniaLimitations
This is an early community experiment, not an official Vue team project: the author notes that rules are derived from real issues but may be imprecise due to hallucinations and asks for feedback. The main skill defaults to Composition API, script setup and TypeScript; for the Options API or JSX you install separate skills. Published skills live on the main branch while development happens on dev. The skills are references and instructions only and do not run code themselves.
How to disable. If installed as a Claude Code plugin, remove it via /plugin. For a manual install, remove the skill folders from the agent's skills directory.
Security check
- The skills consist only of instructions and references and run no code
README in short
The README presents a set of skills for Vue 3 development and openly calls it an early community experiment. Install goes through npx skills add or as a Claude Code plugin with a bundle and individual skills. For reliable triggering it suggests starting the prompt with use vue skill. A table lists eight skills and when to use them: core practices, Options API, router, Pinia, testing, JSX, debugging and composable creation. It describes the validation method: a baseline run without the skill and a run with it, keeping a rule only if it enabled a solution. MIT licensed.
SKILL.md
--- name: vue-best-practices description: 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. license: MIT metadata: author: github.com/vuejs-ai version: "18.0.0" --- # Vue Best Practices Workflow Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order. ## Core Principles - **Keep state predictable:** one source of truth, derive everything else. - **Make data flow explicit:** Props down, Events up for most cases. - **Favor small, focused components:** easier to test, reuse, and maintain. - **Avoid unnecessary re-renders:** use computed properties and watchers wisely. - **Readability counts:** write clear, self-documenting code.
FAQ
Is this an official Vue project?
No. It is a community experiment; the author plans to propose transferring it to the Vue organization if it proves valuable, but that has not happened yet.
Do I have to install all eight skills?
No. The vue-skills-bundle installs them all at once, but you can install only the ones you need, for example vue-best-practices@vue-skills or vue-router-best-practices@vue-skills.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys