Vue Skills：让AI写代码更懂你的Vue项目
2026年，AI辅助编程已成开发标配。但大模型虽懂Vue语法，却常因不了解项目最佳实践、代码风格和目录结构，生成"能跑但不对"的代码。这时，由Vue核心成员Yunfei He发起的开源项目Vue Skills应运而生，成为连接AI智能体与项目规范的"肌肉记忆"。
一、什么是Vue Skills？
Vue Skills定位为"Vue 3开发的AI智能体技能包"，核心目标是将Vue生态的最佳实践、编码规范和架构决策封装为AI可执行的规则。它不是静态的规则文档，而是具备按需加载和脚本执行能力的动态工具包（如vuejs-ai/skills）。
如果把大模型比作"大脑"（负责思考与规划），Agent比作"手"（负责执行动作），那么Skills就是经过长期训练形成的"肌肉记忆"。AI无需每次重新思考代码格式，直接调用Skills即可生成符合项目规范的代码，真正实现"开箱即用"的规范代码生成。
二、为什么需要Skills？传统规则的三大痛点
以往开发者通过.md规则文件约束AI，但存在三大问题：
- 上下文占用：静态规则长期占用Token，挤占核心逻辑空间
- 无法动态执行：规则只能描述"应该怎么做"，无法直接执行代码检查/生成
- 加载效率低：所有规则需一次性加载，无法按需调用
Vue Skills通过三大创新解决这些问题：
- 按需加载：Skills配置元数据，AI先读取轻量级索引，仅在需要时（如"编写Pinia Store"）才加载完整指令
- 内置脚本：可直接运行代码检查、文件生成等脚本，AI无需理解脚本实现细节
- 动态适配：通过交互式配置适配Vue 2/3、组合式/选项式API、是否启用Pinia等项目特性
三、实战：在Roo Code中接入Vue Skills
主流AI编辑器均已支持Skills机制，接入仅需三步：
- 第一步：安装技能包
npx skills add vuejs-ai/skills
- 第二步：交互式配置
C:\Users\25830>npx skills add vuejs-ai/skills
Need to install the following packages:
skills@1.4.5
Ok to proceed? (y) y███████╗██╗ ██╗██╗██╗ ██╗ ███████╗
██╔════╝██║ ██╔╝██║██║ ██║ ██╔════╝
███████╗█████╔╝ ██║██║ ██║ ███████╗
╚════██║██╔═██╗ ██║██║ ██║ ╚════██║
███████║██║ ██╗██║███████╗███████╗███████║
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝T skills
|
o Source: https://github.com/vuejs-ai/skills.git
|
o Repository cloned
|
o Found 8 skills
|
o Select skills to install (space to toggle)
| create-adaptable-composable, vue-best-practices, vue-jsx-best-practices, vue-options-api-best-practices,
vue-pinia-best-practices, vue-router-best-practices, vue-testing-best-practices, vue-debug-guides
|
o 42 agents
◇ Which agents do you want to install to?
│ Amp, Cline, Codex, Cursor, Gemini CLI, GitHub Copilot, Kimi Code CLI, OpenCode, Warp
|
o Installation scope
| Global|
o Installation Summary -----------------------------------+
| |
| |
| Create Adaptable Composable |
| |
| ~\.agents\skills\create-adaptable-composable |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Best Practices |
| |
| ~\.agents\skills\vue-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Jsx Best Practices |
| |
| ~\.agents\skills\vue-jsx-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Options Api Best Practices |
| |
| ~\.agents\skills\vue-options-api-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Pinia Best Practices |
| |
| ~\.agents\skills\vue-pinia-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Router Best Practices |
| |
| ~\.agents\skills\vue-router-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| Vue Testing Best Practices |
| |
| ~\.agents\skills\vue-testing-best-practices |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
| General |
| |
| ~\.agents\skills\vue-debug-guides |
| copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more |
| |
+----------------------------------------------------------+
|
o Security Risk Assessments ----------------------------------------------------+
| |
| Gen Socket Snyk |
| vue-testing-best-practices Safe 0 alerts Low Risk |
| vue-router-best-practices Safe 0 alerts Low Risk |
| vue-pinia-best-practices Safe 0 alerts Low Risk |
| vue-options-api-best-practices Safe 0 alerts Low Risk |
| vue-jsx-best-practices Safe 0 alerts Low Risk |
| vue-best-practices Safe 0 alerts Low Risk |
| create-adaptable-composable Safe 0 alerts Low Risk |
| vue-debug-guides Safe 0 alerts -- |
| |
| Details: https://skills.sh/vuejs-ai/skills |
| |
+--------------------------------------------------------------------------------+
|
o Proceed with installation?
| Yes
|
o Installation complete|
o Installed 8 skills ----------------------------------+
| |
| |
| Create Adaptable Composable |
| ✓ create-adaptable-composable (copied) |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| → ~\.agents\skills\create-adaptable-composable |
| |
| Vue Best Practices |
| ✓ vue-best-practices (copied) |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| → ~\.agents\skills\vue-best-practices |
| |
| Vue Jsx Best Practices |
| ✓ vue-jsx-best-practices (copied) |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| → ~\.agents\skills\vue-jsx-best-practices |
| |
| Vue Options Api Best Practices |
| ✓ vue-options-api-best-practices (copied) |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| → ~\.agents\skills\vue-options-api-best-practices |
| |
| Vue Pinia Best Practices |
| ✓ vue-pinia-best-practices (copied) |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| → ~\.agents\skills\vue-pinia-best-practices |
| |
| Vue Router Best Practices |
| ✓ vue-router-best-practices (copied) |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| → ~\.agents\skills\vue-router-best-practices |
| |
| Vue Testing Best Practices |
| ✓ vue-testing-best-practices (copied) |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| → ~\.agents\skills\vue-testing-best-practices |
| |
| General |
| ✓ vue-debug-guides (copied) |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| → ~\.agents\skills\vue-debug-guides |
| |
+-------------------------------------------------------+|
— Done! Review skills before use; they run with full agent permissions.|
| One-time prompt - you won't be asked again if you dismiss.
|
o Install the find-skills skill? It helps your agent discover and suggest skills.
| No
|
| You can install it later with: npx skills add vercel-labs/skills@find-skills
配置后 skill 就会在 ~\.agents\skills 目录下创建
- 第三步：在Roo Code配置
设置 -> Skills -> 添加技能
刷新后发现已经配置好了
如果没有配置，可以先添加一个全局skills
添加了全局skills后，就会在 ~\.roo\skills 目录下创建
可以将那些 vue skills 文件夹移入 ~\.roo\skills 目录下，就可以将 vue skills 添加到 roo code 的全局技能。