Agentation Self Driving

# Two-Session Self-Driving Workflow

Full autonomous design review: one agent critiques, another fixes.

## Prerequisites

- Agentation toolbar installed on the target page
- MCP server running and connected (toolbar shows "MCP Connected")
- `agent-browser` skill installed

## Setup

### Terminal 1 — The Critic (this skill)

```bash
claude
> /agentation-self-driving
```

This session opens the headed browser, scans the page, and adds design annotations. The user watches the browser as the agent navigates and critiques.

### Terminal 2 — The Fixer

```bash
claude
> Watch for agentation annotations and fix each one. Use agentation_watch_annotations
> in a loop. For each annotation: read the target code, make the fix, then call
> agentation_resolve with a summary of what you changed.
```

This session blocks on `agentation_watch_annotations`, receives each annotation as it's created by Terminal 1, and edits the codebase to address the feedback.

## How It Connects

1. Critic adds annotation → auto-sent via MCP webhook
2. Fixer's `agentation_watch_annotations` unblocks with the new annotation
3. Fixer reads the annotation (element path, CSS selectors, feedback text)
4. Fixer greps the codebase using the selectors/component names
5. Fixer makes changes, then calls `agentation_resolve` with a summary
6. Fixer loops back to `agentation_watch_annotations`

## Flow Diagram

```
Browser (visible)          Terminal 1 (Critic)         Terminal 2 (Fixer)
─────────────────          ───────────────────         ──────────────────
User watches cursor    →   Scrolls, clicks elements   Blocking on watch...
Annotation dialog      →   Fills critique, clicks Add
                           Annotation auto-sends  →   Receives annotation
                                                      Reads code, makes fix
                                                      Resolves annotation
                           Moves to next element  →   Blocking on watch...
```

## Tips

- Start the Fixer session first so it's ready when annotations arrive
- The Critic can add annotations faster than the Fixer processes them — that's fine, they queue up
- If the page hot-reloads from Fixer's changes, the Critic may need to re-expand the toolbar
- Both sessions share the same MCP server via `.mcp.json` in the project


---
name: agentation-self-driving
description: Autonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to autonomously add design feedback annotations to a web page via the browser. Requires the Agentation toolbar to be installed on the target page and agent-browser skill to be available.
allowed-tools: Bash(agent-browser:*)
---

# Agentation Self-Driving Mode

Autonomously critique a web page by adding design annotations via the Agentation toolbar — in a visible headed browser so the user can watch the agent work in real time, like watching a self-driving car navigate.

## Launch — Always Headed

The browser MUST be visible. Never run headless. The user watches you scan, hover, click, and annotate.

**Preflight**: Verify `agent-browser` is available before anything else:

```bash
command -v agent-browser >/dev/null || { echo "ERROR: agent-browser not found. Install the agent-browser skill first."; exit 1; }
```

**Launch**: Try opening directly first. Only close an existing session if the open command fails with a stale session error — this avoids killing a browser someone else is using:

```bash
# Try to open. If it fails (stale session), close first then retry.
agent-browser --headed open <url> 2>&1 || { agent-browser close 2>/dev/null; agent-browser --headed open <url>; }
```

Then verify the Agentation toolbar is present and expand it:

```bash
# 1. Check toolbar exists on the page (data-feedback-toolbar is the root marker)
agent-browser eval "document.querySelector('[data-feedback-to