skills.rest
Ech0xff
Ech0xffCOMMUNITY
Explore all skills by this author →
GitHub

agentation

Installs and configures the Agentation annotation toolbar in Next.js projects.

1|Updated Jan 24, 2026
Search Tags:#react#next.js#mcp#setup#annotation#agentation#toolbar
One-click install
npx skills add https://github.com/Ech0xff/personal-site --skill agentation-ech0xff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentation
Source: https://github.com/Ech0xff/personal-site/tree/main/.agents/skills/agentation
Command: npx skills add https://github.com/Ech0xff/personal-site --skill agentation-ech0xff

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agentation, agentation-mcp.

What problem does it solve? Setting up visual feedback tooling in a Next.js project requires manual package installation, framework detection, and correct component placement, which is repetitive and error-prone. This Skill automates the entire Agentation toolbar setup so developers can start annotating UI elements immediately. ## Core Features & Use Cases - Automated Installation: Detects whether the agentation package is already installed and installs it with the correct package manager based on the project lockfile. - Framework Detection: Identifies whether the project uses the Next.js App Router or Pages Router and injects the Agentation component into the correct file (root layout or _app). - Development-Only Loading: Wraps the component in a NODE_ENV check so the toolbar only renders in development builds. - MCP Server Guidance: Recommends setting up the agentation-mcp server so annotations sync in real time with AI coding agents like Claude Code, Cursor, and Codex. - Use Case: A developer wants to click on UI elements in their Next.js app and send annotated feedback directly to their AI coding agent. This Skill installs the toolbar, wires it into the layout, and points them to MCP setup for live annotation syncing. ## Quick Start Set up the Agentation annotation toolbar in this Next.js project and configure it to sync annotations with my AI coding agent.

Frequently Asked Questions about agentation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add the Agentation toolbar to a Next.js project?▼

Install the agentation package with your project's package manager, then import the Agentation component into your root layout (App Router) or _app file (Pages Router). Wrap it in a NODE_ENV development check so it only loads during development.

How do I sync Agentation annotations with Claude Code or Cursor?▼

Set up the agentation-mcp server so annotations sync to your AI agent in real time. Run npx add-mcp for universal setup across 9+ agents, or run agentation-mcp init for an interactive Claude Code wizard, then restart your agent.

Does Agentation work with both Next.js App Router and Pages Router?▼

Yes, Agentation supports both routers. For App Router, add the component to app/layout.tsx after children; for Pages Router, add it to pages/_app.tsx after the Component. The setup detects which router your project uses.

Does the Agentation toolbar appear in production builds?▼

No, the recommended setup wraps the component in a process.env.NODE_ENV === "development" check, so the toolbar only renders in development. It is excluded from production builds automatically.

What React version does Agentation require?▼

Agentation requires React 18 or later. The MCP server runs on port 4747 by default, and you can run agentation-mcp doctor after installation to verify the setup is working correctly.

Related Skills

Explore More Software Engineering Skills→
frinz-123frinz-123

agentation

Installs and configures the Agentation visual feedback toolbar in Next.js projects.

Community
Intermediate
Cobalt-MoneyCobalt-Money
7

agentation

Integrate the Agentation annotation toolbar into Next.js App Router and Pages Router environments.

Official
Intermediate
riftzen-bitriftzen-bit

verification-loop

Run build, type, lint, test, security, and diff validations with a structured report.

Community
Intermediate
Himanshu040604Himanshu040604

dogfood

Explore and test web applications to document bugs with screenshots and videos.

Community
Advanced