nuxt-claude-devtools
在Nuxt DevTools中集成Claude AI助手，实现开发环境内直接对话。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：nuxt-claude-devtools。 它的用途是：在Nuxt DevTools中集成Claude AI助手，实现开发环境内直接对话。 完整的 Skill 内容见：https://321skill.com/skills/nuxt-claude-devtools/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我分析当前页面这个按钮组件为什么点击无效，这是它的代码上下文。” 它会结合你通过组件选择器发送的Vue组件代码，分析可能的事件绑定或状态管理问题，并给出修复建议。或者，你可以说：“为这个用户列表设计一个分页加载功能。” Claude会根据项目上下文，生成相应的Vue组合式API代码和模板建议。
介绍
这个Skill将Claude Code AI助手深度集成到Nuxt DevTools中，解决了开发者在IDE和AI助手之间频繁切换、无法便捷地将页面组件和上下文信息提供给AI的问题。它允许开发者直接在Nuxt DevTools面板中与Claude聊天，支持实时流式响应、语音输入、文件附件，并能通过组件选择器将页面上的Vue组件作为上下文发送给AI，极大提升了开发调试效率。
使用方式非常简单，只需安装模块并在Nuxt配置中启用，启动开发服务器后，DevTools中就会出现新的“AI”标签页。开发者可以在此与Claude进行自然语言对话，询问代码问题、请求调试帮助，或利用其技能、子代理和斜杠命令扩展功能。
它非常适合使用Nuxt框架进行全栈或前端开发的工程师、技术负责人以及希望提升开发效率的团队。无论是调试复杂组件、生成代码片段，还是快速查阅项目文档，都能在熟悉的开发工具内一站式完成。
需要注意的是，使用前必须确保已安装并认证Claude Code CLI。此外，虽然提供了覆盖层模式以便在禁用DevTools时使用，但核心功能体验与完整的DevTools集成略有不同，建议根据实际开发场景选择启用方式。
核心特点
与通用的浏览器Claude扩展不同，它深度集成于Nuxt开发工具链，可直接抓取页面上的Vue组件作为对话上下文，并原生支持Nuxt项目的技能、代理和命令管理。
注意事项
仅适用于Nuxt 3/4项目，且必须依赖已安装的Claude Code CLI，无法独立运行。
常见问题
必须安装Claude Code吗？
是的，这是该模块运行的必要前提，需要先安装并登录Claude Code CLI。
可以在生产环境中使用吗？
这是一个开发工具模块，主要用于开发调试阶段，不建议在生产构建中启用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/nuxt-claude-devtools/raw/index.md 读取 nuxt-claude-devtools 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/nuxt-claude-devtools/raw/index.md（查看排版版本）