Vue 生态 Skills 全家桶发布：Anthony Fu 整理 AI 编码最佳实践

近期，Skills 项目在开发者社区中备受关注。之前已介绍过多个相关项目，例如 Vue Skills（教 AI 避免 Vue 代码的常见错误）和 Threejs Skills（帮助 AI 编写 Three.js 时减少踩坑）。当时不少开发者留言询问：VueUse 是否有对应的 Skills？

正当我准备分享 VueUse Skills 时，却意外在推特上看到了更全面的解决方案。核心开发者 @Anthony Fu 直接发布了一个“全家桶”级别的项目：

简单来说，antfu/skills 不是一个针对单个库的 Skills，而是将整个 Vue 生态中最常用的工具链打包成了一套完整的 Skills 集合。

Vue 生态 Skills 全家桶

Anthony Fu 在推文中正式介绍了这个项目。

antfu/skills 是一个经过精心筛选的 Agent Skills 合集，它反映了 Anthony Fu 的个人偏好、实战经验和最佳实践。该合集囊括了 Vue 开发中核心的工具栈，例如：

• Vue
• Nuxt
• Vite
• Pinia
• VueUse
• ……

安装它之后，你可以理解为：AI 在编写 Vue 相关代码时，其输出会更贴近一位真正理解 Vue 生态和社区习惯的开发者，而不仅仅是机械地拼凑 API。这充分体现了 Vue 社区对新技术趋势的快速响应和工程化沉淀能力。

项目内容包含哪些部分？

这个项目最吸引人的地方在于它提供了一套完整体系，而非零散的规则。其内容大致可分为三类：

来自 Anthony Fu 的个人最佳实践

这部分包含了他本人在实际项目中高频使用的工具链和编码习惯，例如：

• pnpm
• eslint
• vitest
• Vue 项目的工程化写法

这相当于直接获得了社区核心贡献者推荐的“标准姿势”。

从官方文档同步生成的 Skills

这是项目的关键特性之一。Skills 的内容直接从以下工具的官方文档生成并保持同步：

• Vue
• Nuxt
• Pinia
• Vite
• Vitest
• UnoCSS

这种方式的最大优势是确保了 Skills 的时效性，能够跟随生态的更新而自动演进。

集成生态内已有的优秀 Skills

项目还主动集成了社区内已经存在且备受好评的 Skills 项目，例如：

• VueUse Skills (vueuse/skills)
• 针对 Vue 的最佳实践集合 (vue-skills)
• Vercel 的 agent-skills

这表明 Vue 生态中的 Skills 正在从独立的“点”逐渐连接成一张“网”，形成了更强大的知识体系和工具链。

如何快速使用？

使用方式极其简单，只需一行命令：

pnpx skills add antfu/skills

安装完成后，你无需改变与 AI 的交互方式或学习新的指令。照常提出你的开发需求即可，例如：

• “写一个 Vue3 组件，请按照最佳实践来”
• “使用 VueUse 实现一个带防抖的搜索功能”
• “帮我检查这个 Pinia store 的写法是否规范”

此时，AI 生成的代码将更大概率符合 Vue 社区的惯用模式和工程规范。

项目地址与总结

• 项目 GitHub 地址：https://github.com/antfu/skills

从独立的 Vue Skills、VueUse Skills，到如今整合性的 antfu/skills 全家桶，我们可以清晰地感受到 Vue 社区对于 AI 辅助开发这一趋势的深入思考和实践速度。社区的目标已经超越了“让 AI 能写代码”，而是进阶到“让 AI 按正确的方式写代码”。

当这些宝贵的开发经验被系统地整理成可复用的 Skills，前端开发者，尤其是 Vue 技术的使用者，在利用 AI 提升效率的同时，也能更轻松地保证代码质量和一致性。对于日常使用 AI 进行 Vue 开发的工程师来说，这个全家桶值得一试。如果你想探索更多类似的开源项目与实践，可以关注 云栈社区 上的技术动态与资源分享。