Vue Skills——教 AI 正确写 Vue
近年一直有在关注 AI 圈，从 AI 落地变现的有效途径是卖课的李博士翻船，到近日大火的 AI Conding……
不管是 vs code、codebuddy、cursor、claude，还是 agent 以及智能体，重点只有一个：
把“经验”和“最佳实践”，变成 AI 的“理解力”和“执行力”。
近日有看大到尤大转发的新项目：vue-skills，该项目的作者也是 VoidZero 的作者 Yunfei He。
一、🧠 Skills 是什么
AI Coding 中的 “Skills” 是一种将任务指令、代码工具和相关资源打包成的可复用智能工作流，旨在让 AI（如 Claude）像熟练的员工一样，按步骤调用工具并可靠地完成复杂任务。
你可以把 Skills 理解为一份给AI的“员工手册”+“工具箱”，它彻底改变了AI的工作方式。
Skills：从“单个工具”到“整套方案”！
下表清晰地展示了它与传统函数调用的核心区别：
| 维度 | 传统的函数调用 (Function Calling) | Skills (AI工作流) |
|---|---|---|
| 抽象层次 | 接口级：连接AI和单个工具 | 工作流级：整合多个工具和知识 |
| 构成要素 | 单一函数（如 get_weather） | 1. 指令 (SKILL.md)：用自然语言描述任务步骤2. 脚本：执行具体操作的代码 3. 资源：参考文档、模板等 |
| 执行逻辑 | 概率性判断：AI自行判断是否需要调用 | 结构化流程：AI依据明确的指令，按步骤、有条件地执行 |
| 核心优势 | 让AI能“打电话”驱动外部世界 | 提供整套解决方案，让AI更可靠、更专业 |
二、🔥 Skills 为什么火了
Skills概念的流行，是技术、需求和市场多方面成熟的结果：
1、技术成熟度跨越拐点：2026年被广泛认为是“AI应用元年”。推理成本大幅下降、交互方式从简单对话转向能自主规划行动的智能体（Agent），这为Skills这类复杂工作流的落地提供了经济和技术基础。
2、切实降低开发与应用门槛：Skills的核心（SKILL.md）用自然语言编写，非程序员也能通过清晰定义工作流来创建强大的AI应用。同时，它解决了传统函数调用“零散、一次性”的痛点，让AI能执行包含多步骤和逻辑判断的长任务。
3、解决真实业务痛点：Skills能封装那些重复性高、步骤固定但需要一定判断力的任务，正好契合了企业降本增效的强烈需求。例如：
自动化内容发布：将Markdown文章一键发布到 X 并完美保留格式、自动上传图片。智能会议助手：从会议记录中自动提取摘要、决策和待办事项，并起草跟进邮件。数据分析报告：自动分析CSV文件，识别关键指标与异常值，生成图文报告。
以前我们用 AI 写代码，更多是这样：
“给我写一个文章列表的 Vue3 组件”“排队这个报错”“帮我优化代码”
根据第一性原理可知，LLM 的本质是预测下一个最可能的 tokens。那么 AI 每次是在“临时理解问题”，临时给答案。
而 Skills 的出现，就是把「长期积累的经验、规则、最佳实践」封装成一套 可复用、可组合、可触发的技能。你可以把 Skills 理解为：
AI 的「专业知识模块」AI 的「长期记忆 + 行为约束」甚至是某个技术栈的「官方用法说明书（AI 版）」
AI Coding中的Skills，代表了从“教AI使用工具”到“教AI完成工作”的范式转变。它的流行标志着AI应用开发正从“提示词工程”迈向“系统工程”，未来开发者的核心能力将逐渐转变为定义问题、设计智能工作流和审核AI产出的“教练”与“架构师”。
这也就是 Skills 为什么开始火了的原因。
三、vue-skills 是什么？
1、背景
vue-skills 是由 Vue.js 团队成员 hyf0 创建的开源项目，定位为 "Agent skills for Vue 3 development"（Vue 3 开发的 AI 智能体技能包）。
这个项目诞生于 AI 编程工具（如 Cursor、Claude Code、GitHub Copilot 等）快速发展的背景下。传统的 AI 编程依赖于模型本身的能力，而 Skills 机制允许将特定技术栈的最佳实践、编码规范和架构决策编码成 AI 可理解的规则，从而显著提升 AI 生成代码的质量和一致性。
2、核心功能
vue-skills 作为 Vue 3 的专用技能包，提供了以下核心能力：
- 按需加载机制 不同于传统的 Rules（规则文件），Skills 支持分层加载
- 元数据 → 完整指令 → 参考资料
- 不会默认加载所有内容占用上下文，而是根据实际需要动态加载
- 内置脚本支持
- 包含可执行脚本文件，AI 可以直接运行这些脚本而无需读取其完整内容
- 进一步减少上下文占用，提升效率
3、覆盖 Vue 生态核心模块
目前包含的技能模块涵盖：
- Vue 3 - 核心框架最佳实践
- Pinia - 状态管理
- Vue Router - 路由管理
- CSS - 样式规范
- Volar - TypeScript 支持
4、无需 MCP
这些能力不需要依赖 MCP（Model Context Protocol）即可实现，简化了配置流程。
四、快速上手 vue-skills
1、安装
在项目中使用 add-skill CLI 工具安装（项目在 github 上，自行解决访问问题，也可查我的前面“Postman无法重置（找回）密码”里面的方法）：
npx add-skill hyf0/vue-skills
选择“项目”或“全局”视自己的需要选择。
安装方式：“符号链接”或“复制到所有 agent”。如果访问 github 不是很方便，个人推荐“复制到所有 agent”。
因为已经安装过了，所以再次安装会提示“覆盖”
安装完成！
安装完成后，在两个目录 .agent 和 .trae 的 skills 文件夹中都有了对应的 skills。
只要工具支持 Agent Skills，安装完成后一般不需要你手动“开启”。
开始提 Vue 相关问题 / 任务
然后你就可以直接提问或布置任务了：
“帮我写一个 Vue 3 组件，要求符合最佳实践。”
“这个 Pinia Store 的写法对吗？帮我优化一下。”
这时 AI 在生成或修改代码时，就会自动参考 vue-skills 中的规则，而不是随便拼一段代码给你。
五、意义与价值
vue-skills 代表了 前端 + AI 协作的未来方向：
- 团队标准化：可将公司内部的编码规范、架构决策封装成私有 skills，确保 AI 生成的代码符合团队标准
- 新人上手：新团队成员通过 skills 包即可快速获得与团队一致的 AI 编程体验
- 质量提升：AI 写代码的质量不再单纯依赖模型本身，而取决于提供的技能包质量
如果你是 Vue 开发者，这个项目，值得关注。
vue-skills Github 地址：https://github.com/hyf0/vue-skills
如果你是其它开发，可以到 Github 上去看对应的 Skills。
祝：
天下牛马都衣食无忧！
天下老板都财源滚滚！
愿：
世界和平！
