登录
benjitaylor

agentation

by @benjitaylor in AI & LLM
1,189
86
# Install this skill:
npx skills add benjitaylor/agentation

Or install specific skill: npx add-skill https://github.com/benjitaylor/agentation/tree/main/skills/agentation

# Description

Add Agentation visual feedback toolbar to a Next.js project

# SKILL.md

name: agentation
description: Add Agentation visual feedback toolbar to a Next.js project

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

  1. Check if already installed
  2. Look for agentation in package.json dependencies

  3. If not found, run npm install agentation (or pnpm/yarn based on lockfile)

  4. Check if already configured

  5. Search for <Agentation or import { Agentation } in src/ or app/

  6. If found, report that Agentation is already set up and exit

  7. Detect framework

  8. Next.js App Router: has app/layout.tsx or app/layout.js

  9. Next.js Pages Router: has pages/_app.tsx or pages/_app.js

  10. Add the component

For Next.js App Router, add to the root layout:
```tsx
import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && }
```

For Next.js Pages Router, add to _app:
```tsx
import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && }
```

  1. Confirm setup
  2. Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)

Notes

  • The NODE_ENV check ensures Agentation only loads in development
  • Agentation requires React 18
  • No additional configuration needed — it works out of the box

# README.md

agentation

Agentation is an agent-agnostic visual feedback tool. Click elements on your page, add notes, and copy structured output that helps AI coding agents find the exact code you're referring to.

Install

npm install agentation -D

Usage

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}

The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.

Features

  • Click to annotate – Click any element with automatic selector identification
  • Text selection – Select text to annotate specific content
  • Multi-select – Drag to select multiple elements at once
  • Area selection – Drag to annotate any region, even empty space
  • Animation pause – Freeze CSS animations to capture specific states
  • Structured output – Copy markdown with selectors, positions, and context
  • Dark/light mode – Matches your preference or set manually
  • Zero dependencies – Pure CSS animations, no runtime libraries

How it works

Agentation captures class names, selectors, and element positions so AI agents can grep for the exact code you're referring to. Instead of describing "the blue button in the sidebar," you give the agent .sidebar > button.primary and your feedback.

Requirements

  • React 18+
  • Desktop browser (mobile not supported)

Docs

Full documentation at agentation.dev

License

© 2026 Benji Taylor
Licensed under PolyForm Shield 1.0.0

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.