关于这个 Skill
检查现有项目，添加或更新仅开发环境展示的工具栏，选择反馈方式并验证。Skill 区分浏览器内手动复制与经服务传递给 Agent 的反馈，不把工具栏可见当作连接成功。
为什么推荐
可复用的接入流程：检查已有挂载、沿用项目包管理器，并保留 Next.js 服务端布局。实时同步需要独立 MCP 服务和真实测试批注。
适合用来做什么
- 给现有 React 项目添加元素级 UI 反馈。
- 先配置手动复制，或连接支持的 MCP 客户端。
- 排查批注未到达 Agent 时的 endpoint 不一致问题。
检查项目并挂载工具栏
检查当前项目
读取项目说明、识别包管理器，并检查已有依赖和挂载，保留当前回调与选项。
添加仅开发环境展示的组件
在 Next.js App Router 中挂在根 body 的 children 之后；保留根布局的服务端渲染，Agentation 自带客户端边界。
选择手动复制或实时同步
不指定 endpoint 时，反馈保留在浏览器中，可复制给助手；MCP 同步时，两端应使用同一服务地址，并保留已有自定义端口或代理。
服务启动或健康检查通过只是接入的一部分。应创建带有明确标识的测试批注，再通过 MCP 批注工具核对原评论和页面，才能认定实时同步就绪。
| 命令 | 用途与使用时机 |
|---|---|
npx -y agentation-mcp server | 需要实时同步时启动独立的 MCP 与 HTTP 反馈服务。 |
npx agentation-mcp doctor | 执行服务诊断后，继续验证真实批注。 |
安装接入 Skill
使用项目已有包管理器安装独立的 agentation 依赖，并将工具栏放在开发环境条件内。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add benjitaylor/agentation --skill agentation | 从仓库中仅选择接入工作流。 |
使用前需要了解
- React 18 或更新版本及桌面浏览器；上游工具栏不支持手机。
- Node.js 与项目包管理器；安装此 Skill 不会自动安装工具栏包。
- 实时同步还需要 agentation-mcp、兼容 MCP 客户端，以及浏览器和 Agent 均可访问的同一 HTTP endpoint；手动复制无需此服务。
- 上游代码使用 PolyForm Shield 1.0.0，请按用途查看原许可证。
支持的 Agent
Claude CodeCodex CLICursorGitHub CopilotDeepSeek HarnessGemini CLIGrok BuildHermes AgentOpenCodePiKiroRovo DevQoderMistral VibeGoogle Antigravity
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
