Agent skill · design visual · benjitaylor
agentation-self-driving
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.
Why this skill is useful
Adds specific commands and workflows for autonomous design critique using the Agentation toolbar that the AI wouldn't reliably generate on its own.
What it needs
Requires agent-browser installed locally. About 6k tokens when loaded. Last updated 2026-06-07. 4,319 stars on the source repository.
What this skill does
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: 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: Then verify the Agentation toolbar is present and expand it: "Block page interactions" must be checked (default: on). 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. Critical: How to Create Annotations 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. @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. If no dialog appears after clicking, the toolbar may have collapsed. Re-expand (only if collapsed) and retry: Building CSS selectors from snapshots The snapshot shows element roles, names, and refs. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills benjitaylor/agentation-self-driving