Agent Skills › victorgarciaesgi/regle › vue

vue

GitHub

提供 Vue 3 Composition API 开发规范，涵盖 script setup、响应式系统及内置组件使用指南。适用于编写 Vue SFC 组件、定义 Props/Emits 及处理生命周期等前端开发任务。

.cursor/skills/vue/SKILL.md victorgarciaesgi/regle

Trigger Scenarios

编写 Vue 单文件组件使用 Composition API 或 script setup 实现 Vue 响应式逻辑

Install

npx skills add victorgarciaesgi/regle --skill vue -g -y

More Options

Use without installing

npx skills use victorgarciaesgi/regle@vue

指定 Agent (Claude Code)

npx skills add victorgarciaesgi/regle --skill vue -a claude-code -g -y

安装 repo 全部 skill

npx skills add victorgarciaesgi/regle --all -g -y

预览 repo 内 skill

npx skills add victorgarciaesgi/regle --list

SKILL.md

Frontmatter

{
    "name": "vue",
    "metadata": {
        "author": "Anthony Fu",
        "source": "Generated from https:\/\/github.com\/vuejs\/docs, scripts at https:\/\/github.com\/antfu\/skills",
        "version": "2026.1.31"
    },
    "description": "Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps\/defineEmits\/defineModel, watchers, or using Transition\/Teleport\/Suspense\/KeepAlive."
}

Vue

Based on Vue 3.5. Always use Composition API with <script setup lang="ts">.

Preferences

Prefer TypeScript over JavaScript
Prefer <script setup lang="ts"> over <script>
For performance, prefer shallowRef over ref if 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'