skills.rest
SESELOVSKYDarian
SESELOVSKYDarianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agentation

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

Updated Mar 31, 2026
Search Tags:#react#next.js#mcp server#annotation#agentation#toolbar#developer feedback
One-click install
npx skills add https://github.com/SESELOVSKYDarian/Vase --skill agentation-seselovskydarian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentation
Source: https://github.com/SESELOVSKYDarian/Vase/tree/main/.agents/skills/agentation
Command: npx skills add https://github.com/SESELOVSKYDarian/Vase --skill agentation-seselovskydarian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agentation, agentation-mcp.

What problem does it solve? Setting up the Agentation annotation toolbar in a Next.js project requires manual package installation, framework detection, and component placement, which this Skill automates end to end. ## Core Features & Use Cases - Automated Installation: Detects the package manager from the lockfile and installs the agentation npm package if missing. - Framework Detection: Identifies whether the project uses Next.js App Router or Pages Router and injects the component into the correct file (app/layout or pages/_app). - 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 add visual feedback annotations to their Next.js app during development; this Skill installs the package, wires the component into the layout with a development-only guard, and explains how to connect the MCP server. ## Quick Start Set up the Agentation annotation toolbar in this Next.js project and configure it to load only in development mode.

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 npm package, 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 AI coding agents?▼

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 annotations sync 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.

Does Agentation require a specific React version?▼

Agentation requires React 18. The toolbar component is also gated behind a NODE_ENV check so it only renders in development and never ships to production builds.

How do I verify the Agentation MCP server is working?▼

Run agentation-mcp doctor after installation to verify the setup. The MCP server runs on port 4747 by default and exposes tools like agentation_get_all_pending and agentation_resolve.

Related Skills

Explore More Software Engineering Skills→
RobertJonnyTigerRobertJonnyTiger

shadcn-ui

Integrate shadcn/ui components into React projects with theming and customization.

Community
Advanced
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
SpreadWorksSpreadWorks
2

sdd-forge.flow-auto-on

Enable autoApprove to advance the SDD flow and dispatch to the next skill.

Official
Advanced