agentation

1
3
Source

Add Agentation visual feedback toolbar to a Next.js project

Install

mkdir -p .claude/skills/agentation && curl -L -o skill.zip "https://mcp.directory/api/skills/download/4199" && unzip -o skill.zip -d .claude/skills/agentation && rm skill.zip

Installs to .claude/skills/agentation

About this skill

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

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

643969

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

591705

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

318398

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

339397

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

451339

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

304231

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.