claude-skill-vue-development
一个专为Vue 3 + TypeScript项目设计的测试驱动开发技能，确保代码质量和最佳实践。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-skill-vue-development。 它的用途是：一个专为Vue 3 + TypeScript项目设计的测试驱动开发技能，确保代码质量和最佳实践。 完整的 Skill 内容见：https://321skill.com/skills/claude-skill-vue-development/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我创建一个用户资料展示组件，包含可编辑的姓名和邮箱字段，并编写相应的单元测试。” 它会根据技能规则，使用`defineProps`和`defineModel`定义类型化属性和双向绑定，并优先使用`@testing-library/vue`编写基于用户行为的测试用例，而不是测试内部实现细节。
介绍
这个技能旨在解决Vue.js开发中常见的代码质量不一致、测试覆盖不足和架构混乱的问题。它通过一套严格的规则和模式，引导AI助手（如Claude）生成符合现代Vue 3最佳实践的代码，特别强调TypeScript优先、组合式API和以用户行为为中心的测试。
使用时，你只需在Claude Code中启用此插件，或在支持该技能的AI开发环境中调用。当你在编写Vue组件、组合式函数、测试或处理路由时，AI会根据技能内置的规则（如使用defineModel而非手动v-model、优先使用Testing Library进行测试）来生成或审查代码，并自动识别和阻止“红色标志”式的反模式。
它非常适合那些希望提升项目代码质量、遵循统一规范的前端开发团队，以及个人开发者，尤其是对Vue 3的TypeScript集成、组合式API和测试驱动开发有要求，但希望借助AI来强制执行这些规范的用户。
建议在开始新的Vue 3 + TypeScript项目时启用此技能，以获得最佳效果。对于遗留项目，可以逐步引入其规则进行重构。注意，它主要面向现代Vue 3开发栈，对于Vue 2项目或非TypeScript项目可能不完全适用。
核心特点
与同类Vue开发技能相比，它强制推行“测试优先”的开发理念，并内置了包含12个反模式的“红色标志”自动检测机制，能主动阻止AI生成不符合最佳实践的代码。同时，它深度集成了最新的Vue 3 API（如`defineModel`）和Testing Library，而非停留在基础语法层面。
注意事项
不适合Vue 2项目、不使用TypeScript的Vue项目，或需要快速原型设计、不追求严格代码规范的场景。
常见问题
这个技能能帮助我写Vue 2的代码吗？
不能，它专为Vue 3和TypeScript设计，其规则和示例基于Vue 3的组合式API。
我需要安装Claude Code才能使用吗？
作为Claude Code插件使用体验最佳，但技能文件本身也包含了详细的规则文档，可供开发者在其他AI助手或环境中参考。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-skill-vue-development/raw/index.md 读取 claude-skill-vue-development 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-skill-vue-development/raw/index.md（查看排版版本）