このスキルについて
Inspect an existing project, add or update the development-only toolbar, choose the feedback mode and verify it. The Skill distinguishes browser-local copy from server-backed agent feedback instead of treating a visible toolbar as a working connection.
おすすめする理由
A reusable setup workflow that checks existing mounts, follows the project package manager and preserves the Next.js server layout. Live sync requires a separate MCP server and an actual test annotation.
役立つこと
- Add element-level UI feedback to an existing React project.
- Set up manual copy first, or connect a supported MCP client.
- Diagnose endpoint mismatches when annotations do not reach the agent.
Inspect and mount the toolbar
Check the current project
Read project instructions, detect its package manager and look for an existing Agentation dependency and component mount. Preserve current callbacks and options.
Add the development-only component
For Next.js App Router, mount after children in the root body. Keep the root layout server-rendered; Agentation supplies its own client boundary.
Choose manual copy or live sync
Without an endpoint, feedback remains in the browser and can be copied to your assistant. For MCP sync, use the same server URL on both sides and retain any existing custom port or proxy.
A running server or successful health check is only part of setup. Create a clearly identified test annotation and confirm the exact comment and page through the MCP annotation tools before declaring live sync ready.
| コマンド | 用途と使いどころ |
|---|---|
npx -y agentation-mcp server | Start the separate MCP and HTTP feedback service when live sync is requested. |
npx agentation-mcp doctor | Run service diagnostics, then verify a real annotation. |
Reviewed setup SkillOfficial installation and integration guide
Install the setup Skill
Use the existing project package manager to install the separate agentation dependency. Keep the toolbar behind a development guard.
| コマンド | 用途と使いどころ |
|---|---|
npx skills add benjitaylor/agentation --skill agentation | Select only the setup workflow from the repository. |
使う前に
- React 18 or newer and a desktop browser; the upstream toolbar does not support mobile.
- Node.js and the project package manager. Installing this Skill does not install the toolbar package.
- Live sync additionally needs agentation-mcp, a compatible MCP client and the same reachable HTTP endpoint in the browser and agent. Manual copy does not need that server.
- The upstream code uses PolyForm Shield 1.0.0; review its license for your intended use.
対応エージェント
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
