К основному содержанию
скилл CX Codex

vue · uni-helper — скилл для Claude Code: что делает и как установить

Помогает проектировать компоненты Vue и настраивать реактивность. Пригодится при переходе на скрипт с сетапом и composables.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add uni-helper/skills --skill vue -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/vue/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/vue/

По шагам, с командами для каждой платформы: Как установить скилл в 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 от других авторов.

vue Anthony Fu Скилл подсказывает агенту, как писать Vue 3-компоненты через Composition API и script setup. Нужен при работе с Vue SFC и реактивностью. CX Codex +1 35 800установок vue vercel-labs Скилл для преобразования JSON-спецификаций в Vue 3 компоненты с привязкой данных, условиями видимости и обработкой действий. Нужен, если вы генерируете интерфейсы через ИИ или строите UI из JSON. CX Codex +1 1 400установок vue Claude MPM Team Скилл по Vue 3 для ИИ-агента: Composition API, реактивность, однофайловые компоненты, Vue Router, Pinia, TypeScript и Vite. Пригодится, когда агент пишет фронтенд на Vue. CX Codex +1 381установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора4

Спонсоры проекта

Компании, которые помогают держать аналитику открытой