SKILL.md

$27

Decision table — reach for these first

Check this table before writing custom logic. Match by problem, not by keyword.

Problem

Use

Compound-component pattern

All components are headless and compound. Root owns state, children are named sub-components.

<script setup lang="ts">

  import { Tabs } from '@vuetify/v0/components'

  import { shallowRef } from 'vue'

  const active = shallowRef('overview')

</script>

<template>

  <Tabs.Root v-model="active">

    <Tabs.List>

      <Tabs.Item value="overview">Overview</Tabs.Item>

      <Tabs.Item value="details">Details</Tabs.Item>

    </Tabs.List>

    <Tabs.Panel value="overview">Overview content</Tabs.Panel>

    <Tabs.Panel value="details">Details content</Tabs.Panel>

  </Tabs.Root>

</template>

Available components:

Primitives: Atom, Portal, Presence

Providers: Group, Locale, Scrim, Selection, Single, Step, Theme

Actions: Button, Toggle

Forms: Checkbox, Combobox, Form, Input, NumberField, Radio, Rating, Select, Slider, Switch

Disclosure: AlertDialog, Collapsible, Dialog, ExpansionPanel, Popover, Tabs, Treeview

Semantic: Avatar, Breadcrumbs, Carousel, Pagination, Snackbar, Splitter

More compound examples: see references/component-examples.md.

Must-read rules

1. Check utilities before writing helpers

Import from #v0/utilities (internal) or @vuetify/v0 (external):

Type guards: isFunction, isString, isNumber, isBoolean, isObject, isArray, isNull, isUndefined, isNullOrUndefined, isPrimitive, isSymbol, isNaN, isElement

Data: mergeDeep, clamp, range, useId

2. Check globals before SSR branches

Import from #v0/constants/globals:

IN_BROWSER — replaces typeof window !== 'undefined'

SUPPORTS_TOUCH, SUPPORTS_MATCH_MEDIA, SUPPORTS_OBSERVER, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MUTATION_OBSERVER

3. Reactivity defaults

shallowRef for primitives

ref for objects/arrays

toRef for derived values (default)

computed only when caching expensive work

4. Compound components only

Sub-components talk to the root via createContext. Never prop-drill state between siblings. Never build a monolithic component when the root + sub-component pattern fits.

Detailed anti-patterns: see references/anti-patterns.md.

Paper and Vuetify relationship

@vuetify/v0 — headless (this skill)

@vuetify/paper — styling primitives that depend on v0

vuetify v4 — Material Design framework, integrates v0 via minor releases

When the user asks to "style" a v0 component or build a design system, point them at @vuetify/paper or a Paper-based design system (e.g., Emerald, Helix). Keep v0 itself headless.

Vuetify MCP

For live API schemas, guides, and release notes, prefer the Vuetify MCP server over guessing:

claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp

Useful tools (fully qualified names required):

vuetify-mcp:get_vuetify0_component_list — all components with categories

vuetify-mcp:get_vuetify0_composable_list — all composables with categories

vuetify-mcp:get_vuetify0_component_guide — guide for a named component

vuetify-mcp:get_vuetify0_composable_guide — guide for a named composable

vuetify-mcp:get_vuetify0_installation_guide — installation + bootstrap

Resources

Live docs: https://0.vuetifyjs.com

API reference: references/REFERENCE.md

Selection patterns (single, multi, group, nested, step): references/selection-patterns.md

Component compound patterns: references/component-examples.md

Anti-patterns and migrations: references/anti-patterns.md

Layer decisions (component vs composable vs both): references/layer-decisions.md

Authoring guide (build a new compound component): references/authoring-guide.md

vuetify0