INDEX · #819AI编程工具新收录

Vue Skills

github.com

Vue 3 专属的 Agent Skills 合集，8 个技能覆盖 Composition API、Router、Pinia、测试与调试，一条命令装进 AI 编程助手

AI编程 skill Vue 前端开源

访问官网更多同类工具

官网首页截图最近检查 2026/11/12

工具介绍

关于 Vue Skills 的定位、能力与适用场景

Vue Skills（仓库名 vue-skills）是 vuejs-ai 组织维护的一套 Agent Skills，专门解决 AI 编程助手写 Vue 3 时「看起来对、细节全错」的问题。它把 Vue 生态里版本敏感的行为、容易混淆的写法、训练数据覆盖不到的边界情况整理成结构化技能文件，装上之后 AI 会按文档里的模式生成代码，而不是凭印象猜。

仓库目前有 8 个技能，覆盖 Composition API、Options API、Vue Router、Pinia、组件测试、JSX、调试排错和可复用 composable 八条主线。作者把它定位成 early experiment，规则来自真实项目里踩过的坑，但也坦言部分内容可能带模型幻觉，建议先在 demo 里验证再用到生产。

8 个技能

vue-best-practices：Vue 3 + Composition API + TypeScript 的最佳实践、常见坑、SSR 指导与性能
vue-options-api-best-practices：Options API 的 this 上下文、生命周期与 TypeScript 写法
vue-router-best-practices：Vue Router 4 的导航守卫、路由参数与路由组件生命周期
vue-pinia-best-practices：Pinia 的 store 组织、响应式与状态模式
vue-testing-best-practices：Vitest、Vue Test Utils、Playwright 的组件测试与 E2E
vue-jsx-best-practices：Vue 里写 JSX 与 React JSX 的语法差异
vue-debug-guides：运行时错误、警告、异步错误处理与 hydration 问题
create-adaptable-composable：用 MaybeRef / MaybeRefOrGetter 写可复用 composable

怎么安装

一行命令装进支持 Agent Skills 的工具：

npx skills add vuejs-ai/skills

Claude Code 用户也可以走插件市场，整包装或单装：

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

用的时候建议在 prompt 前面加一句 Use vue skill,，显式触发能保证命中，不加前缀时命中率取决于你的描述和技能关键词的匹配程度。

技能是怎么筛出来的

作者把技能分成两类：Capability 指 AI 不装技能就做不对的问题，比如版本特定行为、未文档化的实现、新特性和训练数据之外的边界情况；Efficiency 指 AI 能做但做不好的问题，靠最佳实践把结果拉齐。每条规则都要过自动化 eval：先跑一遍 baseline，再装着技能跑一遍，只有从「失败」变成「通过」的规则才保留，baseline 本来就能通过的会被砍掉。

项目采用 MIT 协议，开发和 PR 走 dev 分支，main 只放发布版本。作者表示如果这套东西确实有价值，会提议把项目转交给 Vue 官方组织维护。同类的还有 antfu/skills、vueuse/vueuse-skills 和 onmax/nuxt-skills，覆盖范围不同，可以并存。

核心功能

Vue Skills 能做什么

8 个 Vue 专项技能
覆盖 Composition API、Options API、Vue Router、Pinia、测试、JSX、调试排错和可复用 composable 八条主线。
一条命令安装
执行 npx skills add vuejs-ai/skills 即可装进支持 Agent Skills 的 AI 编程助手，无需手工拷贝文件。
Claude Code 插件市场
支持 /plugin marketplace add 后整包或单个安装，vue-best-practices 等技能可以独立启用。
显式触发更稳
在 prompt 前加 Use vue skill, 前缀即可强制命中，避免依赖描述关键词的模糊匹配。
Capability / Efficiency 分类
区分「模型根本做不对」和「能做但做不好」两类问题，分别用事实约束和最佳实践来补。
自动化 eval 验证
每条规则对比 baseline 与 with-skill 两轮结果，只有能把失败变通过的才保留，删掉冗余规则。
覆盖版本敏感细节
针对 Vue 3 新特性、未文档化行为和训练数据之外的边界情况给出明确写法，减少过时用法。
MIT 开源协作
MIT 协议，开发在 dev 分支进行，维护者通过 GitHub Action 把 dev 同步到 main 发布。

优点与不足

基于实际使用整理

优点

专注 Vue 3 一个框架，规则颗粒度比通用编程 skill 细，能落到具体 API 和写法。
8 个技能覆盖 Composition API、Router、Pinia、测试、JSX、调试和 composable，主线齐全。
每条规则都过 eval 验证，没有提升的直接删掉，减少无效指令干扰模型。
安装成本低，npx 一行搞定，也能在 Claude Code 插件市场里整包安装。
MIT 协议免费使用，仓库约 3.3k 星、198 次 fork，社区协作比较活跃。

不足

官方自述仍是 early experiment，部分规则可能含模型幻觉，需要自己甄别。
面向 Agent Skills 生态，主要适配 Claude Code 一类工具，其他编辑器要手动接。
只覆盖 Vue，不涉及 React、Nuxt、Vite 等其他前端技术栈。
技能触发不够稳定，不写 Use vue skill 前缀时命中率会明显下降。
中文资料较少，README 和技能正文目前都是英文。

常见问题

关于 Vue Skills 的常见疑问

Vue Skills 是什么？

一套面向 AI 编程助手的 Agent Skills 合集，专注 Vue 3 开发。它把版本敏感的行为、容易写错的模式和最佳实践写成结构化技能文件，装上之后 AI 生成的 Vue 代码会更贴近官方推荐写法。

怎么安装？

在项目里执行 npx skills add vuejs-ai/skills 即可。Claude Code 用户还可以用 /plugin marketplace add vuejs-ai/skills 添加市场，再安装整包 vue-skills-bundle 或单个技能。

包含哪些技能？

目前 8 个：vue-best-practices、vue-options-api-best-practices、vue-router-best-practices、vue-pinia-best-practices、vue-testing-best-practices、vue-jsx-best-practices、vue-debug-guides、create-adaptable-composable。

为什么 Vue 需要专门的 skill？

AI 的训练数据里 Vue 2 和 Vue 3 的写法容易混淆，新特性和未文档化的行为也常常覆盖不到。这类问题模型自信地答错，靠通用提示词修不好，只能把正确规则显式写进上下文。

怎么保证技能被触发？

在 prompt 前面加 Use vue skill, 前缀，显式点名能让模型稳定加载对应技能。不写前缀时是否命中，取决于你的描述和技能说明里的关键词有多接近。

规则质量怎么保证？

每条规则都跑自动化 eval：先不带技能跑一遍 baseline，再带技能跑一遍，只有能从失败变通过的才保留，本来就能通过说明模型已知，规则会被删掉。

收费吗？

不收费。仓库采用 MIT 协议，技能文件和代码都可以自由使用、修改和分发，只需要自备 AI 编程工具和模型额度。

可以直接用到生产项目吗？

建议先小范围验证。作者明确把它定位成早期实验，规则来源于真实问题但可能有幻觉成分，先在 demo 或非关键模块里试，确认生成结果符合预期后再推广。

和 antfu/skills、vueuse-skills 有什么区别？

都是 Vue 生态的 Agent Skills，但覆盖范围不同：本项目聚焦 Vue 3 本身的写法与最佳实践，antfu/skills 偏向 Vue、Vite、Nuxt 综合，vueuse-skills 专注 VueUse。三者可以同时安装，按任务选择触发。