agentation
Automates the setup of the Agentation visual feedback toolbar for Next.js applications.
Install
mkdir -p .claude/skills/agentation && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4199" && unzip -o skill.zip -d .claude/skills/agentation && rm skill.zipInstalls to .claude/skills/agentation
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Add Agentation visual feedback toolbar to a Next.js projectKey capabilities
- →Install Agentation package
- →Detect Next.js framework (App Router or Pages Router)
- →Add Agentation component to root layout or _app
- →Configure Agentation for development environment only
- →Recommend MCP server setup for real-time annotation syncing
How it works
The skill checks for existing Agentation setup, installs the package if needed, detects the Next.js router, and injects the Agentation component into the appropriate layout file.
Inputs & outputs
When to use agentation
- →Add visual feedback toolbar to Next.js
- →Configure Agentation for debugging
- →Set up agent annotation syncing
About this skill
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
Limitations
- →Agentation requires React 18
- →The component loads only in development environment
- →Real-time annotation syncing requires separate MCP server setup
How it compares
This skill automates the setup of a visual feedback toolbar for Next.js, which would otherwise require manual dependency installation and component integration.
Compared to similar skills
agentation side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| agentation (this skill) | 6 | 5mo | Review | Beginner |
| nextjs-server-side-error-debugging | 1 | 6mo | Review | Intermediate |
| hot-reload-optimizer | 0 | 6mo | Review | Intermediate |
| vite-patterns | 0 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-server-side-error-debugging
blader
Debug getServerSideProps and getStaticProps errors in Next.js. Use when: (1) Page shows generic error but browser console is empty, (2) API routes return 500 with no details, (3) Server-side code fails silently, (4) Error only occurs on refresh not client navigation. Check terminal/server logs instead of browser for actual error messages.
hot-reload-optimizer
lichunboa
Optimizes hot module replacement and fast refresh for development speed with Vite, Next.js, and webpack configurations. Use when users request "hot reload", "HMR optimization", "fast refresh", "dev server speed", or "development performance".
vite-patterns
Fmarzochi
Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vrm-springbone-physics
Project-N-E-K-O
Debugging and fixing VRM SpringBone physics issues in three-vrm, including hair/clothing physics that flies upward, sticks out horizontally, or behaves unnaturally.
debugging-skill
bitovi
Always start a fresh browser session after any file change, walk through the full user flow, and monitor for errors before proceeding with further work.