前几天，我们刚介绍过 Vercel 发布了 React 的官方 Agent Skills，把 10 年的最佳实践打包喂给了 AI。

当时后台就有不少读者在问：“Vue 呢？Vue 什么时候才有这种待遇？”

这不，它来了！

虽然不是官方出品，但这个名为 vue-skills 的开源项目被 ——Vue 作者尤雨溪（Evan You）亲自转发点赞。

为什么 Vue 更需要 Skills？

写过 Vue 的朋友都知道，Vue 的版本迭代跨度很大。从 Vue 2 的 Options API 到 Vue 3 的 Composition API，再到后来 <script setup> 的普及，以及 Vue 3.3/3.4/3.5 引入的 defineModel 等新语法...

AI 其实很“晕”。

大模型训练数据的滞后性，导致它们在写 Vue 代码时经常出现“时空错乱”：

• 明明是 Vue 3.5 项目，却还在用老旧的 props 传递方式。

• 分不清 volar 和 vue-tsc 的配置区别。

• 在 TypeScript 类型推导上经常“幻觉”，写出过时的类型定义。

vue-skills：专治 AI 的“顽疾”

这个由开发者 hyf0 开源的项目 vue-skills，正是为了解决这些痛点而生。

与普通的“提示词库”不同，作者采用了一种非常严谨的科学验证方法来制作这些 Skills。

在 README 中，作者详细介绍了每一条 Skill 的诞生过程：

1. 收集真实痛点：所有问题都源自生产环境的真实开发。

2. 多模型验证（Multi-Model Verification）：这是最硬核的地方。

• 基准测试：先确认 AI（如 Claude）在没有 Skill 的情况下会写错。

• 技能测试：确认加上 Skill 后，AI 能写对。

• 淘汰机制：如果哪怕是较弱的模型（如 Haiku）都能自己做对，这条 Skill 就会被删除，绝不滥竽充数。

目前的 Skills 被分为了两类：

• 1. 能力类（Capability）

这类规则是为了解决 AI 根本搞不定 的问题。比如：

• Volar 3.0 Breaking Changes：修复 IDE 插件升级带来的破坏性变更配置。

• vue-tsc strictTemplates：解决模板中未定义组件导致的类型报错。

• defineModel 更新事件：教 AI 正确使用 Vue 3.4+ 的 defineModel 语法，避免画蛇添足地手写 update 事件。

• 2. 效率类（Efficiency）

这类规则是为了让 AI 写得更好。比如：

• SSR 中的 HMR 问题：教 AI 如何正确配置服务端渲染的热更新。

• Pinia Store Mocking：提供标准的 Store Mock 模式，方便写单元测试。

实际上手体验

安装非常简单，推荐使用我们之前介绍过的 Skills Hub 进行管理，Skills 乱麻了！这款开源神器彻底终结噩梦，Cursor/Claude 一键全同步这样可以一次安装，同步到 Cursor、Claude Code 等所有工具中。

打开 Skills Hub，点击 "Git Import"，粘贴仓库地址：

https://github.com/hyf0/vue-skills

(Skills Hub 会自动识别并导入仓库中的 Skills)

安装后，建议在向 AI 提问时加上前缀 Use vue skill，这样能显式激活这些规则。

比如，当你让 AI 提取组件 Props 类型时，如果没有 Skill，它可能会写出复杂的 PropType 定义；但有了 vue-skills 中的 extract-component-props 规则，它会优先使用更现代、更 TS 友好的 defineProps<T>() 泛型写法。

---

虽然作者谦虚地说这只是一个“早期实验”，但在 React 和 Vue 社区接连出现这种结构化的 Agent Skills 之后，我们隐约看到了文档进化的下一个形态。