vuejs-development — Claude Code skill: Vue 3 Composition API
A skill that gives your coding agent a Vue 3 reference: reactivity, Composition API, single-file components and directives. Useful when building an SPA or moving off the Options API.
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-codeWhat vuejs-development does
The skill is built on the official Vue.js documentation and walks through the reactivity system, the Composition API, single-file components, directives and lifecycle hooks. Inside are JavaScript examples: ref() and reactive(), computed properties, watch and watchEffect, components written with and without <script setup>.
There is a section on picking between ref() and reactive() — the first for primitives and single values, the second for objects with several fields. You also get samples for defineProps, defineEmits and onMounted. These are patterns the agent drops into your code, not a package you wire into the project.
The skill points at the /vuejs/docs library in Context7, so answers come from current Vue documentation. Install it with one npx skills add command, or gh skill install for GitHub Copilot. No API keys or extra dependencies are involved in setting it up.
What it helps with
- decide between
ref()andreactive()for a given value - convert an Options API component to
<script setup> - write a computed property with a getter and a setter
- track a nested field with
watchanddeep - build a single-file component with a task list
Example prompts for the agent
- Rewrite this component using the Composition API and
<script setup> - Why isn't this reactive value updating? Point out where
.valueis missing - Add a
fullNamecomputed property with a getter and a setter
How to install vuejs-development
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-code2Manually: put the files in place
~/.claude/skills/vuejs-development/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vuejs-development/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a codex2Manually: put the files in place
.agents/skills/vuejs-development/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a cursor2Manually: put the files in place
.cursor/skills/vuejs-development/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace vuejs-development2Manually: put the files in place
.github/skills/vuejs-development/SKILL.md1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a gemini-cli2Platform CLI
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/vuejs-developmentManually: put the files in place
.devin/skills/vuejs-development/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about vuejs-development
How do I install vuejs-development in Claude Code?
Run npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-code, then check ~/.claude/skills/vuejs-development/SKILL.md.
What does the vuejs-development skill do?
It hands the agent a Vue 3 reference covering reactivity, the Composition API, single-file components, directives and lifecycle hooks. The material follows the official Vue.js documentation.
Does the skill need an API key or internet access?
It is tied to the /vuejs/docs library in Context7, so reaching current documentation requires access to Context7. Installing the skill itself needs nothing else.
