vue-skills

一、Vue Skills——Vue 核心团队出品的 AI Agent 技能包，专治 AI 幻觉代码

Vue Skills 不是一款”独立 AI 产品”，而是挂载在 AI 编程助手（Cursor、Claude Code、GitHub Copilot Agent、Gemini CLI、VS Code Agent 等）之上的技能增强包，基于 Anthropic 提出的 Agent Skills 协议​ 工作。

Vue Skills 核心功能快览

Vue Skills 定位”教 AI 正确写 Vue”，非组件库也非教程，而是把 Vue 3 组合式 API、Pinia、Vue Router、测试、JSX、debug 等 8 大技能打包成 Agent 可调用的规则+脚本，支持按需加载、不占 Token，提问加 Use vue skill,前缀即可触发。由 VoidZero 成员 Yunfei He 发起，Vue 社区维护，MIT 开源免费，目前已 1.6k+ Stars，经 eval 验证”不加挂→不通过，加挂→完美解决”才发布。

它的发起人是 Yunfei He（Vue 核心团队成员、VoidZero 成员），目前社区维护，有两个常被提到的仓库：

仓库	定位	维护者
vuejs-ai/skills	官方聚合版，8 个核心技能一键装	Vue 社区
hyf0/vue-skills	深度强化版，规则更严、覆盖 SSR/VueUse	hyf0（Vue 团队成员）

💡 一句话区分：大模型的”大脑”负责思考，Agent 的”手”负责执行，Skills 就是让手有”肌肉记忆”——不用每次重新解释”Vue 3 组合式 API 该怎么写”。

关键量化数据（截至 2026 年 1-3 月）：

• ⭐ GitHub Stars：1.6k–1.8k
• 🍴 Forks：77
• 👥 核心贡献者：6 人
• 📦 核心技能数：8 个
• 📜 协议：MIT 开源免费

---

二、Vue Skills 的主要功能和特点

🎯 解决的传统 Rules 三大痛点

以往开发者用 .md规则文件约束 AI，有三个老问题：

1. 上下文占用——静态规则长期吃 Token，挤占核心逻辑
2. 无法动态执行——只能描述”应该怎么做”，不能跑检查脚本
3. 加载效率低——全量加载，不能按需调用

🔧 Vue Skills 的四个核心机制

• 按需加载：AI 先读轻量元数据索引，真到”写 Pinia Store”才加载完整指令，省 Token
• 内置脚本：含可执行脚本，AI 直接调，不用读懂脚本实现
• 动态适配：交互式配置可勾选 Vue 2/3、组合式/选项式、是否启 Pinia
• 无需 MCP：不走 Model Context Protocol，配置更轻

📚 8 大核心技能覆盖全景

技能名	解决场景
vue-best-practices	Vue 3 + TS + Composition API 最佳实践与常见坑
vue-options-api-best-practices	Options API 的 this陷阱，Vue 2 迁移场景
vue-router-best-practices	路由守卫、参数监听、组件缓存防内存泄漏
vue-pinia-best-practices	Store 设计、类型推导、易错写法
vue-testing-best-practices	Vitest / Vue Test Utils / Playwright
vue-jsx-best-practices	Vue JSX 与模板的语法差异
vue-debug-guides	运行时错误、异步错误、水合不匹配
create-adaptable-composable	生成支持 MaybeRef/Getter 的可复用 composable

📌 每条 skill 都经过 eval 验证：不加 skill AI 挂、加了就过——才留进库，所以库里基本没废话。

第三方实测数据

根据 guideai 的连续 50 次生成测试：

• 功能达成率 98.5%（49/50 精准完成，唯一偏差是没自动引 lodash-es）
• 异常报错率 ≤1%（仅一次批量 10 组件因 Token 截断）
• 风格指令遵循度 100%（指定 <script setup>/ Options / TS / JS 全命中）

---

三、如何使用 Vue Skills？（详细操作指南）

方式一：npx 一键安装（最常用）

# 装聚合版（vuejs-ai/skills，8 个技能全拿下）
npx skills add vuejs-ai/skills

# 或装 hyf0 深度版的单技能
npx skills add https://github.com/hyf0/vue-skills --skill vue-best-practices

运行后会让你选项目级 / 全局、符号链接 / 复制到其他 agent，按提示走完就行。装完 ~/.agents/skills或 ~/.roo/skills里能看到技能文件夹。

方式二：Claude Code 插件市场

# 添加市场源
/plugin marketplace add vuejs-ai/skills

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

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

方式三：Roo Code / Trae / Cursor 手动挂

装完后把 vue-skills文件夹移到对应 Agent 的全局 skills 目录（如 ~/.roo/skills、~/.trae/skills），工具一般会自动识别，不用手动开。

⚠️ 使用的关键技巧

提问时务必加前缀：Use vue skill, 帮我创建一个带 Pinia 的待办列表组件

不加这个前缀，AI 可能不走技能规则，又回到”凭感觉瞎写”模式。

---

四、官方地址与获取方式

渠道	地址
vuejs-ai/skills（官方聚合仓库）	https://github.com/vuejs-ai/skills
hyf0/vue-skills（深度强化版）	https://github.com/hyf0/vue-skills
协议	MIT（免费商用）
安装命令	npx skills add vuejs-ai/skills

💡 没有独立官网、没有桌面客户端、没有 APP——它就是个 GitHub 上的技能仓库 + npx 分发，装到已有 AI 编辑器里用。

---

五、Vue Skills vs 同类型竞品对比

5.1 Vue 生态内三款 Skills 横向对比

维度	vuejs-ai/skills（官方聚合）	hyf0/vue-skills（深度版）	antfu/skills/vue（轻量版）
维护者	Vue 社区	hyf0（Vue 核心）	antfu（Vite 核心）
技能数	8 个全覆盖	单 vue-best-practices 深度强化	单 vue 基础规范
规则深度	中	深（含 SSR、VueUse、目录抽象）	浅（强制 <script setup lang="ts">等）
适合场景	多数 Vue 3 项目	大型项目 / 团队协作	快速起步 / 小项目
生成速度	正常	稍慢（规则多）	快
严格度	中	高（新手可能觉得严）	中

📌 实际建议：antfu/skills/vue + hyf0/vue-best-practices 一起装，前者管基础写法，后者管架构深度，互补。

5.2 广义竞品：AI 编程规范类工具对比

工具	思路	与 Vue Skills 的关系
.cursorrules/ CLAUDE.md	静态规则文件喂给 AI	Skills 是升级版——按需加载+可执脚本
repomix / codebase打包	把整个仓库当上下文	Skills 更精细，只注入”该场景需要的规则”
Vue MCP Server	走 Model Context Protocol 调工具	Skills 不依赖 MCP，更轻
Continue / Cline 自定义 prompt	手写 prompt 约束	Skills 是结构化、可版本化的 prompt+脚本

---

六、典型应用场景与实际体验

🎬 场景 1：个人 Vue 3 + TS 项目，AI 总写出”能跑但烂”的代码

体验：装之前让 AI “写个待办”，给的组件响应式没优化、状态没提 composable、乱用 ref；装完加 Use vue skill,再问，shallowRef 自动上了、状态提去 composables、拆分清晰——判若两人。

🎬 场景 2：团队接手 Vue 2 存量项目要迁移 Vue 3

体验：vue-options-api-best-practices专治 this陷阱，vue-router-best-practices防导航守卫内存漏，团队不用每人都背 Vue 3 迁移文档，AI 帮守门。

🎬 场景 3：大型项目要规范 Pinia Store 写法

体验：vue-pinia-best-practices管 Store 设计 + 类型推导，hyf0 深度版还会管目录组织、side effects 抽象，适合多人协作”AI 生成代码也要 code review 过关”的场景。

🎬 场景 4：调试水合报错、VueUse SSR 适配

体验：vue-debug-guides+ create-adaptable-composable（MaybeRef/Getter）这两个是普通 .md规则很难写透的，Skills 里带脚本，AI 直接调。

---

七、Vue Skills 能为用户带来的价值

1. 省重构时间——装了之后”AI 首版代码”就能过 review，重构时间砍半
2. 省 Token——按需加载 vs 静态 .md 全量喂，上下文更贵场景差别明显
3. 规范不下沉——框架升版（Vue 3.5、Volar 3、Pinia 新写法）只要更技能包，不用重训模型
4. 新人友好—— junior 开发者靠 AI + Skills 也能输出 senior 级别的 Vue 代码
5. 零成本——MIT 免费，一行命令，不绑任何商业产品

---

八、最近 3-6 个月重大动态（2026 年 1-6 月）

• 2026 年 1 月：尤雨溪转发相关讨论，”继 React 之后 Vue 也有了 Skill”成为社区热点，vuejs-ai/skills 仓库正式聚合发布
• 2026 年 1-2 月：hyf0/vue-skills 深度版持续迭代，覆盖 Vue 3.5+ 兼容、Volar 3、vueCompilerOptions 等冷门但踩坑的点
• 2026 年 3 月：实测类文章出现，50 次生成测试达成率 98.5%
• 2026 年 5 月：社区出现 antfu/skills/vue与 hyf0/vue-skills互补装的推荐方案
• 2026 年 6 月：runmie 等站发深度拆解，把 Vue Skills 定位为”前端框架 AI 辅助从自由发挥走向规范约束”的标志

---

九、常见问题 FAQ

Q1：Vue Skills 收费吗？

A：MIT 协议，完全免费，可商用。

Q2：一定要用 Cursor / Claude Code 吗？别的 AI 编辑器能用？

A：只要支持 Agent Skills 协议​ 的都能用——Cursor、Claude Code、GitHub Copilot Agent、Gemini CLI、VS Code Agent、Roo Code、Trae 都 OK。

Q3：装了之后 AI 会自动用吗？

A：不会自动。提问时记得加前缀 Use vue skill,，否则 AI 可能不走技能规则。

Q4：vuejs-ai/skills 和 hyf0/vue-skills 装哪个？

A：想省事装 vuejs-ai/skills（8 个全有）；做大型项目/团队协作建议再叠加 hyf0/vue-skills/vue-best-practices深度版，和 antfu/skills/vue轻量版三者互补。

Q5：会影响 AI 生成速度吗？

A：hyf0 深度版规则多，生成会稍慢一点；官方聚合版和 antfu 轻量版基本无感。

Q6：Vue 2 项目能用吗？

A：能，vue-options-api-best-practices就是给 Vue 2 风格 / 迁移场景用的。

---

十、总结

Vue Skills 不是又一个”AI 编程工具”，它是 Vue 核心团队把”Vue 3 该怎么写”这件事，结构化地塞进 AI 的决策链路里——不微调模型、不换编辑器、一行 npx skills add vuejs-ai/skills就搞定。对 Vue 3 + TS 项目、尤其是团队协作用 AI 辅助编码的场景，它是目前性价比最高的”规范守门员”：免费、轻量、eval 验证过、可随框架升版迭代。

我的建议是：个人小项目装 vuejs-ai/skills或 antfu/skills/vue就够了；大型项目 / 团队走 antfu/skills/vue+ hyf0/vue-skills/vue-best-practices双装，再加 vuejs-ai/skills补 Pinia/Router/测试那几块。别忘了提问前缀 Use vue skill,——这才是触发”肌肉记忆”的开关。

📅 本文更新日期：2026-06-28

---

参考文章或数据来源

1. 《Vue Skills：让 AI 写代码更懂你的 Vue 项目》，2026-03-16
2. 《Vue Skills：让 AI 真正懂 Vue 3》，AI 观测者 L（微信公众号），2026-02-12，引用 Stars 1.6k、8 大技能表、安装命令
3. 《Vue Skills——教 AI 正确写 Vue》，DevPress 官方社区 CSDN，2026-01-24，引用定位、按需加载机制
4. 《Vue Skills 使用指南：让 AI 写出的 Vue 3 代码更规范》，shenqiku，2026-05-01，引用支持的 AI 工具列表、提问前缀技巧
5. 《vue-skills：Vue 核心团队如何用 Agent Skills 标准，为 AI 编程助手注入官方级规范约束》，润灭网，2026-06-06，引用设计逻辑、知识覆盖范围
6. 《AI 加持的 Vue 3 开发神器》，CSDN，2026-03-10，引用 Capability/Efficiency 分类、eval 验证机制
7. 《继 React 之后，Vue 也有了 Skill！尤雨溪转发，专治”幻觉”代码》，CSDN，2026-01-27
8. 《Vue 3 开发避坑 + 提效神器！这个 GitHub 仓库让 AI 都能精准解决你的痛点》，码上宝藏（微信公众号），引用 45 条规则拆分、MIT 商用
9. 《深度拆解 Vue.js 代码生成 SKILL：是开发神器还是仅仅够用的脚手架？》，guideai.com.cn，2026-04-10，引用 98.5% 达成率、≤1% 报错率实测
10. 《@前端资料库：Vue Skills…》，ima 知识号，引用 Yunfei He / VoidZero 发起背景
11. 《vue项目必装的skills》，2026-05-26，引用 antfu/skills vs hyf0/vue-skills 对比

引用总结：本文核心产品信息来自 vuejs-ai/skills 与 hyf0/vue-skills 的 GitHub 仓库说明及 Vue 核心团队成员 Yunfei He 的发起背景，功能数据与 Stars 来自 AI 观测者 L、CSDN 等站 2026 年 1-3 月报道，实测 98.5% 达成率来自 guideai.com.cn 深度测评，竞品对比（antfu/skills）来自 2026 年 5 月社区实操帖，动态时间线综合 2026 年 1-6 月多源交叉验证。