点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

你有没有遇到过这种情况：

打开 Cursor，兴冲冲地让 AI 帮你写一个 Vue 3 组件，结果它给你来了一段 Vue.component() 的 Vue 2 写法；或者写了一堆 this.$xxx，全是 Options API 的老味道；再不然就是用 ref 包裹了一个对象，而不是更高效的 shallowRef。

不是AI 不好用，而是它不够了解 Vue 3。

这正是 vue-skills 要解决的问题。

什么是 vue-skills？

vue-skills 是一套专为 AI Agent 设计的 Vue 3 技能增强包，目前在 GitHub 上已获得 1.8k Star。

它的核心思路很直接：把 Vue 3 的最佳实践、常见陷阱、版本特性打包成"技能"注入给 AI，让 Cursor、Claude Code 这类 AI 助手在处理 Vue 相关任务时，能输出真正符合 Vue 3 规范的代码。

项目定位是"早期实验性 / 社区项目"，但背后的方法论非常扎实。它将 skill 分为两类：

Capability 类：AI 没有这个 skill 根本解决不了的问题。比如 Vue 3 特定版本的 API 行为、未公开的边界情况、训练数据截止后的新特性。

Efficiency 类：AI 能解决但质量差。比如最佳实践模式、一致性写法、性能优化方案。

这个分类逻辑很重要，它直接决定了每个 skill 的价值——不是所有的 AI 输出都一样烂，要精准补足真正的短板。

质量保障：自动化 eval 验证

每一条 skill 规则都经过严格验证：先不加 skill 跑一遍基准测试，再加 skill 跑一遍，只有"加了就能过、不加就挂"的规则才会保留。这保证了 skill 库里没有废话。

安装方式

方式一：npx 安装（推荐）

npx skills add vuejs-ai/skills

一行命令，所有 8 个 skill 全部安装。

方式二：Claude Code 插件市场

# 添加插件源
/plugin marketplace add vuejs-ai/skills

# 安装单个 skill
/plugin install vue-best-practices@vue-skills

# 安装多个 skill
/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills

按需安装，项目里用到哪个装哪个。

使用方式

安装后，在提示词前面加上触发词即可激活：

use vue skill, 帮我写一个带搜索功能的用户列表组件

加了前缀会显著提升触发稳定性，确保 AI 按照 Vue 3 规范输出。

8 个核心 Skill 速览

1. vue-best-practices（最核心）

覆盖 Vue 3 + Composition API + TypeScript 的全套最佳实践：

• 组合式函数的正确拆分方式

• 响应式数据：何时用 ref，何时用 shallowRef，何时用 reactive

• 常见性能陷阱（如不必要的深度监听）

• SSR 场景下的注意事项

2. vue-options-api-best-practices

专门针对 Options API 写法（data()、methods、computed）：

• this 上下文的正确用法

• 生命周期钩子的调用顺序

• TypeScript 与 Options API 的结合方式

老项目维护、不想迁移 Composition API 的团队，这个 skill 很实用。

3. vue-router-best-practices

Vue Router 4 场景：

• 导航守卫的正确使用姿势

• 路由参数传递与组件生命周期的关系

• 动态路由加载的最佳模式

4. vue-pinia-best-practices

Pinia 状态管理：

• Store 的 setup 式写法 vs options 式写法的选择

• 响应式数据在 store 中的注意点

• 跨 store 状态共享模式

5. vue-testing-best-practices

测试场景，覆盖 Vitest + Vue Test Utils + Playwright：

• 组件单测的正确写法

• 异步组件的测试技巧

• E2E 测试最佳实践

6. vue-jsx-best-practices

Vue 里写 JSX 的注意事项，尤其是和 React JSX 的语法差异——这块 AI 最容易混淆。

7. vue-debug-guides

调试向导，实战价值极高：

• 运行时报错解读

• Vue warn 信息的含义

• 异步错误处理

• SSR hydration 问题排查

8. create-adaptable-composable

创建高质量可复用 composable：

• MaybeRef / MaybeRefOrGetter 输入参数模式

• 让 composable 对响应式数据更"友好"

实战对比：加了 vue-skills 之后有多大区别？

项目里有一个 Todo App 示例，展示了加 skill 前后的代码差异。

不用 skill 的 AI 输出

AI 往往直接把所有逻辑堆在一个组件里，用 ref 包裹复杂对象，没有关注点分离：

<script setup>
import { ref } from 'vue'

const todos = ref([])
const inputText = ref('')

function addTodo() {
  if (inputText.value.trim()) {
    todos.value.push({ id: Date.now(), text: inputText.value, done: false })
    inputText.value = ''
  }
}
// ... 更多逻辑堆在这里
</script>

用了 use vue skill 之后

AI 会自动将状态逻辑提取为 composable，对纯数据使用 shallowRef 优化性能，组件更轻量：

// useTodos.ts
import { shallowRef } from'vue'

exportfunction useTodos() {
const todos = shallowRef<Todo[]>([])

function addTodo(text: string) {
    todos.value = [...todos.value, { id: Date.now(), text, done: false }]
  }

return { todos, addTodo }
}

组件本身只负责视图逻辑，清晰得多。

改进点：

• 代码可读性提升

• 组件按职责拆分

• 状态移入 composable（useTodos.ts）

• 对原始类型响应式数据使用 shallowRef

这些都是 Vue 3 的推荐写法，AI 在没有 skill 的情况下很少能主动做到。

生态延伸

vue-skills 并不孤单，围绕它正在形成一个小生态：

• **vueuse/vueuse-skills**：专为 VueUse 开发准备的 Agent skill

• **onmax/nuxt-skills**：Nuxt 框架专属 skill

• **antfu/skills**：Anthony Fu 整理的 Vue/Vite/Nuxt 技能集合

这个方向的本质是：给 AI 装领域知识，让它在特定技术栈下表现得像领域专家。不只是 Vue，React、Angular、甚至各类业务框架都可以这样做。

这也许是未来 AI 辅助开发的一个重要范式——不是让 AI 通用地更强，而是让它在你的技术栈里精准地更强。

小结

维度	说明
适合人群	Vue 3 开发者 + 使用 Cursor / Claude Code 的前端
核心价值	让 AI 输出符合 Vue 3 规范的代码
安装成本	一行命令，即装即用
skill 数量	8 个，覆盖开发全场景
项目状态	活跃维护，社区驱动

如果你正在用 AI 写 Vue 代码，强烈建议装上 vue-skills 试试——对比一下加前缀和不加前缀的输出，差距会让你印象深刻。

GitHub 地址：https://github.com/vuejs-ai/skills

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍