# vuetify0

Tells the agent which @vuetify/v0 component or composable to reach for instead of hand-rolling it — buttons, dialogs, selection, virtual lists.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 721 installs · ★ 740
- Author: vuetifyjs
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vuetifyjs/0/tree/HEAD/skills/vuetify0/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/vuetify0

## What it 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`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vuetifyjs/0 --skill vuetify0 -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vuetify0/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vuetify0/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vuetifyjs/0 --skill vuetify0 -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vuetify0/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vuetifyjs/0 --skill vuetify0 -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vuetify0/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vuetifyjs/0 vuetify0
```

2. **Manually: put the files in place**
- File: `.github/skills/vuetify0/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vuetifyjs/0 --skill vuetify0 -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vuetifyjs/0 --path skills/vuetify0
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vuetify0/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vuetifyjs/0 --skill vuetify0 -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vuetifyjs/0/tree/HEAD/skills/vuetify0/SKILL.md

## When to use it
- 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
- Build the tag filter with `createSelection` from `@vuetify/v0`, no custom selection logic
- I need a dialog with focus containment — use `Dialog` and `useFocusTrap` instead of rolling my own
- Check that `useDate` has `createDatePlugin` with an adapter installed

## Similar
- [vueuse-functions](https://affpapa.org/en/nevibecode/skills/vueuse-functions.md) — skill · 3700 installs
- [nuxt-data](https://affpapa.org/en/nevibecode/skills/nuxt-data.md) — skill · 388 installs
- [antdv-next](https://affpapa.org/en/nevibecode/skills/antdv-next.md) — skill · 1400 installs
- [nuxt-ui](https://affpapa.org/en/nevibecode/skills/nuxt-ui.md) — skill · 19800 installs
- [web-component-design](https://affpapa.org/en/nevibecode/skills/web-component-design.md) — skill · 13167 installs
- [reka-ui](https://affpapa.org/en/nevibecode/skills/reka-ui.md) — skill · 7400 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md