vue-nuxt-best-practices
为AI编码助手提供Vue.js和Nuxt.js开发的最佳实践指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：vue-nuxt-best-practices。 它的用途是：为AI编码助手提供Vue.js和Nuxt.js开发的最佳实践指导 完整的 Skill 内容见：https://321skill.com/skills/vue-nuxt-best-practices/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我用Vue 3的Composition API写一个带搜索过滤的用户列表组件。’，它会根据Skill中的最佳实践，建议使用`ref`和`computed`来管理状态，并避免在`v-for`中使用不必要的响应式开销。或者
对AI说：‘在Nuxt里怎么为这个页面做SSG？’，它会指导你使用`definePageMeta`和正确的数据获取钩子。
介绍
这个Skill旨在解决开发者在Vue.js和Nuxt.js项目中，希望AI助手能遵循最佳实践而非仅生成基础代码的问题。它通过一系列Markdown文件，将Vue的响应式模式、组件性能、Composition API，以及Nuxt的数据获取、SSR/SSG、SEO优化等专业知识注入到AI助手的上下文中。
使用时，开发者只需将Skill文件安装到项目指定的目录（如.claude/skills/），当AI助手（如Claude Code）检测到相关的代码任务或关键词（如“ref”、“useFetch”、“SEO”）时，便会自动调用这些知识，提供符合最佳实践的代码建议和解决方案。
它非常适合希望提升开发效率和代码质量的前端、全栈开发者，尤其是那些正在使用或计划使用Vue/Nuxt技术栈，并希望AI助手能成为更专业、更懂框架的“结对编程”伙伴的工程师。
建议开发者根据项目需求选择性安装特定Skill（如只安装vue-best-practices），而非全部，以避免上下文过长。同时，由于Skill内容基于特定版本的最佳实践，在框架版本重大更新时，可能需要关注仓库的更新以确保建议的时效性。
核心特点
与通用前端开发Skill不同，它深度聚焦于Vue和Nuxt生态，提供了从组件开发到全栈部署、再到SEO和AI搜索优化的完整工作流指导，并且专门针对AI代理（如Claude Code）的交互模式进行了优化。
注意事项
不适合非Vue/Nuxt技术栈的项目，或仅需要通用编程帮助的场景。
常见问题
这个Skill支持哪些AI助手？
主要针对Claude Code设计，但其Markdown格式理论上也适用于其他能读取技能文件的AI编码助手。
安装后如何触发Skill？
AI助手会自动识别代码上下文中的关键词（如“Vue”、“Nuxt”、“SSR”等）并应用对应的最佳实践，无需手动触发。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-nuxt-best-practices/raw/index.md 读取 vue-nuxt-best-practices 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-nuxt-best-practices/raw/index.md（查看排版版本）