提示词与插件

vue-skills

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

访问官网 github.com

github.com 官网页面截图，实际界面以官网为准。

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

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