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-skills

3. 使用方法

在提示词前加上 use vue skill：

Use vue skill,<你的提示词>

这样可确保 AI 遵循文档中的模式。

4. 可用的 Skills

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如何安装特定技能