Vue-skills的中文文档
github地址：https://github.com/vuejs-ai/skills/blob/main/README.md
文档概述
vue-skills 是一个为 Vue 3 开发提供 AI Agent Skills 的项目，帮助 AI 更好地理解和编写 Vue 3 代码。核心要点：
1. 项目定位
- 早期实验性/社区项目
- 为 AI 代理提供专门的 Vue 3 开发技能
- 基于实际问题提炼，可能不完整
2. 安装方式
方式一：使用 npx
npx skills add vuejs-ai/skills
npx skillsaddvuejs-ai/skills方式二：Claude Code Marketplace
# 添加市场/plugin marketplaceaddvuejs-ai/skills# 安装单个技能/plugininstallcreate-adaptable-composable@vue-skills# 安装多个技能/plugininstallcreate-adaptable-composable@vue-skills vue-best-practices@vue-skills vue-development-guides@vue-skills3. 使用方法
在提示词前加上 use vue skill：
Use vue skill,<你的提示词>这样可确保 AI 遵循文档中的模式。
4. 可用的 Skills
Skill | 适用场景 | 说明 |
vue-best-practices | Vue 3 + Composition API + TypeScript | 最佳实践、常见陷阱、SSR 指导、性能优化 |
vue-options-api-best-practices | Options API (data(), methods) | this 上下文、生命周期、Options API 的 TypeScript |
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-development-guides | 构建 Vue/Nuxt 项目 | 组件拆分、数据流、核心原则 |
vue-debug-guides | 调试 Vue 3 问题 | 运行时错误、警告、异步错误处理、水合问题 |
create-adaptable-composable | 创建可复用的 composables | MaybeRef/MaybeRefOrGetter 输入模式 |
5. 示例效果
文档展示了两个示例：
Todo App 示例：代码更易读
- 组件拆分
- 状态移至 composables
- 使用 shallowRef 处理原始响应式数据
useHidden Composable 示例：
- 使用 MaybeRef 和 MaybeRefOrGetter 提升灵活性
6. 方法论
Skills 分为两类：
- Capability（能力型）：AI 无法在没有技能的情况下解决问题（版本特定问题、未记录的行为等）
- Efficiency（效率型）：AI 可以解决但不够好（提供最佳模式和实践）
7. 验证流程
通过自动化评估验证：
- 基线测试（不使用技能）
- 使用技能测试
- 只有在技能能解决原本无法解决的问题时才保留
各技能详细使用场景
1. vue-best-practices
适用场景：
- 使用 Composition API + <script setup>
- 需要 TypeScript 支持
- 需要 SSR 指导
- 性能优化
包含内容：
- ref() vs reactive() 的选择
- defineModel() 的使用（你已在使用）
- Props 类型定义和校验
- Composables 的最佳实践
- 响应式陷阱和解决方案
2. vue-development-guides
适用场景：
- 构建 Vue 组件库
- 组件拆分和组织
- 数据流设计
- 核心开发原则
包含内容：
- 组件拆分策略
- 状态管理模式
- 组件通信方式
- 代码组织结构
3. create-adaptable-composable
适用场景：
- 创建可复用的 composables
- 需要灵活的响应式参数
包含内容：
- MaybeRef / MaybeRefOrGetter 模式
- 让 composables 同时接受 ref 和普通值
4. vue-debug-guides
适用场景：
- 运行时错误排查
- 响应式问题调试
- 异步错误处理
- 水合（hydration）问题
5. vue-options-api-best-practices
项目使用 Options API
6. vue-router-best-practices
项目中使用 Vue Router
7. vue-pinia-best-practices
项目中使用 Pinia
8. vue-testing-best-practices
适用场景：
- 编写组件测试
- E2E 测试
9. vue-jsx-best-practices
项目使用 JSX如何安装特定技能