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.zip

Installs 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 project
59 charsno explicit “when” trigger
Beginner

Key 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

You give it
A Next.js project
You get back
Agentation visual feedback toolbar configured in the project

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

  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

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.

SkillInstallsUpdatedSafetyDifficulty
agentation (this skill)65moReviewBeginner
nextjs-server-side-error-debugging16moReviewIntermediate
hot-reload-optimizer06moReviewIntermediate
vite-patterns02moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry