A
agentation
by @benjitaylorv
4.5(230)
Next.jsプロジェクトにAgentation注釈ツールバーを設定し、視覚的なフィードバック機能を提供して開発体験を向上させます。
インストール方法
npx skills add benjitaylor/agentation --skill agentationcompare_arrows
Before / After 効果比較
1 组使用前
Next.js プロジェクトに Agentation 可視化フィードバックツールバーを手動で統合するには、依存関係の確認、パッケージのインストール、および設定が必要であり、このプロセスは煩雑でエラーが発生しやすいです。
使用後
このスキルは、Agentation の依存関係を自動的に確認してインストールし、Next.js プロジェクトで Agentation 注釈ツールバーを設定する方法をユーザーに案内することで、可視化フィードバックツールの統合プロセスを簡素化します。
SKILL.md
Agentation Setup
Set up the Agentation annotation toolbar in this project.
Steps
-
Check if already installed
- Look for
agentationin package.json dependencies - If not found, run
npm install agentation(or pnpm/yarn based on lockfile)
- Look for
-
Check if already configured
- Search for
<Agentationorimport { Agentation }in src/ or app/ - If found, report that Agentation is already set up and exit
- Search for
-
Detect framework
- Next.js App Router: has
app/layout.tsxorapp/layout.js - Next.js Pages Router: has
pages/_app.tsxorpages/_app.js
- Next.js App Router: has
-
Add the component
For Next.js App Router, add to the root layout:
import { Agentation } from "agentation"; // Add inside the body, after children: {process.env.NODE_ENV === "development" && <Agentation />}For Next.js Pages Router, add to _app:
import { Agentation } from "agentation"; // Add after Component: {process.env.NODE_ENV === "development" && <Agentation />} -
Confirm component setup
- Tell the user the Agentation toolbar component is configured
-
Recommend MCP server setup
- Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
- Recommend one of the following approaches:
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
npx add-mcpand follow the prompts to addagentation-mcpas an MCP server - Claude Code only (interactive wizard):
Run
agentation-mcp initafter installing the package
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
- Tell user to restart their coding agent after MCP setup to load the server
- Explain that once configured, annotations will sync to the agent automatically
Notes
- The
NODE_ENVcheck ensures Agentation only loads in development - Agentation requires React 18
- The MCP server runs on port 4747 by default for the HTTP server
- MCP server exposes tools like
agentation_get_all_pending,agentation_resolve, andagentation_watch_annotations - Run
agentation-mcp doctorto verify setup after installing
ユーザーレビュー (0)
レビューを書く
効果
使いやすさ
ドキュメント
互換性
レビューなし
統計データ
インストール数9.4K
評価4.5 / 5.0
バージョン
更新日2026年5月23日
比較事例1 件
ユーザー評価
4.5(230)
5
23%
4
51%
3
23%
2
2%
1
0%
この Skill を評価
0.0
対応プラットフォーム
🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI
タイムライン
作成2026年3月16日
最終更新2026年5月23日