vuejs-development — скилл для Claude Code: Vue 3 и Composition API
Скилл для ИИ-агента, который подсказывает по Vue 3: реактивность, Composition API, однофайловые компоненты и директивы. Пригодится, когда пишете SPA или переходите с Options API.
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-codeЧто делает vuejs-development
Скилл опирается на официальную документацию Vue.js и разбирает её основные темы: систему реактивности, Composition API, однофайловые компоненты, директивы и хуки жизненного цикла. Внутри — примеры кода на JavaScript: ref() и reactive(), вычисляемые свойства, наблюдатели watch и watchEffect, компоненты на <script setup> и без него.
Отдельно разобрано, когда брать ref(), а когда reactive(): первое для примитивов и одиночных значений, второе для объектов с несколькими полями. Есть примеры с defineProps, defineEmits и хуком onMounted. Всё это — готовые образцы, которые агент подставляет в ваш код, а не библиотека, которую надо подключать к проекту.
Скилл привязан к библиотеке /vuejs/docs в Context7, поэтому ответы опираются на актуальную документацию Vue. Ставится одной командой через npx skills add; для GitHub Copilot — через gh skill install. Никаких ключей API и зависимостей для установки не нужно.
Какие задачи решает
- разобраться, чем
ref()отличается отreactive()и что выбрать - переписать компонент с Options API на
<script setup> - настроить вычисляемое свойство с геттером и сеттером
- отследить изменение вложенного поля через
watchсdeep - собрать однофайловый компонент со списком задач
Примеры запросов агенту
- Перепиши этот компонент на Composition API с
<script setup> - Почему здесь не обновляется реактивное значение? Покажи, где нужен
.value - Сделай вычисляемое свойство
fullNameс геттером и сеттером
Как установить vuejs-development
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-code2Вручную: положить файлы
~/.claude/skills/vuejs-development/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vuejs-development/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a codex2Вручную: положить файлы
.agents/skills/vuejs-development/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a cursor2Вручную: положить файлы
.cursor/skills/vuejs-development/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace vuejs-development2Вручную: положить файлы
.github/skills/vuejs-development/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/vuejs-developmentВручную: положить файлы
.devin/skills/vuejs-development/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vuejs-development
Как установить vuejs-development в Claude Code?
Выполните npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-code, затем проверьте файл ~/.claude/skills/vuejs-development/SKILL.md.
Что делает скилл vuejs-development?
Даёт агенту справочник по Vue 3: реактивность, Composition API, однофайловые компоненты, директивы и хуки жизненного цикла. Ответы строятся на официальной документации Vue.js.
Нужен ли доступ к интернету или ключ API для работы скилла?
Скилл привязан к библиотеке /vuejs/docs в Context7, поэтому для получения актуальной документации нужен доступ к Context7. Для самой установки ничего дополнительно не требуется.
