Agentation Skill for Claude Code: Next.js Feedback Toolbar

Makes Claude install the Agentation feedback toolbar in a Next.js project and connect it to your coding agent, for front-end developers.

Installs: 13.8K; on skills.sh
Stars: 5.2K; on GitHub
Updated: Sep 2026; last repo commit

The skill walks Claude through setting up the Agentation toolbar. It inspects your project, installs the agentation package with your lockfile's package manager, mounts the component in the root layout or _app, and, if you want live sync, registers the Agentation MCP server with your agent.

The component is wrapped in a development-only check. SKILL.md says a visible toolbar does not prove feedback reaches the agent, so Claude must create a test annotation and read it back before it calls setup done.

Good for

Next.js developers who want to point at UI and send annotations to an agent
Designers and reviewers who leave visual feedback on a running app
Developers wiring an MCP feedback loop between browser and agent

Install agentation

Claude Code

Copy this prompt.

Install the agentation skill in Claude Code. Run this command:

npx skills add https://github.com/benjitaylor/agentation --skill agentation

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Add Agentation visual feedback toolbar to a Next.js project

Sections in SKILL.md

Steps
Notes

Key facts

Author: benjitaylor
Repository: benjitaylor/agentation
Installs on skills.sh: 13,776 as of 2026-11-02
GitHub stars: 5,191 for the whole benjitaylor/agentation repo
License: PolyForm Shield 1.0.0 (README)
Last repo commit: 2026-09-22
What is inside: 1 file: SKILL.md. It bundles no scripts. It runs npm and npx commands in your project.
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass
Needs: A Next.js project with React 18 or newer
Default local server: http://localhost:4747 for MCP sync

What it includes

Detect the package manager, existing mount and MCP setup
Looks for the agentation package and an existing Agentation mount, and does not add a duplicate. It installs agentation if it is missing.
Read · 1. Inspect the project
MCP live sync or manual copy and paste
MCP mode uses the same server URL for browser and agent, default http://localhost:4747. Manual mode omits the endpoint and keeps feedback in the browser.
2. Choose the mode
Mount Agentation in app/layout or pages/_app
Renders the toolbar when NODE_ENV is development, with the endpoint set for MCP mode. It preserves existing callbacks and options.
Write · 3. Add the component
Register npx -y agentation-mcp server with your client
Options in SKILL.md are npx add-mcp, claude mcp add agentation -- npx -y agentation-mcp server, or the init wizard. A custom port must match in the server command and the component.
Runs code · 4. Configure the agent
Run the doctor and read back a test annotation
Runs npx agentation-mcp doctor, creates one clearly named test annotation in the toolbar and reads it back with agentation_get_all_pending. If something cannot be verified, Claude must say which part.
Runs code · 5. Verify the connection

From the official docs

Permissions

Medium risk

The skill runs package installs and npx commands in your project, edits your layout file and can start a local server. Review the diff and the MCP registration before you accept them.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs npx packages from the npm registry
SKILL.md uses npx -y agentation-mcp server and npx add-mcp, which download and run third-party code. Check the packages first. github.com
It edits your layout and may change agent config
Claude mounts a component in your root layout and, in MCP mode, changes your MCP client configuration. Review both changes. github.com
The MCP server uses port 4747 by default
SKILL.md uses http://localhost:4747 as the default server URL. It says to use the same URL for the agent and the component, to keep a custom port in both, and not to start a second server on a port the working server already owns. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Choose manual copy mode to avoid the MCP server.
Talks to	npm registry (package install, npx). A local HTTP server at http://localhost:4747 by default, or the URL you choose
Sign-in and keys	SKILL.md mentions no credentials.
Scopes	Installs the agentation package with your package manager Edits app/layout or pages/_app to mount the component Optionally registers an MCP server with your coding agent

Questions

What does the Agentation skill do?

It sets up the Agentation visual feedback toolbar in a Next.js project. With MCP mode on, annotations you make in the browser can reach your coding agent.

How do I install it?

Use the install box above for the skill. When you invoke it, Claude installs the agentation npm package into your project for you.

Does it install an MCP server?

Only if you ask for MCP or live agent feedback. SKILL.md says installing the toolbar alone does not install, configure or connect an MCP server. For MCP, it registers npx -y agentation-mcp server with your client.

Will the toolbar show up in production?

No. SKILL.md says the component sits behind a development check so the toolbar does not appear in production.

Does it work without MCP?

Yes. Manual copy mode leaves out the endpoint, keeps feedback in the browser and needs no running server.

Is it safe?

It runs package installs and npx commands in your project and edits your layout file. Those pull third-party code from npm, including the agentation-mcp server. Review the changes and commit them to version control before you run it.

What license is Agentation under?

The README says PolyForm Shield 1.0.0. Read it before using the package in a commercial product.

Information

updated Nov 2, 2026

Repository: benjitaylor/agentation
Folder: skills/agentation

benjitaylor/agentation skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

agentation SKILL.md · github.com
agentation README · github.com