vue-skills

vue-skills是什么

vue-skills 是 Vue 核心团队推出的 AI Agent 技能库，基于 Agent Skills 开放标准，将 Vue 3 最佳实践、Pinia 规范、Vue Router 与 VueUse 准则封装为结构化知识模块。工具通过 npx 安装到 Cursor、Claude Code 等工具后，AI 生成 Vue 代码时自动遵循官方规则，解决能跑但不对的问题，输出高质量、符合社区标准的代码。

vue-skills的主要功能

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

如何使用vue-skills

• 安装技能包：在终端执行 npx skills add vuejs-ai/skills 命令，将 Vue Skills 添加至本地环境。
• 选择 AI 工具：根据交互提示选择支持的 AI 工具，如 Cursor、Claude Code 或 GitHub Copilot。
• 配置安装范围：选择全局或项目级安装范围，确认安全评估后完成配置。
• 显式触发技能：在 AI 对话中前缀提示词 use vue skill，确保 AI 调用对应规则。
• 描述开发需求：直接描述 Vue 开发任务，AI 自动参考技能规范生成符合官方标准的代码。

vue-skills的核心优势

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

vue-skills的同类竞品对比

vue-skills的应用场景

• AI 辅助 Vue 3 开发：开发者通过 Cursor、Claude Code 等工具调用技能，让 AI 生成符合 Composition API 规范、类型安全的组件代码，避免常见反模式。
• 团队代码规范统一：在多人协作项目中安装 vue-skills，确保所有成员通过 AI 生成的代码遵循同一套 Vue 官方最佳实践，减少代码审查时的风格争议。
• Vue 2 向 Vue 3 迁移：用技能中内置的 Options API 与 Composition API 对比规则，辅助 AI 将旧项目代码重构为 Vue 3 标准写法，降低迁移成本。
• 调试与问题排查：当遇到 hydration 错误、响应式异常或 TypeScript 推导问题时，触发 vue-debug-guides 技能，让 AI 按官方排查手册定位根因。