嫌 AI 写 Vue 太烂?给它装上这套 Skills!

更新里提到的几个问题，写 Vue 的朋友应该不陌生。一个组件接收太多 props，往外抛一堆事件；composable 把内部状态全返回给调用方；数据从父组件传到孙组件，中间几层都得跟着接。

这套 Skill 来自 vuejs-ai/skills^[1]，专门给 AI 编程工具补充 Vue 3 开发指导。平时我们在提示词里加一句“遵循最佳实践”，具体该怎么做，往往还得继续解释。它把这些要求整理成了 AI 可以读取的文件。

这 8 个 Skills，分别管什么

仓库列出的 8 个 Skills^[2]覆盖了 Vue 开发里的不同任务，可以按项目需要选择。

比如项目沿用 Options API，就选对应的 Skill；遇到报错，可以用 vue-debug-guides。没写 JSX 的项目，也不用特意装 JSX 那一项。

项目仍处于社区早期实验阶段。仓库作者也提醒，规则可能不完整，需要使用者反馈。可以拿来帮忙写代码，遇到和项目约定不一致的地方，还是要具体看。

有几条要求，我觉得挺实用

先说拆组件。vue-best-practices^[3] 要求 AI 在处理复杂功能或结构重构前，先弄清楚组件各自负责什么、状态放在哪里。文件长度可以提醒你检查代码，但不能拿来当拆分标准。一个小而完整的功能，留在同一个 SFC 里也没问题。

这条很有必要。让 AI “拆一下这个大组件”，如果它只是把模板搬到几个子组件里，状态还全部留在父组件，接下来就得补很多 props 和事件转发。文件短了，改功能时要看的文件却多了。

规则里还专门提到，不能把一堆无关参数打包成一个对象，就算完成了简化。调用方仍然要知道对象里每一项的用法，换个包装解决不了这个问题。

composable 也有类似要求。把整页逻辑搬进 useFeature() 以后，还得继续检查里面的职责。协调多个功能的函数，可以负责把它们组织起来，但不该把所有实现都放进去，再把内部状态原样返回。

对调用方有用的状态和操作留下，内部辅助变量就留在内部。这里没有规定“最多返回几个字段”，判断依据是调用方到底需不需要。为了让返回值少一点，再套一个大对象，依然没什么帮助。

provide/inject 的使用条件也写得很清楚。普通父子通信继续用 props 和事件；共享数据需要传给后代组件，而中间层只是接过去再传下去时，再考虑有明确作用范围、带类型的注入。动手之前先检查组件拆分是否合理。

我比较喜欢这种写法。它连“什么时候先别用”也写了，AI 才不容易看到多层组件，就把数据一股脑改成注入。

安装后，怎么让 AI 用起来

仓库给出的安装命令很简单。

npx skills add vuejs-ai/skills

跟着安装工具的提示，选择需要的 Skills 和目标工具。

作者建议在提示词前面加上 use vue skill。只靠 AI 根据任务描述自行触发，效果可能不稳定，明确说出来更省事。

作者给了两个例子，提示词都很短

README 的 Examples^[4] 中，第一个例子是用 vue-best-practices 创建 Todo App。原提示词只有 create a todo app，翻译过来就是下面这一句。

创建一个待办事项应用。

作者在演示说明中列出了使用 Skill 后的变化，包括拆分组件、把状态移进 composable，以及让代码更易读。对应的 useTodos.ts^[5] 里，新增、删除、切换完成状态等操作放在一起，筛选后的列表和任务数量用 computed 计算。

这份代码还把 todos 和 filter 以只读形式返回，组件通过 addTodo、setFilter 等方法修改它们。读代码时，可以直接看到哪些状态允许读取、修改要走哪个入口。完整项目放在作者的 Todo App 演示目录^[6]里。

第二个例子用了 create-adaptable-composable，任务是编写 useHidden。原提示词是 create a reusable composable for controlling hidden for a element，中文可以这样写。

创建一个可复用的组合式函数，用来控制一个元素的隐藏状态。

作者展示的参数类型用到了 MaybeRef 和 MaybeRefOrGetter。前者允许传入普通值或 ref，后者还允许传入 getter 函数。调用方可以根据自己的状态来源传参，不必都改成同一种形式。

比如 README 中的 hidden 参数使用 MaybeRef<boolean>，initialHidden 使用 MaybeRefOrGetter<boolean>，目标元素 target 也支持响应式输入。具体实现可以看作者的 useHidden 演示^[7]。

这两个例子都来自仓库作者的演示。自己使用时，可以按 README 的建议，在中文需求前加上 Use vue skill，再补充项目已有的约定。简单任务不用先写一大段开发规范，相关指导已经放在 Skill 里了。

也可以从 Skills Hub 合集安装

不想敲命令的话，Skills Hub 已经整理好了 Vue 开发技能合集^[8]。这 8 个 Skills 都在里面，可以先看用途和来源，再勾选需要的条目。

选好后，点击底部“在 Skills Hub 中安装”，进入 App 确认安装。还没装客户端，可以从页面上的下载入口安装。

旁边也有“复制给 Agent 安装”。如果你正在用 AI 编程工具，直接把复制的内容交给它处理就行。

写普通 Vue 页面可以先选 vue-best-practices，涉及路由、Pinia 或测试，再加对应的 Skill。安装后记得告诉 AI 项目的 Vue 版本和 API 风格，尤其是还在用 Options API 的项目，把现有约定说清楚。

引用链接