A

agentation

by @benjitaylorv
4.5(230)

Next.jsプロジェクトにAgentation注釈ツールバーを設定し、視覚的なフィードバック機能を提供して開発体験を向上させます。

ai-agentsagent-orchestrationmulti-agent-systemsai-workflowGitHub
インストール方法
npx skills add benjitaylor/agentation --skill agentation
compare_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

  1. Check if already installed

    • Look for agentation in package.json dependencies
    • If not found, run npm install agentation (or pnpm/yarn based on lockfile)
  2. Check if already configured

    • Search for <Agentation or import { Agentation } in src/ or app/
    • If found, report that Agentation is already set up and exit
  3. Detect framework

    • Next.js App Router: has app/layout.tsx or app/layout.js
    • Next.js Pages Router: has pages/_app.tsx or pages/_app.js
  4. 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 />}
    
  5. Confirm component setup

    • Tell the user the Agentation toolbar component is configured
  6. 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-mcp and follow the prompts to add agentation-mcp as an MCP server
      • Claude Code only (interactive wizard): Run agentation-mcp init after installing the package
    • 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_ENV check 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, and agentation_watch_annotations
  • Run agentation-mcp doctor to 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日