❝在现代前端开发中，AI 越来越多地被用来辅助写代码、生成组件、甚至构建整个页面。但一个常见问题是：AI 很会生成代码，但代码不一定符合社区最佳实践。为了解决这个问题，Anthony Fu（Vue 核心社区贡献者）开源了一个 Skills 项目，旨在让 AI 在辅助写代码时“知道怎么写才正确”。这篇文章带你一步步理解、安装并在 Vue 项目中实践它。
🎯 什么是 Skills？
Skills 是一种标准化的知识包（Markdown 文档/文件集），它把官方文档、最佳实践、代码习惯等结构化后整理好，让 AI Agent（如 Claude、GPT 等）可以直接用它作为“知识来源”，从而输出更专业、更贴近真实社区写法的代码。
用更通俗的话说：
❝把官方文档、学习笔记、最佳实践标准化成一堆“技能卡片”，AI 能按需调用它，而不是凭模糊记忆写代码。
📦 项目包含哪些 Skills？
antfu/skills 包含很多不同主题的技能，每一种代表一个关注点或技术栈。例如：
| |
|---|
| antfu | Anthony Fu 的个人最佳实践（pnpm、vitest、eslint 等） |
| vue | Vue 核心知识（响应式、组件、Composition API 等） |
| nuxt | |
| pinia | |
| vite | |
| vitest | |
| unocss | |
| slidev | |
| vue-best-practices | |
这些 Skill 均来自官方文档或社区公认的写法，通过结构化提炼出来，方便 AI 引用。
🚀 如何安装 Skills
要安装这个技能集合，可以使用官方提供的 skills CLI：
pnpx skills add antfu/skills --skill='*'
这句命令会把 所有的 Skill 都安装到本地（默认是当前用户环境）。如果你只想装某个单独的 Skill，例如 Vue 技能：
pnpx skills add https://github.com/antfu/skills --skill vue
或者装 Nuxt 相关技能：
npx skills add https://github.com/antfu/skills --skill nuxt
📌 安装后目录结构示例
安装成功后，你会看到类似结构：
skills/
├── vue/
│ ├── SKILL.md
│ └── …
├── nuxt/
│ └── SKILL.md
├── pinia/
├── vite/
└── …
每个文件夹中都有一个 SKILL.md，它就是 AI Agent 用来理解该技能的内容。
📘 如何使用 Skills（AI 写代码场景）
❝安装好 Skill 后，你不需要去改变写代码方式，而是让 AI 调用这些技能辅助理解。
例如，你在 AI 聊天环境（Claude、GPT）中这样发问：
📌 示例 1 — Vue 组件
写一个 Vue3 组件，实现一个可复用的按钮，并且支持 disabled、loading 属性，按最佳实践写。
AI 在有 Skill 后，可以在后台优先参考 vue/SKILL.md 的组件部分写代码，从而输出更规范的写法。
📌 示例 2 — Nuxt 页面
创建一个 Nuxt 3 页面，包含文件路由、API 调用并展示数据。
有了 nuxt Skill，AI 将按官方规范生成 Nuxt 样板代码，包含正确路由格式与 useAsyncData 用法。
🧠 具体 Skill 例子详解
下面举两个常用 Skill 的核心内容，让你明白“这玩意儿到底帮了什么”。
✅ Vue Skill 解析
在 vue/SKILL.md 中，这些内容是重点：
核心概念
| |
|---|
| ref(), reactive(), computed() 等基本 API |
| |
| |
代码建议
- 推荐使用
<script setup lang="ts"> 风格编写组件 - 优先用
ref() 而不是复杂的 reactive()（可读性清晰）
这些都将作为规范写法引导 AI 输出更一致的代码。
✅ Nuxt Skill 解析
在 nuxt/SKILL.md 中：
对于初学者来说，这就像一份AI 版的 Nuxt 入门手册。
🛠 Tips：Skills 不是越多越好
虽然安装了很多 Skill 看起来很炫，但真正有用的是精准匹配当前任务的 Skill。如果你写纯 Vue 项目，核心 Skill 是 vue、vue-best-practices、pinia，而不必装 Slidev 或 turboskill。
结语
在 AI 时代，写代码不再只靠记忆 API，而是把知识结构化、模块化、让工具帮你执行。antfu/skills 正是这样一套“AI 可理解的知识库”，它能让你在用 AI 辅助写 Vue、Nuxt 代码时，得到更专业、更规范的产出。这种方法适合团队规范、代码审核、生成模板等场景，大大提升协作效率。
项目地址：https://github.com/antfu/skills
个人观点，仅供参考，非常感谢各位朋友们的支持与关注！
如果你觉得这个作品对你有帮助，请不吝点赞、在看，分享给身边更多的朋友。如果你有任何疑问或建议，欢迎在评论区留言交流。
