# agentation

Connects in-browser clicks on rendered components directly to coding agents, formatting CSS paths, coordinates, and markdown for prompt handoffs.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 363 installs · ★ 51
- Author: akillness
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/akillness/jeo-skills/tree/HEAD/.agent-skills/agentation/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/akillness-agentation

## What it does

\`agentation` routes precise frontend feedback into an assistant's context. When you click an element in the browser, the companion toolbar bundles DOM paths, bounding boxes, and component structure instead of vague descriptions. You paste the payload directly. This keeps the review loop tight.

The workflow covers manual copy-paste snippets or live syncing through `agentation-mcp`. In sync mode, pending annotations flow directly into the coding loop. The UI package requires Node.js 18+ alongside React 18+. Repository helper scripts include `setup-agentation-mcp.sh` and `verify-loop.sh` to validate the queue.

If you need headless regression testing without visual click targets, this tool will get in the way. Disposable browser harness runners handle fresh headless checks much cleaner.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add akillness/jeo-skills --skill agentation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/agentation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/agentation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add akillness/jeo-skills --skill agentation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/agentation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add akillness/jeo-skills --skill agentation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/agentation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install akillness/jeo-skills agentation
```

2. **Manually: put the files in place**
- File: `.github/skills/agentation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add akillness/jeo-skills --skill agentation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/akillness/jeo-skills --path .agent-skills/agentation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/agentation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add akillness/jeo-skills --skill agentation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/akillness/jeo-skills/tree/HEAD/.agent-skills/agentation/SKILL.md

## When to use it
- extract CSS selectors and bounding boxes directly from browser clicks
- pipe visual UI notes into an agent via an MCP watch loop
- integrate a React development toolbar to inspect interface flaws
- review frontend component issues without manual DOM inspection

## Example prompts
- Set up the `agentation` toolbar inside our React development entrypoint
- Here is the captured UI payload from the toolbar, fix the layout alignment
- Run `scripts/verify-loop.sh` to check if the annotation watch loop is active

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [agentation · benjitaylor](https://affpapa.org/en/nevibecode/skills/agentation.md) — 13600 installs

From the same set: [akillness/jeo-skills](https://affpapa.org/en/nevibecode/by/akillness/jeo-skills.md) — 65 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md