Vue 3 代码质量最佳实践助手 Skill 技能

技能简介

vuejs-ai-vue-best-practices 是 Skillstore 上由 vuejs-ai 官方团队维护的Vue 3 代码质量改进技能，专门帮 AI 编程代理（Claude / Codex / Claude Code）在生成或评审 Vue 3 代码时套用 Vue 团队认可的写法、避开 Composition API 与响应式系统里最常见的坑。技能质量评分 82 分、Quality Tier Silver，已审计 complete、风险等级 safe，是 Vue 3 工程化项目里把"AI 写出来的代码"对齐"团队认可的 Vue 模式"的桥梁。

核心能力

• Composition API + script setup 评审：检查 ref/reactive/computed/watch 的使用是否合理、是否拆分了 script setup 写法。
• 响应式陷阱诊断：识别 ref 解构丢失响应性、watch 误用、深层响应式失效等问题。
• 生态组件指引：给出 Vue Router、Pinia、KeepAlive、Suspense、Teleport、async component 的选型建议。
• 性能风险识别：扫描大列表渲染、过渡成本、render 函数、scoped CSS 引起的性能回退。
• TypeScript 与 SSR 辅助：为 Vue 3 + TS、Vue SSR 项目提供类型与水合（hydration）建议。
• 模式对照：把 Options API 与 Composition API 的迁移路径、风险点、保留行为列清楚。

安装配置

# 通过 Skillstore CLI 安装
npx skillstore add vuejs-ai/vue-best-practices

• 依赖：Node.js + npx；Claude / Codex / Claude Code CLI；Vue 3 项目源码访问。
• 平台支持：Claude、Codex、Claude Code 全部支持。
• 授权：MIT 协议；仓库路径 vuejs-ai/skills/tree/main/skills/vue-best-practices/。

使用步骤

1. 指定审查对象：把要审查的 Vue 组件文件路径或代码片段交给 Claude。
2. 声明目标：说明当前阶段是评审、改旧/调优、性能诊断、SSR 设计哪一种。
3. 跑模式审查：让 Claude 按 Composition API、响应式、组件通信三类清单逐项检查。
4. 给出优先级修复：要求按"高/中/低"列出最值得改的点，并标注每条的影响。
5. 复核 Options API 迁移：如果是 Options API 改 script setup，要求保留行为对照。
6. 校验类型与构建：用 vue-tsc、Volar、项目测试验证修改后的代码类型与运行行为。
7. 形成团队基线：把生成的清单沉淀为团队 Vue 3 评审基线。

适用场景

• Code Review 前的预审：在 PR 合并前让 AI 先按 Vue 3 团队认可的写法过一遍。
• Options API 迁移：把老项目逐步改造成 Composition API + script setup。
• 性能调优：定位长列表 watcher 滥用、过渡成本过高、SSR 水合失败的根因。
• 新人入职培训：用统一清单帮助新人快速对齐团队 Vue 3 写法。
• 架构与 SSR 设计：为 Vue 3 + Nuxt SSR 项目规划水合策略与异步组件。

适用人群

• Vue 3 应用开发者：日常需要写/审 Vue 组件的前端工程师。
• 前端 Tech Lead：希望团队评审有一份稳定的 Vue 3 基线清单。
• AI 编程工具使用者：希望 Claude / Codex 输出的 Vue 代码更贴近官方风格。
• 企业前端架构师：在大型 Vue 3 + TS 项目里推动规范化。
• Vue 教学者：把这份技能作为教学参考标准。

工作原理

技能的内核是"模式清单 + 评审流程"。Claude / Codex / Claude Code 被调用时，会先读 SKILL.md 中的 Vue 3 官方认可模式清单（Composition API、script setup、响应式原语、Vue Router/Pinia 选型、性能与 SSR 注意点），然后按用户给出的组件文件、目标阶段（评审 / 改旧 / 性能 / SSR）跑对应子清单。所有建议都附带"为什么不推荐 → 推荐写法 → 影响与代价"三段式推理，避免给出脱离项目上下文的"教科书答案"，并显式提示 Vue 2 与 Vue 3 的差异、TypeScript 严格模板检查的副作用、SSR 水合陷阱。

官方链接

• Skillstore 公开页：https://skillstore.io/skills/vuejs-ai-vue-best-practices
• Markdown 文档：https://skillstore.io/skills/vuejs-ai-vue-best-practices.md
• Manifest：https://skillstore.io/api/skills/vuejs-ai-vue-best-practices/manifest
• GitHub 仓库：https://github.com/vuejs-ai/skills/tree/main/skills/vue-best-practices/
• 安装命令：npx skillstore add vuejs-ai/vue-best-practices