Agent skill · software engineering · aiskillstore
agentation
Add Agentation visual feedback toolbar to a Next.js project
Why this skill is useful
Adds specific integration steps and commands for setting up the Agentation toolbar in Next.js, which the AI wouldn't reliably generate on its own.
What it needs
Requires agentation installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: For Next.js Pages Router, add to app: 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 NODEENV 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 agentationgetallpending, agentationresolve, and agentationwatchannotations Run agentation-mcp doctor to verify setup after installing
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/agentation