vue-skills – 用于 Vue 3 开发的 AI 智能体技能

简介 – 这是一个处于早期阶段、由社区驱动的技能集合，可以加载到 AI 编码助手（例如 Claude Code）中，使其在编写 Vue 3 代码时表现更出色。每项技能都编码了模型可能忽略的模式、最佳实践规则和边缘情况知识。

---

安装

# 通用安装程序（适用于任何兼容的智能体）
npx skills add vuejs-ai/skills

对于 Claude Code 用户，可以使用市场工作流：

/plugin marketplace add vuejs-ai/skills          # 注册仓库
/plugin install vue-skills-bundle@vue-skills      # 一次性安装所有技能
# 或安装单个技能
/plugin install vue-best-practices@vue-skills
/plugin install vue-router-best-practices@vue-skills

---

如何使用

在提示助手时，在前面加上 use vue skill，以便模型知道激活相关的规则集。

Use vue skill, create a todo app with Pinia and Vue Router

如果不加前缀，技能可能会也可能不会触发，具体取决于关键词匹配情况。

---

可用技能

技能	使用场景	涵盖内容
vue-best-practices	Vue 3 + Composition API + TS	通用最佳实践、SSR 提示、性能技巧
vue-options-api-best-practices	Options-API 代码	this 处理、生命周期、Options API 的 TS 类型定义
vue-router-best-practices	Vue Router 4	导航守卫、参数、路由组件生命周期
vue-pinia-best-practices	Pinia 状态管理	Store 设置、响应式模式
vue-testing-best-practices	单元/E2E 测试	Vitest, Vue Test Utils, Playwright 指导
vue-jsx-best-practices	Vue 中的 JSX	与 React JSX 的语法差异
vue-debug-guides	调试 Vue 3	运行时错误、水合问题、异步错误处理
create-adaptable-composable	编写可复用的组合式函数	MaybeRef / MaybeRefOrGetter 输入模式

---

示例输出

vue-best-practices – Todo 应用演示

提示: create a todo app 结果: 助手生成了更具可读性的项目结构，拆分了组件，将状态提取到组合式函数 (useTodos.ts) 中，并对原始响应式数据使用了 shallowRef。完整演示链接请见 README。

create-adaptable-composable – useHidden

提示: create a reusable composable for controlling hidden for an element 结果: 生成了一个接受 MaybeRef/MaybeRefOrGetter 参数的组合式函数，实现了灵活的响应式。生成的 TypeScript 签名请见 README。

---

方法论

• 技能类型 – 能力 (Capability)：解决模型在没有技能时无法处理的问题（例如特定版本的怪癖）。 效率 (Efficiency)：改进模型本可以生成但不够优化的解决方案。
• 验证 – 自动化评估运行基准测试（无技能）和有技能的运行。只有当技能将失败的基准测试转变为通过结果时，才会保留该技能。

---

贡献

开发在 dev 分支进行；main 分支仅包含已发布、经过审查的技能。工作流：从 dev 分支创建分支 → 提交 PR 到 dev → 合并 → GitHub Action 同步到 main。

---

相关项目

• antfu/skills – 针对 Vue/Vite/Nuxt 的类似技能集合。
• vueuse/vueuse-skills – 专注于 VueUse 的技能。
• onmax/nuxt-skills – Nuxt 专用的智能体技能。

---

许可证

MIT。