agentation-self-driving

Adds autonomous design critique annotations to web pages via the Agentation toolbar in a visible browser.

1|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Ech0xff/personal-site --skill agentation-self-driving-ech0xff
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agentation-self-driving
Source: https://github.com/Ech0xff/personal-site/tree/main/.agents/skills/agentation-self-driving
Command: npx skills add https://github.com/Ech0xff/personal-site --skill agentation-self-driving-ech0xff

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Manually reviewing a web page's design and recording structured feedback is slow and disconnected from the page itself. This Skill drives a visible browser to autonomously scan a page and attach design critique annotations directly to elements through the Agentation toolbar. ## Core Features & Use Cases - Autonomous annotation loop: Scrolls through the page top-to-bottom, targets specific elements via CSS selectors and bounding boxes, and submits 5-8 critique annotations per page. - Coordinate-based interaction: Uses mouse move/down/up events so the Agentation overlay intercepts clicks, with verification that annotation counts increase after each submission. - Two-session workflow: Pairs with a second agent session that watches annotations via MCP and fixes the underlying code in real time. - Use Case: Point the agent at a local dev server page, watch it critique the hero, navigation, and CTAs in a headed browser, while a second session applies the suggested fixes to your codebase. ## Quick Start Ask the agent to run self-driving mode and critique the page at your local development URL using the Agentation toolbar.

Frequently Asked Questions about agentation-self-driving

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make an AI agent add design annotations to a web page?

Install the Agentation toolbar on the target page and the agent-browser skill, then run this skill. It opens a headed browser, expands the toolbar, and clicks elements using coordinate-based mouse events to open annotation dialogs and submit critiques.

How to automate UI design review with a browser agent?

Use the self-driving loop: snapshot the page, derive CSS selectors, scroll elements into view via eval, get bounding boxes, and click with mouse move/down/up. The agent writes 2-3 sentence critiques and submits them through the Agentation dialog.

Why does click @ref not open the Agentation annotation dialog?

The Agentation overlay intercepts pointer events at the coordinate level, so standard ref-based clicks pass through to the real DOM. Use mouse move, mouse down left, and mouse up left at the element's center coordinates instead.

Can two agent sessions critique and fix a page at the same time?

Yes. With MCP connected, annotations auto-send to a second session running agentation_watch_annotations in a loop. That session reads each annotation, edits the code, and calls agentation_resolve with a summary of the fix.

What are the limitations of agent-browser eval and scrollintoview commands?

scrollintoview and get box do not support @ref syntax and crash on it; use eval with querySelector and getBoundingClientRect instead. Also avoid double-bang and backslash-escaped quotes in eval strings, as bash history expansion breaks them.