vue
antfu/skills · Agent Skill
Vue 3 Composition API и рекомендации по реактивности для SFC, макросов script setup и встроенных компонентов.
Перейти к установке ↓Обзор
| Автор |  antfuСообщество |
|---|---|
| Репозиторий | antfu/skills ↗ |
| Папка скилла | vue |
| Звёзды | 6 011 |
| Форки | 338 |
| Файлы | 5 |
| Лицензия | MIT |
| Обновлён | 23 октября 2026 г. |
| Ссылки | Исходник скилла ↗ · Репозиторий ↗ |
Проверка Mozgi
Что мы нашли в файлах скилла. Подробности — по подписке.
Установка
Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.
Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.
Установи мне скилл «vue» с mozgi.io (https://mozgi.io/skills/antfu-vue/). 1. Скачай архив: https://mozgi.io/skills/antfu-vue/download Если не скачивается — возьми папку скилла из исходника: https://github.com/antfu/skills/tree/main/skills/vue 2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне. 3. Положи папку «vue» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.). 4. Убедись, что получилось <папка скиллов>/vue/SKILL.md. 5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче. Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.
git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills mkdir -p .claude/skills cp -r /tmp/skills/skills/vue .claude/skills/vue
Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /vue. Для всех проектов сразу — папка ~/.claude/skills.
git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills mkdir -p .agents/skills cp -r /tmp/skills/skills/vue .agents/skills/vue
Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $vue. Для всех проектов — ~/.agents/skills.
git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills mkdir -p .cursor/skills cp -r /tmp/skills/skills/vue .cursor/skills/vue
Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.
git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills mkdir -p .gemini/skills cp -r /tmp/skills/skills/vue .gemini/skills/vue
Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.
Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.
Содержимое SKILL.md
Оригинальный текст автора · только чтениеVue
> Based on Vue 3.5, generated at 2026-09-25. Always use Composition API with <script setup lang="ts">.
Preferences
- Prefer TypeScript over JavaScript
- Prefer
<script setup lang="ts">over<script> - For performance, prefer
shallowRefoverrefif deep reactivity is not needed - Always use Composition API over Options API
- Discourage using Reactive Props Destructure
Core
| Topic | Description | Reference |
|-------|-------------|-----------|
| Script Setup & Macros | <script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | script-setup-macros ↗ |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | core-new-apis ↗ |
Features
| Topic | Description | Reference |
|-------|-------------|-----------|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | advanced-patterns ↗ |
Quick Reference
Component Template
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
const props = defineProps<{
title: string
count?: number
}>()
const emit = defineEmits<{
update: [value: string]
}>()
const model = defineModel<string>()
const doubled = computed(() => (props.count ?? 0) * 2)
watch(() => props.title, (newVal) => {
console.log('Title changed:', newVal)
})
onMounted(() => {
console.log('Component mounted')
})
</script>
<template>
<div>{{ title }} - {{ doubled }}</div>
</template>Key Imports
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'Вопросы и ответы
Что делает скилл vue?
Vue 3 Composition API и рекомендации по реактивности для SFC, макросов script setup и встроенных компонентов.
Как установить vue?
Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.
С какими нейросетями работает vue?
Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому vue подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.
Скилл vue бесплатный?
Скилл опубликован автором antfu в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.
Безопасно ли устанавливать скиллы?
Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.
Чем скилл отличается от MCP-сервера или плагина?
MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.
Похожие скиллы
Все скиллы →nitro
Nitro — это серверный инструментарий независимый от фреймворка (подающий Nuxt) для построения и развертывания веб-серверов где угодно. Используйте при работе с nitro.config, серверными маршрутами/обработчиками событий, правилами маршрутов, кэшированием, хранилищем, задачами, веб-сокетами или развертыванием в Node/Bun/Deno/Cloudflare/Vercel.
antfu6k
unocss
Руководство по двигателю атомарных CSS UnoCSS для правил, сокращений и пресетов, таких как Wind, Icons и Attributify.
antfu6k
antfu-design
конвенции дизайна в стиле antfu, расширенные, UnoCSS-first, классные семантические токены с двойным светлым/темным режимом для инструментов и интерфейсов разработчика, плюс полировка дизайна, анти-слоп и микро-взаимодействия для посадочных страниц и поверхностей продукта, использовать при построении или переработке любого интерфейса с UnoCSS
antfu84
prototype
Создает одноразовые прототипы, чтобы быстро ответить на вопросы дизайна или логических вопросов.
mattpocock304k
design-philosophy
Применяет философию дизайна VS Code для обоснования UI, используя ценности, принципы и действия вместо пикселей. Помогает при разработке, ревью и обратной связи по визуальным элементам.
microsoft192k
canvas-design
Создавайте оригинальные визуальные дизайны и произведения искусства на цифровых холстах, используя философию дизайна, сосредоточив внимание на форме, пространстве и цвете.
anthropics184k