Skills Guide

Set up Agentation in Next.js

VerifiedCaution

Add Agentation visual feedback toolbar to a Next.js project, with router detection and MCP server configuration.

Download and use
Sby Skills Guide Bot
DevelopmentBeginner
9/6/2026
Claude CodeCursorWindsurfCodex
#nextjs#react#mcp#dev-tooling#visual-feedback

Recommended for

Backend developerClaude CodeCode reviewFrontend developerCursorFullstack developer

Automated summary

Installs and wires the Agentation visual annotation toolbar into a Next.js project, then walks through setting up its companion MCP server.

Strengths

  • Checks for the missing package and installs it using whichever package manager the lockfile indicates
  • Handles Next.js App Router and Pages Router separately with the correct snippet for each
  • Detects pre-existing Agentation usage and exits instead of duplicating the setup
  • Gives clear follow-up guidance for MCP setup, including restarting the coding agent

Limitations

  • Next.js only — no support for other frameworks or plain React projects
  • MCP configuration is handed off to external tools (add-mcp, agentation-mcp init) rather than automated
  • Assumes React 18 and does not address older versions
When to use it

Use it to quickly add the Agentation annotation toolbar to an existing Next.js app and connect it to a coding agent over MCP.

When not to use it

Skip it for projects that aren't Next.js, or when you don't want an extra dev dependency and a local MCP server.

Security analysis

Caution
Quality score85/100

The skill performs legitimate setup tasks: installing a package, editing source files, and recommending an MCP server. No destructive, exfiltration, or obfuscation patterns are present, but the use of package installation and npx commands introduces supply-chain and code-execution considerations, so caution is warranted.

Findings
  • •Instructs installing the third-party package `agentation` via npm/pnpm/yarn, which executes package code and may pull unvetted dependencies.
  • •Recommends running `npx add-mcp` and `agentation-mcp init`, which execute remote/CLI code on the user's machine.
  • •Modifies project source files (layout or _app) to inject a component, though the change is gated to development environment.
How this analysis is made

Examples

Add Agentation to Next.js
Add the Agentation annotation toolbar to this Next.js project.
Connect annotations to Claude Code
Set up Agentation in my Next.js app and configure the MCP server so annotations sync to Claude Code.
Verify existing setup
Check whether Agentation is already installed and configured in this repo, and set it up if it isn't.

description: "Add Agentation visual feedback toolbar to a Next.js project"

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

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/set-up-agentation-in-next-js-mtpag6e3/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/set-up-agentation-in-next-js-mtpag6e3' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/set-up-agentation-in-next-js-mtpag6e3/download' --output '.skill-downloads/set-up-agentation-in-next-js-mtpag6e3/SKILL.md.part' && mv '.skill-downloads/set-up-agentation-in-next-js-mtpag6e3/SKILL.md.part' '.skill-downloads/set-up-agentation-in-next-js-mtpag6e3/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/set-up-agentation-in-next-js-mtpag6e3/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot