vue-skills：基于 Agent Skills 标准的 Vue 3 AI 开发技能库

vue-skills 是什么

vue-skills 是由 Vue 核心团队与 VoidZero 成员联合推出的 AI Agent 技能库。该项目基于 Agent Skills 开放标准，将 Vue 3 最佳实践、Pinia 规范、Vue Router 与 VueUse 准则深度封装为结构化的知识模块。开发者只需将工具安装至 Cursor、Claude Code 等 AI 编程工具中，AI 在生成 Vue 代码时便能自动遵循官方规则，有效解决代码“能跑但不对”的问题，输出高质量且符合社区标准的前端代码。

值得注意的是，该仓库目前处于 🚧 Early Experiment / Community Project（早期实验/社区项目）阶段。技能均来自真实 issue 验证，但在部分情况下可能因幻觉而不完整，团队欢迎社区给予反馈，并计划在项目成熟后转移至 Vue 官方组织以造福更广泛的社区。

产品定位

vue-skills 的核心定位是作为 AI 与 Vue 官方规范之间的“翻译层”。在 AI 辅助编程日益普及的当下，大模型往往会生成基于过时文档或不规范的反模式代码。vue-skills 通过提供权威、结构化的规则集，弥补 AI 训练数据滞后或缺失带来的能力短板，确保 AI 始终输出最新、最规范的 Vue 代码。

核心功能

vue-skills 涵盖了 Vue 生态开发的全链路规范，主要核心功能包含：

• Vue 3 最佳实践：涵盖 Composition API 正确用法、常见陷阱规避、SSR 性能优化与项目可维护性规范。
• Options API 规范：提供 this 上下文管理、生命周期钩子与 TypeScript 适配策略，兼顾 Vue 2/3 兼容场景。
• Vue Router 4 指南：封装导航守卫配置、路由参数处理与路由组件生命周期规范。
• Pinia 状态管理：明确 Store 类型设计、TS 推导、模块化组织与响应式模式。
• 测试规范：包含 Vitest、Vue Test Utils 与 Playwright 的组件单元测试及 E2E 测试规范。
• Vue JSX 语法：说明与 React JSX 在作用域和指令上的差异，避免开发者混用错误。
• 调试手册：内置运行时错误、异步异常处理与 hydration 问题的排查指南（如触发 vue-debug-guides 技能）。
• Composable 封装：支持基于 MaybeRef 与 MaybeRefOrGetter 的标准化可复用逻辑封装。

使用步骤

要在项目中应用 vue-skills，请遵循以下标准步骤：

1. 安装技能包：在终端中执行 npx skills add vuejs-ai/skills 命令，将 Vue Skills 添加至本地环境。
2. 选择 AI 工具：根据终端交互提示，选择当前所使用的 AI 工具（如 Cursor、Claude Code 或 GitHub Copilot）。
3. 配置安装范围：选择全局或项目级安装范围，并完成安全评估与确认。
4. 显式触发技能：在 AI 对话中添加前缀提示词 use vue skill。这一步至关重要，显式触发可确保 AI 准确调用对应规则。若无此前缀，技能触发可能因提示词与描述关键词匹配度不高而不一致。
5. 描述开发需求：直接描述 Vue 开发任务，AI 将自动参考技能规范生成符合官方标准的代码。

适用场景

• AI 辅助 Vue 3 开发：让 AI 生成符合 Composition API 规范、类型安全的组件代码，避免常见反模式。
• 团队代码规范统一：多人协作中确保所有成员的 AI 生成代码遵循同一套 Vue 官方最佳实践，大幅减少代码审查的风格争议。
• Vue 2 向 Vue 3 迁移：利用内置的 Options API 与 Composition API 对比规则，辅助 AI 将旧项目重构为 Vue 3 标准写法。
• 调试与问题排查：面对 hydration 错误或响应式异常时，让 AI 按官方排查手册精准定位根因。

优点

• 权威来源：由 Vue 核心团队与 VoidZero 成员维护，基于真实 issue 和官方文档验证，非社区二手整理。
• 按需加载：采用渐进式披露机制，仅当任务匹配时动态加载完整指令，避免长期占用 Token 和上下文窗口。
• 跨工具兼容：遵循 Agent Skills 开放标准，支持 Cursor、Claude Code、GitHub Copilot、Gemini CLI 等 30 余种 AI 工具。
• 动态适配：通过交互式配置自动识别 Vue 2/3 版本、组合式/选项式 API、Pinia 状态等项目特性。
• 自动化验证：每条规则均通过自动 eval 测试，仅保留“无技能则失败、有技能则通过”的有效规则，确保质量可控。

局限

作为一个 🚧 Early Experiment / Community Project，vue-skills 虽然源自真实世界问题，但仍可能因大模型的幻觉导致内容不完整。项目目前在 dev 分支进行开发，main 分支仅保留已发布的稳定技能，普通开发者提交的更改需经过审批合并至 dev 分支，再由维护者通过 GitHub Action 同步至主分支。

价格核验提示

vue-skills 目前作为开源项目提供于 GitHub。关于后续是否引入付费策略或企业级支持，请读者前往产品官网复核最新动态与可用性信息。

替代方案与同类项目

如果在寻找类似工具，可以参考以下社区项目：

• antfu/skills：Anthony Fu 精选的 Vue/Vite/Nuxt Agent 技能集合。
• vueuse/vueuse-skills：专为 VueUse 开发设计的 Agent 技能。
• onmax/nuxt-skills：专为 Nuxt 开发设计的 Agent 技能。

产品官网与一手资料

• 官方仓库：https://github.com/vuejs-ai/skills
• 发布平台：github.com