vuejs-ai/skills：别让 agent 写出 React 味的 Vue

让 LLM 写"一个带 composable 的 Vue 3 组件"，然后看着它悄悄掏出 React 的肌肉记忆：useEffect 式的生命周期思路、该用 computed 的地方上 useMemo、惯用写法明明是 provide/inject 却在层层传 prop。vuejs-ai/skills（2.8k 星）是一份社区合集，八个 skill 把 Vue 3 的约定编码进去——按 README 的说法源自真实世界的问题——让 agent 第一稿就写出 Vue 的味道。

为什么这个 Skill 重要

八个 skill 对准 agent 真正会出错的地方：vue-best-practices 覆盖 Composition API + TypeScript、常见坑、SSR 指导和性能；vue-router-best-practices 处理 Vue Router 4 的导航守卫、路由参数和路由组件生命周期；vue-debug-guides 对准运行时错误、异步异常处理和水合问题——这些只在运行时才暴露。此外还有面向 Options API 代码库的 skill、Pinia 状态模式、Vitest 和 Playwright 测试、与 React JSX 的语法差异，以及一个教 MaybeRef/MaybeRefOrGetter 输入模式的 create-adaptable-composable。

来自源头的诚实说明：README 把项目标注为早期实验，skill "可能因幻觉而不完整"，请求用户反馈，并计划在证明有价值后提议把项目移交 Vue 官方组织。把它当社区项目看，不是 Vue 官方资源。

安装

标准安装器：

npx skills add vuejs-ai/skills

Claude Code 用户也可以走 marketplace：

/plugin marketplace add vuejs-ai/skills
/plugin install vue-skills-bundle@vue-skills

或者只挑单个：/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills。

实战：人审之前先过一遍 Vue 惯用法

你有一个带新 composable 的 PR，想在人类评审看到之前先把 Vue 惯用法过一遍。

1. 装上合集，在项目里开会话。
2. 按 README 建议加前缀提示——它让触发更可靠：

use vue skill, review this composable for reactivity and MaybeRef patterns

3. vue-best-practices 和 create-adaptable-composable 会检查这些约定：computed 与 useMemo 习惯、ref 解包、MaybeRefOrGetter 接受度、该用 provide/inject 处冒出来的 prop 层层传。

README 自带的 demo 完整展示了效果：一个 "create a todo app" 提示产出组件，仓库里链接了应用 skill 前后的变更 diff。

实战：调试水合不匹配

SSR 水合错误是 agent 最容易抓瞎的地方。vue-debug-guides 的范围正好是这个——运行时错误、警告、异步异常处理、水合问题——所以"解释这个水合不匹配警告并修掉根因"这类提示会拉出结构化的调试步骤，而不是瞎猜。

技巧

• 提示前加 use vue skill——README 明确说不加的话触发"可能不一致"，取决于你的提示和 skill 描述关键词的匹配程度。
• Options API 代码库要装 vue-options-api-best-practices——它对 this 上下文和 Options API 下 TypeScript 的覆盖与 Composition API 版是分开的。
• 用 Vitest、Vue Test Utils 或 Playwright 的话，把测试 skill 和其他的一起装——测试覆盖是独立的 skill。

何时不用这个 Skill

这是社区实验，不是 Vue 官方项目——README 自己就警告可能不完整，非显而易见的结论请对照 Vue 文档核实。如果团队用 Nuxt 且有自己的约定，这里的 SSR 指导是 Vue 层面的，不是 Nuxt 层面的。

查看 排行榜 了解更多 skill。