skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agentation

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

Updated Jul 7, 2026
Search Tags:#react#next.js#mcp#setup#annotation#agentation#toolbar
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill agentation-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentation
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/agentation
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill agentation-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agentation, agentation-mcp.

What problem does it solve? Setting up a visual feedback toolbar in a Next.js project requires manual package installation, framework detection, and correct component placement, which is repetitive and error-prone across projects. ## Core Features & Use Cases - Automated Installation: Detects the package manager from the lockfile and installs the agentation package if missing. - Framework Detection: Identifies whether the project uses the Next.js App Router or Pages Router and injects the component into the correct file (app/layout or pages/_app). - Development-Only Loading: Wraps the toolbar in a NODE_ENV check so it only renders in development. - MCP Server Guidance: Recommends setting up the agentation-mcp server so annotations sync to AI coding agents in real time. - Use Case: A developer wants to annotate UI elements in their Next.js app and have those annotations flow directly to their AI coding agent; this Skill installs the toolbar and points them to MCP setup. ## 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 app?▼

Install the agentation package, then import the Agentation component into your root layout (App Router) or _app file (Pages Router). Render it conditionally with process.env.NODE_ENV === "development" so it only appears during development.

How do I sync Agentation annotations with my AI coding agent?▼

Set up the agentation-mcp server using npx add-mcp for universal agent support, or run agentation-mcp init for Claude Code. Restart your coding agent afterward so it loads the MCP server and receives annotations automatically.

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

Does the Agentation toolbar appear in production builds?▼

No, the recommended setup wraps the component in a NODE_ENV development check, so it only renders when NODE_ENV is development and is excluded from production rendering.

What React version does Agentation require?▼

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

Related Skills

Explore More Software Engineering Skills→
oteroweboteroweb

agentation

Integrate an Agentation annotation toolbar into Next.js projects for development feedback.

Community
Intermediate
Cobalt-MoneyCobalt-Money
7

agentation

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

Official
Intermediate
ExpensifyExpensify
5.0k

playwright-app-testing

Run Playwright browser UI tests for the Expensify App.

Official
Intermediate
AX-BD-TeamAX-BD-Team

agentation

Integrate the Agentation visual feedback toolbar into Next.js projects.

Official
Intermediate