agentation-self-driving

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

Updated Jul 7, 2026
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill agentation-self-driving-singhaganesh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agentation-self-driving
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/agentation-self-driving
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill agentation-self-driving-singhaganesh

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 actionable design annotations directly to elements through the Agentation toolbar. ## Core Features & Use Cases - Autonomous page critique: Scrolls through a page top-to-bottom, targets specific elements via CSS selectors and bounding boxes, and attaches 5-8 design annotations per page. - Coordinate-based annotation: Uses mouse move/down/up events so the Agentation overlay intercepts clicks, with verification that each annotation count increases. - 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 it at a landing page and watch the browser as the agent critiques hero hierarchy, CTA placement, and spacing rhythm, while a second session applies the fixes to your codebase. ## Quick Start Ask the agent to critique this page with self-driving mode after confirming the Agentation toolbar and agent-browser are installed.

Frequently Asked Questions about agentation-self-driving

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

FAQPage Schema
How do I automatically add design annotations to a web page?

Launch a headed browser with agent-browser, expand the Agentation toolbar, then use coordinate-based mouse events to click elements and fill the annotation dialog. Standard click @ref commands do not trigger the overlay, so mouse move, down, and up sequences are required.

What is the Agentation self-driving mode for design review?

It is an autonomous critique workflow where an agent drives a visible browser, scans a page top-to-bottom, and attaches 5-8 actionable design annotations per page. A second session can watch annotations via MCP and fix the code in parallel.

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

The Agentation overlay intercepts pointer events at the coordinate level, so ref-based clicks pass through to the real DOM. Use mouse move to the element center followed by mouse down and mouse up to trigger the dialog.

Can I use scrollintoview or get box with @ref in agent-browser?

No. scrollintoview, get box, and eval do not support @ref syntax and will crash with a CSS selector parsing error. Use eval with document.querySelector and scrollIntoView or getBoundingClientRect instead.

What are the prerequisites for running the self-driving annotation workflow?

The agent-browser CLI must be installed, the target page must have the Agentation toolbar embedded, and the browser must run headed so the user can watch. For the full two-session workflow, an MCP server must be connected.