# vue-skills

- 分类: 提示词与插件
- 官网: https://github.com/vuejs-ai/skills
- HTML: https://www.88z.ai/tools/vue-skills
- Markdown: https://www.88z.ai/tools/vue-skills.md

专为 Vue 3 开发打造的 AI 代理技能库，提升代码质量与最佳实践遵循度

## vue-skills是什么

vue-skills 是一个面向 Vue 3 开发的 AI 代理技能（Agent Skills）集合，旨在通过提供结构化的最佳实践和特定场景指导，帮助 AI 编码助手生成更高质量、更符合规范的代码。该项目由社区驱动，目前处于早期实验阶段，其核心目标是将真实的开发痛点转化为 AI 可理解的指令集。

该工具包涵盖了 Composition API、Options API、Vue Router、Pinia 状态管理以及测试等多个关键领域。通过引入这些技能，开发者可以引导 AI 避免常见的陷阱，如响应式数据使用不当或生命周期钩子误用，从而显著减少后期调试成本。

vue-skills 采用严格的验证流程，只有当某项技能能真正帮助模型解决原本无法解决的问题时，才会被保留。这种以结果为导向的方法确保了每个技能都具有实际价值，而非仅仅是文档的简单复述。

## 主要功能

- **全面覆盖 Vue 生态**：包含针对 Vue 3 Composition API、Options API、Vue Router 4、Pinia 以及 JSX 语法的专用最佳实践技能。
- **智能触发机制**：支持通过 'use vue skill' 前缀显式触发技能，确保 AI 严格遵循文档化的模式，提高输出的一致性。
- **经过验证的有效性**：每个技能规则都经过自动化评估验证，仅在能显著提升模型解决问题能力时才会被收录。
- **模块化安装**：支持通过 npx 或 Claude Code Marketplace 安装全部技能包，也可按需单独安装特定领域的技能。
- **调试与测试支持**：提供专门的调试指南技能，涵盖运行时错误、异步处理及水合问题，并包含 Vitest 和 Playwright 测试最佳实践。
- **可复用组合式函数**：提供创建灵活可复用 composables 的指导，支持 MaybeRef 和 MaybeRefOrGetter 输入模式，增强代码适应性。

## 如何使用

1. 1.确保你的开发环境中已配置支持 Agent Skills 的 AI 编码工具（如 Claude Code）。
2. 2.在终端中运行命令 `npx skills add vuejs-ai/skills` 一键添加所有 Vue 技能。
3. 3.或者，如果你使用 Claude Code Marketplace，可以通过 `/plugin install vue-skills-bundle@vue-skills` 安装完整包。
4. 4.如需仅安装特定技能，例如 Vue Router 最佳实践，可运行 `/plugin install vue-router-best-practices@vue-skills`。
5. 5.在与 AI 交互时，在提示词前加上 `use vue skill` 前缀，例如：`use vue skill, create a todo app`。
6. 6.检查生成的代码是否遵循了预期的最佳实践，如组件拆分、状态移至 composables 等。

## 应用场景

- **新项目初始化**：在启动新的 Vue 3 项目时，使用 vue-best-practices 技能确保初始代码结构符合现代标准，避免技术债务。
- **复杂状态管理重构**：当需要将组件内部状态迁移到 Pinia store 时，利用 vue-pinia-best-practices 技能指导正确的 store 设置和响应式模式。
- **路由逻辑优化**：在处理复杂的导航守卫和路由参数时，借助 vue-router-best-practices 技能确保路由组件生命周期的正确处理。
- **调试难以复现的错误**：遇到异步错误或水合问题时，使用 vue-debug-guides 技能获取针对性的排查步骤和解决方案。

## 价格 / 免费额度

价格与免费额度以官网为准。

## 适合人群

- Vue 3 前端开发者
- 使用 AI 辅助编程的团队
- 希望提升代码规范性的技术负责人
- 全栈工程师

## 常见问题

### vue-skills 是否稳定可用？

该项目目前标记为早期实验/社区项目。虽然技能经过验证，但可能仍存在不完整之处，欢迎社区反馈以帮助改进。

### 我必须每次都在提示词前加 'use vue skill' 吗？

虽然不是强制的，但加上前缀可以显式触发技能，确保 AI 更一致地遵循文档化的模式。不加前缀可能导致触发不稳定。

### 我可以只安装其中一个技能吗？

可以。你可以通过 Claude Code Marketplace 单独安装特定的技能，例如 `vue-router-best-practices@vue-skills`。

### 这些技能适用于 Vue 2 吗？

不适用。vue-skills 专门针对 Vue 3 开发设计，包括 Composition API 和 Vue Router 4 等 Vue 3 特有特性。

## 标签

Vue 3 · AI 代理技能 · 最佳实践 · Claude Code · 前端开发

功能、价格与可用性以官网为准。除本站自有 API 页面外，该产品由第三方独立运营，本站仅作导览介绍。