Guide · Agent skill
How to use the Vue 3 Expert agent skill: setup, triggers and examples
Updated · written with AI from the project's own documentation and checked against our catalogue data
The vue-expert skill is a set of instructions and reference notes that teaches an AI agent to write Vue 3 code the way the skill's authors recommend: Composition API, script setup syntax, typed props and Pinia for shared state. This guide explains what a skill is, how to install vue-expert, how to ask for work so the skill triggers, and what to check before you run the code. You need to be a developer with a Vue 3 project to get real value from it.
Vue 3 ExpertJeffallan/claude-skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the vue-expert ZIP from the skill page on this site.
- 2Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use or into .claude/skills/ in your project.
- 3Or upload in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Confirm your project meets the requirements. Make sure you have Node.js and a Vue 3 project, and install vue-tsc, Vitest and Vue Test Utils if you want the checks.
- 5Ask a specific Vue request. Describe the component, store or config you want and name the Vue topic.
- 6Run the checks. Run vue-tsc --noEmit and your Vitest tests, and fix anything that fails before you commit.
What the vue-expert skill makes the agent do
A skill is a folder of instructions that an agent loads when a request matches its description. The vue-expert skill covers Vue 3 component building, composables, Pinia stores, Nuxt 3 SSR and SSG projects, Quasar and Capacitor mobile apps, PWA features and service workers, and Vite build tuning.
When the skill is active, the agent follows its workflow: analyse requirements, design composables and stores, implement components, validate with type checks, optimise, and test. The skill's guidance says to prefer the Composition API, use script setup, type props with TypeScript, and avoid Options API, mixing APIs, and Vuex.
- Components written with the Composition API and <script setup>
- TypeScript typed props and emits
- Pinia stores for global state
- Help with Nuxt 3, Quasar/Capacitor, PWA service workers and Vite configuration
- Reference notes loaded as needed for each topic
Install the vue-expert skill
Download the vue-expert ZIP from the skill's page on this site, then choose one of two routes. For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal: unzip into ~/.claude/skills/
- Per project: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill loads when your request matches its description, so mention the Vue topic directly. Name the concrete thing you want, such as a component, a store, a Nuxt page or a Vite setting.
Requests that use the skill's trigger terms work best, for example Composition API, Pinia, composables, Quasar, Capacitor, PWA, service worker, or Vite config.
- "Create a Vue 3 component with typed props and an emit for saving a form."
- "Set up a Pinia store for the shopping cart with actions and getters."
- "Convert this Options API component to Composition API with script setup."
- "Configure a Nuxt 3 page that fetches data on the server."
- "Add a service worker to my Vue app so it works offline."
Check the output and what it needs
The skill's workflow asks the agent to run vue-tsc --noEmit for type errors and to write component tests with Vue Test Utils and Vitest. Those tools must exist in your project. The skill lists Node.js and a Vue 3 project as requirements, with Vue DevTools optional for reactivity checks.
Treat the generated code as a draft. The skill itself says the output is code that still needs a developer to run and deploy.
- Required: Node.js and a Vue 3 project
- Needed for checks: vue-tsc for type checking, Vitest and Vue Test Utils for tests
- Optional: Vue DevTools for reactivity checks
- The skill runs scripts; it does not use the network
vue-tsc --noEmitSafety notes on scripts and network
The skill is listed as running scripts, so review any command the agent proposes before you approve it, especially commands that install packages or change build configuration. The skill is listed as not using the network, but you should still check the code it writes before deploying.
Keep the skill in a project folder under version control if you want to see exactly what the agent changed.
- Read proposed shell commands before approving them
- Review changes to vite.config and package files
- The listed requirements do not include network access
What people use it for
- Building typed Vue 3 components with script setup
- Setting up a Pinia store for shared state
- Moving Options API or Vuex code to Composition API and Pinia
- Configuring a Nuxt 3 SSR or SSG project
- Packaging a Vue app as a Quasar or Capacitor mobile app or PWA
- Tuning Vite configuration, sourcemaps and TypeScript integration
Frequently asked questions
How do I install the vue-expert skill?
Download the ZIP from the skill page, then unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, you can upload it under Settings, Capabilities, Skills.
What do I need to use vue-expert?
You need Node.js and a Vue 3 project. The skill's checks use vue-tsc for type checking and Vitest with Vue Test Utils for tests, and Vue DevTools is optional for reactivity checks.
Is the vue-expert skill free?
The skill is published under the MIT licence, as stated on its page. Check the licence file in the download for the full terms.
Does vue-expert work with Nuxt 3 and Quasar?
Yes. The skill covers Nuxt 3 SSR and SSG projects and Quasar or Capacitor mobile apps, with separate reference notes for each topic.
Can vue-expert help me move from Vuex or the Options API?
Yes. The skill's guidance favours Composition API and Pinia and says to avoid Options API and Vuex, so it is suited to migrating older code.
Does the skill work for Vue 2 or React projects?
No. The skill's patterns are for Vue 3, so they will not apply to Vue 2 or React projects.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use vue-expert if you are a front-end developer building Vue 3 or Nuxt 3 apps, migrating older code to Composition API and Pinia, or packaging a Vue app for mobile or PWA. Pick something else if you want a finished website without writing code, or if your project uses Vue 2 or React.
Download the skill