随着 AI 编程助手逐渐成为前端开发的“标配”，一个现实问题开始变得越来越明显：
AI 写的 Vue 代码，能跑，但经常“不对”。
不对的地方不在语法，而在最佳实践、架构习惯、类型设计和生态用法上。
在这个背景下，vue-skills 出现了。
一、vue-skills 是什么？
vue-skills 是一个面向 AI Agent 的 Vue 技能集合项目，由 Vue 团队成员 Yunfei He 发起。
官方对它的定位非常明确：
- 🚧 早期实验 / 社区项目
- 为 AI 代理 提供 Vue 3 专用技能
- 目标是：增强 AI 在 Vue 生态中的开发质量
一句话总结它的核心定位：
vue-skills 不是教人写 Vue，而是教 AI 正确地写 Vue。
这点非常重要，它不是：
- 组件库
- 工具函数集合
- 教程文档
而是：
👉 一套可被 AI 执行的 Vue 开发规则（Skills）
二、为什么需要 vue-skills？
1️⃣ AI 写 Vue 的真实痛点
即便是最强的模型，在 Vue 场景下也经常出现这些问题：
- Composition API 写法混乱
ref / reactive / computed使用不规范- TypeScript 类型丢失或过度 any
- Pinia Store 设计不合理
- SSR / Hydration 场景踩坑
- VueUse 被滥用或误用
这些问题：
- 人类开发者可以靠经验规避
- AI 如果没有明确约束，很容易“写得像，但不专业”
2️⃣ vue-skills 解决的核心问题
vue-skills 本质上在做一件事：
把 Vue 社区长期沉淀的经验，变成 AI 可执行的规则。
它尝试回答这些问题：
- Vue 3 的“正确写法”到底是什么？
- 哪些写法是坑，必须避免？
- Composition API + TS 的推荐模式是什么？
- Pinia / Router / 测试 应该如何规范使用？
这些规则不再只存在于博客或文档中，而是直接进入 AI 的决策路径。
三、vue-skills 的整体结构
目前 vue-skills 已经拆分为多个独立技能（Skills），覆盖 Vue 3 开发的主要场景。
核心技能一览
| 技能 | 适用场景 | 说明 |
|---|---|---|
| vue-best-practices | Vue 3 + Composition API + TS | 最佳实践、常见陷阱、性能、SSR |
| vue-options-api-best-practices | Options API | this 上下文、生命周期、TS |
| vue-router-best-practices | Vue Router 4 | 导航守卫、路由参数、生命周期 |
| vue-pinia-best-practices | Pinia | Store 设计、响应式、状态模式 |
| vue-testing-best-practices | 测试 | Vitest、VTU、Playwright |
| vue-jsx-best-practices | JSX | Vue JSX 与 React JSX 差异 |
| vue-development-guides | 项目架构 | 组件拆分、数据流、核心原则 |
| vue-debugging-guides | 调试 | 运行时错误、水合问题 |
| create-adaptable-composable | Composable 设计 | MaybeRef / Getter 模式 |
可以理解为：
一整套 Vue 3 生态的“AI 开发规范手册”。
skill.sh 市场已经收录
四、如何安装和使用 vue-skills？
1️⃣ 安装（官方方式）
npx skills add vuejs-ai/skills
这一步会：
- 下载 vue-skills
- 按 Agent Skills 规范安装
- 让支持 Skills 的 AI 工具识别这些规则
2️⃣ Claude Code 用户的替代方案
# 添加 marketplace
/plugin marketplace add vuejs-ai/skills
# 安装单个 skill
/plugin install create-adaptable-composable@vue-skills
# 安装多个 skill
/plugin install \
create-adaptable-composable@vue-skills \
vue-best-practices@vue-skills \
vue-development-guides@vue-skills
3️⃣ 正确的使用方式（非常关键）
为了稳定触发技能，官方强烈建议使用前缀：
Use vue skill, <你的问题或任务>
例如：
Use vue skill, 帮我写一个符合 Vue 3 最佳实践的表单组件
为什么需要这个前缀？
- 明确告诉 AI：启用 vue-skills
- 避免技能触发依赖“关键词碰运气”
- 确保生成结果遵循已定义的规则
五、vue-skills 带来的改变
1️⃣ AI 输出质量的本质提升
使用 vue-skills 后，AI 生成的代码会明显变化：
- 更稳定的 Composition API 结构
- 更合理的 TS 类型设计
- 更接近真实项目的架构风格
- 更少“能跑但不对”的代码
这不是模型变强了，而是：
AI 被约束在“正确的 Vue 认知框架”里。
2️⃣ 不只是 vue-skills，而是一种方向
从更大的视角看，vue-skills 本身只是一个起点：
- react-skills
- node-skills
- vite-skills
- 公司内部私有 skills
- 团队级编码规范 skills
正在逐渐形成一个共识：
AI 写代码的质量，不只取决于模型，而取决于你给它什么 Skills。
六、总结
如果你已经在使用 AI 编写 Vue 代码，那么 vue-skills 非常值得尝试：
- 它不会限制你
- 不改变你的技术栈
- 但会显著提升 AI 输出的“专业度”
vue-skills 的价值不在当下，而在未来：
当 AI 成为主要开发者时，
Skills，才是真正的“工程经验载体”。
文章评论