Agentation
Wire the Agentation in-browser annotation toolbar into a Next.js app so you can give visual feedback that syncs to coding agents in dev.
Overview
Agentation is an agent skill for the Build phase that adds the Agentation visual feedback toolbar to a Next.js project for development-time UI annotations.
Install
npx skills add https://github.com/benjitaylor/agentation --skill agentationWhat is this skill?
- Detects existing install via package.json and skips duplicate setup
- Supports Next.js App Router (`app/layout`) and Pages Router (`pages/_app`)
- Adds dev-only `<Agentation />` gated on `NODE_ENV === "development"`
- Installs `agentation` via npm/pnpm/yarn based on lockfile
- Recommends MCP server setup for real-time annotation sync with 9+ agents (Claude Code, Cursor, Codex, Windsurf, etc.)
- MCP setup recommended for 9+ agents including Claude Code, Cursor, Codex, and Windsurf
Adoption & trust: 10k installs on skills.sh; 3.9k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are iterating on a Next.js UI but explaining visual issues in text is slow and your agent cannot see what you mean on the page.
Who is it for?
Indie builders on Next.js who want in-context visual feedback tied to AI coding agents during feature work.
Skip if: Non-Next.js stacks, production-only feature requests with no dev toolbar, or teams that will not run an MCP server for sync.
When should I use this skill?
Add Agentation visual feedback toolbar to a Next.js project.
What do I get? / Deliverables
Agentation runs in local dev with optional MCP sync so annotations reach your coding agent for faster fix loops.
- agentation dependency in package.json
- Agentation component in root layout or _app
- User guidance for optional MCP server configuration
Recommended Skills
Journey fit
Canonical shelf is Build → Frontend because the skill installs UI components and layout changes in a Next.js codebase. Frontend covers App/Pages router layout integration and dev-only toolbar placement—not backend APIs or production monitoring.
How it compares
Frontend integration skill for a visual annotation product—not a generic code review or testing framework.
Common Questions / FAQ
Who is agentation for?
Solo Next.js developers using multiple AI coding agents who want a dev toolbar to mark UI issues and optionally sync via MCP.
When should I use agentation?
During Build frontend work on a Next.js app when you need Agentation installed and configured before handing visual feedback to your agent.
Is agentation safe to install?
It adds a dev dependency and layout code; review the Security Audits panel on this Prism page and audit the `agentation` package before installing in sensitive repos.
SKILL.md
READMESKILL.md - Agentation
# 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: ```tsx import { Agentation } from "agentation"; // Add inside the body, after children: {process.env.NODE_ENV === "development" && <Agentation />} ``` For Next.js Pages Router, add to _app: ```tsx 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](https://github.com/neondatabase/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