When you tell an AI coding agent to fix “that button in the sidebar,” it has to guess. It searches your codebase for something that might match, picks a candidate, and hopes for the best. When it’s wrong, you describe it again. That loop gets old fast.

Agentation cuts it short. Add the React component to your dev environment and a floating toolbar shows up in the browser. Click any element on the page — Agentation captures the CSS selector, class names, ID, DOM hierarchy, and the React component name from the fiber tree. Add a note like “increase padding to 20px,” copy the generated Markdown, paste it into Claude Code or Cursor.

The AI gets .sidebar > button.primary and a React component path. It greps the codebase, finds the file, makes the change. No guessing.

npm install agentation -D

For Claude Code specifically, there’s a skill:

npx skills add benjitaylor/agentation

Then /agentation inside your session.

Four output formats — Compact through Forensic — let you control how much context gets included. Forensic mode throws in computed styles and bounding boxes if you need the AI to understand layout constraints.

There’s also an MCP server option (npx agentation-mcp init) that keeps annotations around across pages and sessions, useful when you’re working across multiple views.

Two known limits: iframes and shadow DOM aren’t supported due to browser security restrictions. Otherwise it’s pure frontend — no backend, no DOM modification, just event listeners and SVG overlays.

Screenshots lose the connection to code. Selectors don’t.

GitHub: benjitaylor/agentation