vuetify0 — Claude Code skill: headless Vue 3 components
Tells the agent which @vuetify/v0 component or composable to reach for instead of hand-rolling it — buttons, dialogs, selection, virtual lists.
npx skills add vuetifyjs/0 --skill vuetify0 -a claude-codeWhat vuetify0 does
This skill maps out @vuetify/v0, a headless Vue 3 library: components and composables that ship behavior and ARIA, not visuals. The core is a decision table that matches a problem to an API. Overlay or modal — Dialog. Anchored overlay — Popover. Single-choice state — createSingle; multi-choice — createSelection; select-all with tri-state — createGroup; nested selection — createNested. Forms are covered by createForm with createValidation, plus createSlider, createCombobox, createOtp.
Before writing a helper, the skill says to check the utility list. Type guards like isString, isArray, isNullOrUndefined are already there, along with mergeDeep, clamp, range and useId. For environment checks it points to IN_BROWSER, SUPPORTS_TOUCH, SUPPORTS_MATCH_MEDIA instead of typeof window.
One thing breaks right away: useDate needs a plugin. Most use* composables run without one and fall back to defaults, but calling useDate without createDatePlugin and an adapter throws. App-wide theme, locale, storage and breakpoints come from createThemePlugin, createLocalePlugin, createStoragePlugin and createBreakpointsPlugin. Compound components follow one pattern: the root owns state, named sub-components read it through createContext.
What it helps with
- pick a ready component instead of writing a button or dialog by hand
- build multi-select state for filters and tag pickers
- wire up a form with async validation and dirty tracking
- render a long list with virtualization and pagination
- check browser capabilities without
typeof window
Example prompts for the agent
- Build the tag filter with
createSelectionfrom@vuetify/v0, no custom selection logic - I need a dialog with focus containment — use
DialoganduseFocusTrapinstead of rolling my own - Check that
useDatehascreateDatePluginwith an adapter installed
How to install vuetify0
1Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a claude-code2Manually: put the files in place
~/.claude/skills/vuetify0/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vuetify0/
1Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a codex2Manually: put the files in place
.agents/skills/vuetify0/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a cursor2Manually: put the files in place
.cursor/skills/vuetify0/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vuetifyjs/0 vuetify02Manually: put the files in place
.github/skills/vuetify0/SKILL.md1Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a gemini-cli2Platform CLI
gemini skills install https://github.com/vuetifyjs/0 --path skills/vuetify0Manually: put the files in place
.devin/skills/vuetify0/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -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 vuetify0
How do I install vuetify0 in Claude?
Run npx skills add vuetifyjs/0 --skill vuetify0 -a claude-code. The skill file lands at ~/.claude/skills/vuetify0/SKILL.md.
What does the vuetify0 skill do?
It hands the agent a map of @vuetify/v0: a problem-to-API table, the component, composable and utility lists, plus rules for reactivity and compound components.
What does vuetify0 need to work?
The package itself installs with pnpm install @vuetify/v0. Most composables run without a plugin, but useDate throws unless createDatePlugin is set up with an adapter.
