vue · uni-helper — скилл для Claude Code: что делает и как установить
Помогает проектировать компоненты Vue и настраивать реактивность. Пригодится при переходе на скрипт с сетапом и composables.
npx skills add uni-helper/skills --skill vue -a claude-codeЧто делает vue
Скилл добавляет в контекст модели набор правил и ссылок на документацию по созданию интерфейсов на Vue с использованием связки <script setup> и TypeScript. Ассистент ориентируется на реактивные примитивы ref, computed и функции слежения, избегая устаревших подходов.
Внутри описаны стандарты для типизированных входных свойств через интерфейсы, генерации событий и связывания через defineModel. Охвачены также провайдеры зависимостей через provide и inject, директивы и Suspense для асинхронных компонентов.
Инструкции требуют строгого следования TypeScript и script setup. Если в проекте используется старый Options API или чистый JavaScript без типов, сгенерированный код потребует ручной переделки.
Какие задачи решает
- настроить двустороннее связывание данных через defineModel
- объявить типизированные свойства компонента через TypeScript
- вынести логику состояния в переиспользуемый composable
- деструктурировать входные параметры с сохранением реактивности
Примеры запросов агенту
- Создай компонент поля ввода с поддержкой
v-modelчерезdefineModel - Вынеси логику работы с состоянием фильтра в отдельный composable
- Напиши компонент карточки с типизированными пропсами через
script setup lang="ts"
Как установить vue
1Через Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a claude-code2Вручную: положить файлы
~/.claude/skills/vue/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vue/
1Через Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a codex2Вручную: положить файлы
.agents/skills/vue/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a cursor2Вручную: положить файлы
.cursor/skills/vue/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install uni-helper/skills vue2Вручную: положить файлы
.github/skills/vue/SKILL.md1Через Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a gemini-cli2Командой платформы
gemini skills install https://github.com/uni-helper/skills --path skills/vueВручную: положить файлы
.devin/skills/vue/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vue
Как установить vue в Claude Code?
Запустите команду npx skills add uni-helper/skills --skill vue -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/vue/SKILL.md.
Что делает скилл vue?
Он задаёт правила генерации кода для компонентов Vue, настраивает работу с реактивностью и рекомендует синтаксис script setup.
Что рекомендует скилл для объявления состояния?
Скилл предписывает использовать ref() вместо reactive() при определении реактивных переменных в компонентах.
Исходный текст
SKILL.md · MIT
--- name: vue description: Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns. metadata: author: Anthony Fu version: "2026.1.28" source: Generated from https://github.com/vuejs/docs, scripts located at https://github.com/antfu/skills --- # Vue > The skill is based on Vue 3.5+, generated at 2026-01-28. Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with `<script setup>` and TypeScript is the recommended approach for building Vue applications. ## Core References | Topic | Description | Reference | |-------|-------------|-----------| | Reactivity System | ref, reactive, computed, watch, and watchEffect | [core-reactivity](references/core-reactivity.md) | ## Components | Topic | Description | Reference | |-------|-------------|-----------| | Props | Declare and validate component props with TypeScript | [components-props](references/components-props.md) | | Events (Emits) | Emit custom events from components | [components-emits](references/components-emits.md) | | Slots | Pass template content to child components | [components-slots](references/components-slots.md) | | v-model | Two-way binding on custom components | [components-v-model](references/components-v-model.md) | | Lifecycle Hooks | Run code at specific component lifecycle stages | [components-lifecycle](references/components-lifecycle.md) | ## Features ### Script Setup & TypeScript | Topic | Description | Reference | |-------|-------------|-----------| | Script Setup | Composition API syntactic sugar for SFCs | [features-script-setup](references/features-script-setup.md) | | TypeScript | Type-safe Vue components with Composition API | [features-typescript](references/features-typescript.md) | ### Reusability | Topic | Description | Reference | |-------|-------------|-----------| | Composables | Encapsulate and reuse stateful logic | [features-composables](references/features-composables.md) | | Custom Directives | Low-level DOM manipulation directives | [features-directives](references/features-directives.md) | | Template Refs | Direct DOM and component instance access | [features-template-refs](references/features-template-refs.md) | ## Advanced | Topic | Description | Reference | |-------|-------------|-----------| | Provide/Inject | Dependency injection across component tree | [advanced-provide-inject](references/advanced-provide-inject.md) | | Async & Suspense | Top-level await pitfalls, async components, Suspense | [advanced-async-suspense](references/advanced-async-suspense.md) | ## Key Recommendations - **Use `<script setup lang="ts">`** for all components - **Prefer `ref()` over `reactive()`** for declaring state - **Use type-based prop declarations** with interfaces - **Use `defineModel()`** for v-model (3.4+) - **Destructure props reactively** (3.5+) for cleaner code - **Extract composables** for reusable stateful logic
© Anthony Fu · MIT · uni-helper/skills
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — vue от других авторов.