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：从“单个工具”到“整套方案”！

        下表清晰地展示了它与传统函数调用的核心区别：

        二、🔥 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。

        祝：

                天下牛马都衣食无忧！
                天下老板都财源滚滚！

        愿：

                世界和平！