What problem does it solve? Reviewing UI work through screenshots and prose descriptions is imprecise — the human says "the button looks off" and the agent guesses which element and what to change. This Skill replaces that loop with a live CLI-to-browser bridge where the human annotates the exact DOM element and character range, and a layout-audit gate blocks declaring work done on a broken render. ## Core Features & Use Cases - Precise element annotation: The human right-clicks the offending node in a rendered HTML artifact; the bridge captures its CSS selector, an optional text range with quote, and the comment, which the agent polls and acts on. - Layout-audit gate: assertLayoutClean throws on horizontal overflow, clipped text, or overlapping text, so a broken render cannot be marked done until fixed and re-audited. - Local and portable: All state lives under .red/browser-bridge/ on the local machine; the injected SDK is inert without the bridge server, and stripBridgeSdk recovers the byte-exact original artifact. - Use Case: After generating a prototype page, open it for review, let the human annotate the exact misaligned heading, fix it, then run the layout gate to confirm no overflow or clipped text before shipping. ## Quick Start Open my generated report.html for live browser review, collect my annotations on specific elements, and verify the layout passes the audit before calling it done.
