Agentation Self Driving

1---2name: agentation-self-driving3description: 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.4allowed-tools: Bash(agent-browser:*)5---6 7# Agentation Self-Driving Mode8 9Autonomously 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.10 11## Launch — Always Headed12 13The browser MUST be visible. Never run headless. The user watches you scan, hover, click, and annotate.14 15**Preflight**: Verify `agent-browser` is available before anything else:16 17```bash18command -v agent-browser >/dev/null || { echo "ERROR: agent-browser not found. Install the agent-browser skill first."; exit 1; }19```20 21**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:22 23```bash24# Try to open. If it fails (stale session), close first then retry.25agent-browser --headed open <url> 2>&1 || { agent-browser close 2>/dev/null; agent-browser --headed open <url>; }26```27 28Then verify the Agentation toolbar is present and expand it:29 30```bash31# 1. Check toolbar exists on the page (data-feedback-toolbar is the root marker)32agent-browser eval "document.querySelector('[data-feedback-toolbar]') ? 'toolbar found' : 'NOT FOUND'"33# If "NOT FOUND": Agentation is not installed on this page — stop and tell the user34 35# 2. Expand ONLY if collapsed (clicking when already expanded collapses it)36agent-browser eval "document.querySelector('[data-feedback-toolbar][class*=expanded]') ? 'already expanded' : (document.querySelector('[class*=toggleContent]')?.click(), 'expanding')"37 38# 3. Verify: take a snapshot and look for toolbar controls39agent-browser snapshot -i40# If expanded: you'll see "Block page interactions" checkbox, color buttons (Purple, Blue, etc.)41# If collapsed: you'll only see the small toggle button — retry step 242```43 44"Block page interactions" must be checked (default: on).45 46> **eval quoting rule**: Always use `[class*=toggleContent]` (no quotes around the attribute value) in eval strings. Do not use double-bang in eval because bash treats it as history expansion. Do not use backslash-escaped inner quotes either, as they break unpredictably across shells.47 48## Critical: How to Create Annotations49 50**Standard element clicks (`click @ref`) do NOT trigger annotation dialogs.** The Agentation overlay intercepts pointer events at the coordinate level. Use coordinate-based mouse events — this also makes the interaction visible in the browser as the cursor moves across the page.51 52> **`@ref` compatibility**: Only `click`, `fill`, `type`, `hover`, `focus`, `check`, `select`, `drag` support `@ref` syntax. The commands `scrollintoview`, `get box`, and `eval` do NOT — they expect CSS selectors. Use `eval` with `querySelector` for scrolling and position lookup.53 54```bash55# 1. Take interactive snapshot — identify target element and build a CSS selector56agent-browser snapshot -i57# Example: snapshot shows  heading "Point at bugs." [ref=e10]58# Derive a CSS selector: 'h1', or more specific: 'h1:first-of-type'59 60# 2. Scroll the element into view via eval (NOT scrollintoview @ref — that breaks)61agent-browser eval "document.querySelector('h1').scrollIntoView({block:'center'})"62 63# 3. Get its bounding box via eval (NOT get box @ref — that also breaks)64agent-browser eval "((r) => r.x+','+r.y+','+r.width+','+r.height)(document.querySelector('h1').getBoundingClientRect())"65# Returns: "383,245,200,40"  (parse these as x,y,width,height)66 67# 4. Move cursor to element center, then click68#    centerX = x + width/2,  centerY = y + height/269agent-browser mouse move <centerX> <centerY>70agent-browser mouse down left71agent-browser mouse up left72 73# 5. Get the annotation dialog refs — read the FULL snapshot output74#    Dialog refs appear at the BOTTOM of the list, don't truncate with head/tail75agent-browser snapshot -i76# Look for: textbox "What should change?" and "Cancel" / "Add" buttons77 78# 6. Type critique — fill and click DO support @ref79agent-browser fill @<textboxRef> "Your critique here"80 81# 7. Submit (Add button enables after text is filled)82agent-browser click @<addRef>83```84 85If no dialog appears after clicking, the toolbar may have collapsed. Re-expand (only if collapsed) and retry:86 87```bash88agent-browser eval "document.querySelector('[data-feedback-toolbar][class*=expanded]') ? 'ok' : (document.querySelector('[class*=toggleContent]')?.click(), 'expanded')"89```90 91### Building CSS selectors from snapshots92 93The snapshot shows element roles, names, and refs. Map them to CSS selectors:94 95| Snapshot line | CSS selector |96|--------------|-------------|97| `heading "Point at bugs." [ref=e10]` | `h1` or `h1:first-of-type` |98| `button "npm install agentation Copy" [ref=e15]` | `button:has(code)` or by text content via eval |99| `link "Star on GitHub" [ref=e28]` | `a[href*=github]` |100| `paragraph (long text...) [ref=e20]` | Target by section: `section:nth-of-type(2) p` |101 102When in doubt, use a broader selector and verify with eval:103```bash104agent-browser eval "document.querySelector('h2').textContent"105```106 107## The Loop108 109Work top-to-bottom through the page. For each annotation:110 1111. Scroll to the target area via eval (`scrollIntoView`)1122. Pick a specific element — heading, paragraph, button, section container1133. Get its bounding box via eval (`getBoundingClientRect`)1144. Execute the coordinate-click sequence (`mouse move` → `mouse down` → `mouse up`)1155. Read the **full** snapshot output to find dialog refs at the bottom1166. Write the critique (`fill @ref`) and submit (`click @ref`)1177. Verify the annotation was added (see below)1188. Move to the next area119 120### Verifying annotations121 122After submitting each annotation, confirm the count increased:123 124```bash125agent-browser eval "document.querySelectorAll('[data-annotation-marker]').length"126# Should return the expected count (1 after first, 2 after second, etc.)127```128 129If the count didn't increase, the submission failed silently — re-snapshot and check if the dialog is still open.130 131Aim for 5-8 annotations per page unless told otherwise.132 133## What to Critique134 135| Area | What to look for |136|------|-----------------|137| **Hero / above the fold** | Headline hierarchy, CTA placement, visual grouping |138| **Navigation** | Label styling, category grouping, visual weight |139| **Demo / illustrations** | Clarity, depth, animation readability |140| **Content sections** | Spacing rhythm, callout treatments, typography hierarchy |141| **Key taglines** | Whether resonant lines get enough visual emphasis |142| **CTAs and footer** | Conversion weight, visual separation, final actions |143 144## Critique Style145 1462-3 sentences max per annotation:147 148- **Specific and actionable**: "Stack the install command below the subheading at 16px" not "fix the layout"149- **1-2 concrete alternatives**: Reference CSS values, layout patterns, or design systems150- **Name the principle**: Visual hierarchy, Gestalt grouping, whitespace, emphasis, conversion design151- **Reference comparable products**: "Like how Stripe/Linear/Vercel handles this"152 153Bad: "This section needs work"154Good: "This bullet list reads like docs, not a showcase. Use a 3-column card grid with icons — similar to Stripe's guidelines pattern. Creates visual rhythm and scannability."155 156## Install157 158The skill must be symlinked into `~/.claude/skills/` for Claude Code to discover it:159 160```bash161ln -s "$(pwd)/skills/agentation-self-driving" ~/.claude/skills/agentation-self-driving162```163 164Restart Claude Code after installing. Verify with `/agentation-self-driving` — if it loads the skill instructions, the symlink is working.165 166## Troubleshooting167 168- **"Browser not launched. Call launch first."**: Stale session from a previous run — run `agent-browser close 2>/dev/null` then retry the `--headed open` command169- **Toolbar not found on page**: Agentation isn't installed — run `/agentation` to set it up first170- **No dialog after clicking**: Toolbar collapsed — re-expand with the state-aware eval (check `[class*=expanded]` first), retry171- **Wrong element targeted**: Click Cancel, scroll to intended element, retry with correct coordinates172- **Add button stays disabled**: Text wasn't filled — re-snapshot and fill the textbox173- **Page navigated**: "Block page interactions" is off — enable via toolbar settings174- **Annotation count didn't increase**: Submission failed — dialog may still be open, re-snapshot and check175- **Interrupted mid-run (Ctrl+C)**: The browser stays open with whatever state it was in. Run `agent-browser close` to clean up before starting a new session176 177## agent-browser Pitfalls178 179These will silently break the workflow if you're not aware of them:180 181| Pitfall | What happens | Fix |182|---------|-------------|-----|183| `scrollintoview @ref` | Crashes: "Unsupported token @ref while parsing css selector" | Use `eval "document.querySelector('sel').scrollIntoView({block:'center'})"` |184| `get box @ref` | Same crash — `get box` parses refs as CSS selectors | Use `eval "((r)=>r.x+','+r.y+','+r.width+','+r.height)(document.querySelector('sel').getBoundingClientRect())"` |185| `eval` with double-bang | Bash expands double-bang as history substitution before the command runs | Use `expr !== null` or `expr ? true : false` instead |186| `eval` with backslash-escaped quotes | Escaped inner quotes break across shells | Drop the quotes: `[class*=toggleContent]` works for simple values without spaces |187| `snapshot -i \| head -50` | Annotation dialog refs (`textbox "What should change?"`, `Add`, `Cancel`) appear at the BOTTOM of the snapshot | Always read the **full** snapshot output — never truncate |188| `click @ref` on overlay elements | The click goes through to the real DOM, bypassing the Agentation overlay | Use `mouse move` → `mouse down left` → `mouse up left` for coordinate-based clicks that the overlay intercepts |189| `--headed open` fails with "Browser not launched" | Stale sessions from previous runs block new launches | Run `agent-browser close 2>/dev/null` then retry the open command |190 191**Rule of thumb**: `@ref` works for interaction commands (`click`, `fill`, `type`, `hover`). For everything else (`eval`, `get`, `scrollintoview`), use CSS selectors via `querySelector` in an eval.192 193## Two-Session Workflow (Full Self-Driving)194 195With MCP connected (toolbar shows "MCP Connected"), annotations auto-send to any listening agent. This enables:196 197- **Session 1** (this skill): Watches the page, adds critique annotations in the visible browser198- **Session 2**: Runs `agentation_watch_annotations` in a loop, receives annotations, edits code to address each one199 200The user watches Session 1 drive through the page in the browser while Session 2 fixes issues in the codebase — fully autonomous design review and implementation.