vue-skills

核心摘要 (Key Takeaways)

vue-skills 是由 vuejs-ai 社区维护的、专为 Vue 3 生态设计的 AI 代理技能集合，通过标准化 SKILL.md 指令让 AI 编码助手更精准地生成 Vue 代码。

仓库内置 7 个专业子技能，覆盖组合式 API、路由、状态管理、测试、JSX 和调试，要求 AI 强制执行 Composition API + TypeScript 等最佳实践。

一行命令 npx skills add vuejs-ai/skills 即可安装，兼容 Claude Code、Cursor、Copilot、Windsurf 等 30+ 主流 AI 编码工具。

采用渐进式披露架构，仅在需要时加载详细参考，避免上下文窗口膨胀，比传统 MCP 方案更轻量、延迟更低。

项目完全开源（MIT 协议），作者正计划将其转移至 Vue 官方组织，目前已成为 AI 辅助 Vue 开发的事实标准之一。

它是什么

vue-skills 官方截图

vue-skills 是一个面向 Vue.js 生态的 AI 代理技能 (Agent Skill) 集合。它本质上是一系列用 Markdown 编写的指令文件（SKILL.md），告诉你的 AI 编码助手（如 Claude Code、Cursor、GitHub Copilot 等）在生成 Vue 代码时必须遵循的规范、最佳实践、常见陷阱和 API 参考。官方仓库地址为 https://github.com/vuejs-ai/skills，完全开源并基于 MIT 协议发布。

关键定义：AI 代理技能 (Agent Skill) 是一组存储在本地、符合开放标准的 Markdown 和资源文件，它为 AI 编码助手提供特定技术栈的上下文、规则和最佳实践，让模型能像资深开发者一样“内化”项目规范。技能采用渐进式披露，仅在 AI 决定使用时才加载完整内容，大幅降低对上下文窗口的占用。

vue-skills 的核心思路很简单：Vue 3 生态灵活性极高，组合式 API、<script setup>、路由守卫、Pinia 状态模式、测试策略等各有十余种正确写法，AI 模型在训练数据中会混合看到多种风格和已过时的 Options API，导致生成的代码风格混搭、不一致。vue-skills 通过前置化的指令约束，强制 AI 以“Vue 官方推荐+社区实战精粹”的单一标准来编码，从而解决 AI 辅助开发中的一致性与可靠性问题。

主要功能和特点

vue-skills（指 vuejs-ai/skills 仓库）目前包含 7 个独立激活的子技能，每个技能面向一特定领域：

技能名称	适用场景	核心内容
`vue-best-practices`	Vue 3 + Composition API + TypeScript	组合式 API、响应式系统、SFC 结构、组件边界规划、组合式函数等核心最佳实践（已迭代至 18.0.0 版本）
`vue-options-api-best-practices`	必须使用 Options API 的遗留项目	`this` 上下文、生命周期、TypeScript 兼容型等专门规范
`vue-router-best-practices`	Vue Router 4 应用	导航守卫、路由参数、路由级组件生命周期
`vue-pinia-best-practices`	Pinia 状态管理	Store 定义、响应式暴露、状态模式与结构设计
`vue-testing-best-practices`	组件测试或端到端测试	Vitest、Vue Test Utils、Playwright 的应用策略
`vue-jsx-best-practices`	使用 JSX 编写 Vue 组件	Vue JSX 与 React JSX 的差异要点
`vue-debug-guides`	调试 Vue 3 运行时问题	运行时错误、警告、异步错误处理、SSR 注水（hydration）问题排查

核心特色：

强制最佳实践，而非建议
每个技能在工作流中要求 AI 严格执行指定步骤。以 vue-best-practices 为例，它会强制 AI 在编写任何代码前必须：
- 先确认架构（<script setup> + TypeScript 为默认）
- 加载核心参考（响应式系统、SFC 结构、组件数据流、组合式函数）
- 规划组件边界
- 始终使用 Composition API（除非项目明确要求 Options API）
这相当于给你的 AI 编码助手配备了一份“Vue 宪章”。
渐进式披露，最小化上下文污染
技能采用 SKILL.md 作为薄入口，只有当 AI 根据任务决定需要使用某技能时，才会按需加载深层的参考文件。这避免了传统“技能爆炸”问题——如果为 Vue、Vite、Pinia、VueUse 等单独安装 17 个技能，每个技能的描述都会永久占用 AI 系统提示词窗口。vue-skills 将同类技能合并后，只需一个“薄入口”即可，优雅地解决了上下文窗口通货膨胀。
双类型分类：能力型与效率型
官方将每个技能规则分为两类：
- 能力型 (Capability)：AI 不借助技能就无法正确解决的问题（如版本特有行为、未文档化的边缘用例）。
- 效率型 (Efficiency)：AI 能做但不精，技能提供最优模式、一致性范式，提升生成质量。
所有规则均通过自动化 eval 验证，确保对 AI 输出有真实改善。
跨工具兼容
遵循 Agent Skills 开放标准，技能只是一堆 Markdown 和可选脚本文件，因此能在 Claude Code、Cursor、GitHub Copilot、Windsurf、Cline 等超过 30 种 AI 编码工具中工作，完全无需绑定特定平台。

如何使用/注册/安装

安装技能

在你的项目根目录打开终端，执行一行命令即可安装整个集合：

npx skills add vuejs-ai/skills

该命令会将所有技能和引用文件拉取到本地的 .claude/skills/ 或工具约定的目录中。对于 Claude Code 用户，还可通过 Marketplace 方式添加。

在对话中激活

为确保 AI 按照技能规范执行，强烈建议在提问时加上前缀 use vue skill：

Use vue skill, 帮我创建一个带分页的用户列表组件

这样 AI 就会自动加载 vue-best-practices 等技能，并按照严格的 Composition API + TypeScript 工作流生成代码。

注意：技能在本地运行，不依赖远程服务，无额外延迟。AI 在需要时才会读取具体参考文件，而非一次性把所有内容塞进上下文。

官网地址和入口

GitHub 仓库：https://github.com/vuejs-ai/skills
安装命令：npx skills add vuejs-ai/skills
协议：MIT，完全免费，可商用

该项目仍处于早期实验阶段，但因其明确的价值和清晰的设计，作者已在 README 中表示：如果社区反馈积极，将提议把项目转移至 Vue 官方组织，使其成为 Vue 生态下的官方 AI 开发辅助工具。

适合人群

使用 AI 编码助手进行 Vue 3 开发的团队，希望让生成的代码风格一致、遵循最佳实践、减少返工。
刚接触 Vue 3 Composition API 的开发者，让 AI 助手扮演“导师”角色，按标准规范指导编码。
维护大型 Vue 项目的组织，希望通过技能文件将团队编码规范固化到 AI 行为中。
任何希望 AI 输出质量接近高级 Vue 工程师的开发者。

目前所有内容均为英文，适合具备英文阅读能力的技术人员。整个工具栈基于 Node.js 环境，要求本地已安装 Node.js（v16+）和 npm。

竞品对比表

对比维度	vue-skills (vuejs-ai)	antfu/skills	不使用技能
维护方	vuejs-ai 社区（拟移交 Vue 官方）	Anthony Fu（Vue 核心团队成员）	-
覆盖范围	Vue 3 专项（路由/状态管理/测试/JSX等7项）	Vue + Vite + Nuxt + Pinia + VueUse + Vitest + 个人工具链	AI 自行从训练数据推断
默认理念	强制 Composition API + TypeScript	同样强制 Comp API + TS	可能混用 Options API / Comp API
安装命令	`npx skills add vuejs-ai/skills`	`npx skills add antfu/skills --skill=''`	无需安装
上下文效率	渐进式披露，合并同类技能减少描述占用	多个独立技能，可单独安装	无额外占用
权威性	由数十个真实 Vue 开发 issue 提炼，自动化 eval 验证	基于 Vue 核心成员经验，代码级最佳实践	取决于 AI 训练数据版本
适用性	适合想采用社区一致性规范的团队	适合跟随 Anthony Fu 工具链的个人开发者	适合小规模、容错性高的探索场景

关键差异解读：vue-skills 侧重于“社区共识 + 强制执行”，antfu/skills 更像是 Anthony Fu 个人工作流的系统化输出。两者非替代关系，可以互补使用，但 vue-skills 更强调通过标准化指令降低团队协作的摩擦。

此外，与直接使用 AI 内置提示相比，技能方案的优势在于：

版本可控：仓库更新后，所有团队成员重新执行 npx skills add 即可同步最新规范，而 AI 内置知识可能存在滞后。
可作为文档：.md 文件便于代码审查和讨论，本身就是一份活文档。
不依赖网络：全部本地存储，即使离线 AI 工具也能使用。

典型应用场景

新项目启动：安装 vue-skills 后，让 AI 根据技能中的架构规划章节，生成符合最佳实践的初始项目骨架（含路由、状态管理、目录结构）。
代码重构：对已有 Options API 项目，通过 vue-options-api-best-practices 约束 AI 不要擅自引入混用模式，或指导进行渐进式迁移。
组件库开发：结合 vue-jsx-best-practices 和 vue-testing-best-practices，让 AI 写出具有良好类型支持且经过测试的通用组件。
SSR 问题排查：使用 vue-debug-guides 技能，在 AI 协助下快速定位注水错误、异步数据缺失等 SSR 特有坑点。
团队 Onboarding：将技能仓库作为新成员的“AI 导师”，在 Code Review 之外提供实时的、符合团队规范的建议。

最近 3-6 个月动态

版本迭代迅速：核心技能 vue-best-practices 元数据版本号已迭代至 18.0.0（来源：SKILL.md 元数据），表明社区持续打磨和扩充规则。
计划移交 Vue 官方：作者在 README 中明确表示，若项目有价值，将提议转移至 Vue 组织，这有望使其成为官方认可的 AI 开发工具。
生态倍速扩张：2025-2026 年间，Agent Skills 概念爆发式增长，Superpowers、基于 Andrej Karpathy 建议的技能仓库等获得超 20 万星标，而 vue-skills 作为最早一批垂直领域技能集，安装量和使用率随之水涨船高。
跨工具兼容验证：已有超过 30 种 AI 编码工具声称兼容 Agent Skills 标准，vue-skills 在不同工具间的运行一致性得到社区广泛验证。

FAQ

1. vue-skills 的官网地址是什么？

官方仓库为 https://github.com/vuejs-ai/skills。所有技能文件、使用文档和更新日志均托管于此。

2. vue-skills 是免费的吗？可以商用吗？

完全免费。项目采用 MIT 开源协议，你可以自由使用、修改和分发，包括用于商业项目。

3. 如何安装 vue-skills？需要什么前置条件？

确保本地安装了 Node.js (v16+) 和 npm，然后在项目根目录运行：

npx skills add vuejs-ai/skills

安装完成后，在 AI 编码助手中使用 use vue skill 前缀即可激活。

4. vue-skills 和 anthony fu 的 antfu/skills 有什么区别？

antfu/skills 是 Vue 核心团队成员 Anthony Fu 个人工作流的系统化，覆盖 Vue、Vite、Nuxt、VueUse 等，适合偏好其工具链的开发者。vue-skills 由社区协作维护，聚焦 Vue 3 开发规范，采用更严格的“能力+效率”双层分类和自动化验证，更强调团队一致性。两者理念相通，可以互补，但 vue-skills 更偏向社区共识。

5. 所有 AI 编码工具都支持吗？

支持所有遵循 Agent Skills 开放标准的工具，包括 Claude Code、Cursor、GitHub Copilot、Windsurf、Cline 等 30+ 平台。技能本质上是本地 Markdown 文件，因此理论上任何能读取文件上下文的 AI 代理均可兼容。

总结

vue-skills 正逐步成为 AI 辅助 Vue 3 开发的事实标准配件。它不是简单的“提示词模板”，而是一套经过提炼、验证、可版本化的开发规范系统。通过一行命令和合理的渐进式加载设计，它让 AI 从“能写 Vue 代码”进化为“能写正确的、可维护的、符合最佳实践的 Vue 代码”。对于任何严肃使用 AI 进行 Vue 项目开发的个人或团队，vue-skills 都是值得尽早集成的基石工具。