vuetify0 — скилл для Claude Code: headless-компоненты Vue 3
Подсказывает агенту, какие компоненты и composables из @vuetify/v0 взять вместо самописной логики — от кнопки до виртуального списка.
npx skills add vuetifyjs/0 --skill vuetify0 -a claude-codeЧто делает vuetify0
Скилл описывает библиотеку @vuetify/v0: headless-компоненты и composables для Vue 3, которые дают поведение и ARIA, но не рисуют внешний вид. Внутри — таблица выбора: под каждый типовой случай подставлен готовый API. Нужен диалог или поповер — Dialog и Popover. Нужно состояние выбора — createSelection, createSingle, createGroup, createNested. Формы закрывают createForm с createValidation, createSlider, createCombobox, createOtp. Есть разделы про утилиты, проверки браузера и правила реактивности.
Перед тем как писать свой помощник, скилл советует свериться со списком утилит: типовые проверки вроде isString, isArray, isNullOrUndefined уже есть, как и mergeDeep, clamp, range, useId. Для проверок окружения предлагается брать константы IN_BROWSER, SUPPORTS_TOUCH, SUPPORTS_MATCH_MEDIA вместо typeof window.
Одна вещь ломается сразу: useDate не работает без плагина. Остальные use* обычно запускаются без него и берут значения по умолчанию, а вот вызов useDate без createDatePlugin с адаптером выбрасывает исключение. Для темы, локали, хранилища и брейкпоинтов на уровне приложения ставят createThemePlugin, createLocalePlugin, createStoragePlugin, createBreakpointsPlugin. Составные компоненты устроены так: корень держит состояние, дочерние подкомпоненты читают его через createContext.
Какие задачи решает
- выбрать готовый компонент вместо самописной кнопки или диалога
- собрать множественный выбор с тегами и фильтрами
- подключить форму с асинхронной валидацией и отслеживанием изменений
- отрисовать длинный список с виртуализацией и пагинацией
- проверить окружение браузера без
typeof window
Примеры запросов агенту
- Собери фильтр по тегам на
createSelectionиз@vuetify/v0, без своей логики выбора - Нужен диалог с ловушкой фокуса — возьми
DialogиuseFocusTrapвместо ручной реализации - Проверь, что для
useDateподключёнcreateDatePluginс адаптером
Как установить vuetify0
1Через Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a claude-code2Вручную: положить файлы
~/.claude/skills/vuetify0/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vuetify0/
1Через Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a codex2Вручную: положить файлы
.agents/skills/vuetify0/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a cursor2Вручную: положить файлы
.cursor/skills/vuetify0/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vuetifyjs/0 vuetify02Вручную: положить файлы
.github/skills/vuetify0/SKILL.md1Через Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a gemini-cli2Командой платформы
gemini skills install https://github.com/vuetifyjs/0 --path skills/vuetify0Вручную: положить файлы
.devin/skills/vuetify0/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vuetifyjs/0 --skill vuetify0 -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о vuetify0
Как установить vuetify0 в Claude?
Выполни npx skills add vuetifyjs/0 --skill vuetify0 -a claude-code. Файл скилла появится по пути ~/.claude/skills/vuetify0/SKILL.md.
Что делает скилл vuetify0?
Он даёт агенту карту библиотеки @vuetify/v0: таблицу «задача — API», список компонентов, composables и утилит, правила реактивности и работы с составными компонентами.
Что нужно для работы vuetify0?
Сам пакет ставится через pnpm install @vuetify/v0. Большинство composables работают без плагина, но useDate без createDatePlugin с адаптером падает с ошибкой.
