MCPInstall

agentation

by petekpFrontend & Design

Add Agentation visual feedback toolbar to a Next.js project

Installs
46
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/petekp/claude-code-setup --skill agentation
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads agentation automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the agentation skill do?

Add Agentation visual feedback toolbar to a Next.js project

How do I install agentation?

Run npx skills add https://github.com/petekp/claude-code-setup --skill agentation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/agentation/ (personal) or .claude/skills/agentation/ (project).

Which AI agents can use agentation?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is agentation safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains agentation?

It is published by petekp in petekp/claude-code-setup. It has 46 recorded installs.

More from petekp/claude-code-setup

View all →

code-comments

petekp/claude-code-setup

Write, review, or remove code comments. Use when adding comments or doc comments, reviewing the comments in a diff, or cleaning up or removing comments.

Code Quality & Workflow606 installs

deep-research

petekp/claude-code-setup

Investigate a question that requires sustained research across sources and produce cited findings. Use for deep research requests; skip ordinary lookups and single-document reviews.

Productivity & Automation184 installs

exhaustive-systems-analysis

petekp/claude-code-setup

Open the skill to read its SKILL.md instructions.

173 installs

typography

petekp/claude-code-setup

Open the skill to read its SKILL.md instructions.

Frontend & Design152 installs

claude-code-audit

petekp/claude-code-setup

Forensic audit of the user's recent Claude Code sessions to surface step-change workflow improvements — not marginal ones. Use when the user asks to "audit my Claude Code sessions", "analyze how I use Claude Code", "find patterns in my usage", "improve my Claude Code workflow", "review my sessions", "find leverage in my setup", or wants to understand where their Claude Code setup is leaking time. Samples dozens of real transcripts, extracts quantitative signal via scripts, uses parallel subagents for deep reads, then synthesizes into a short prioritized report with drafted implementations (new skills, CLAUDE.md rules, hooks, settings diffs) that the user can install directly. Trigger even when the user doesn't say the word "audit" — if they're asking about improving or reviewing their Claude Code habits at scale, use this skill.

Security130 installs

literate-guide

petekp/claude-code-setup

Create a narrative guide to a codebase or feature in the style of Knuth's Literate Programming — code and prose interwoven as a single essay, ordered for human understanding rather than compiler needs. Use when the user asks to 'explain this codebase as a story', 'write a literate guide', 'create a narrative walkthrough', 'tell the story of this code', 'Knuth-style documentation', 'weave a guide for this feature', or when they want deep, readable documentation that treats the program as literature. Also trigger when someone wants a document that a thoughtful reader could follow from start to finish and come away understanding both WHAT the code does and WHY every design choice was made.

Code Quality & Workflow118 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs