Measured UI Callouts: Stop Guessing Where to Draw the Box

Where this fits

You ask an agent to capture a screen, highlight the search bar, blur out a customer ID, and drop in a title. It comes back with an arrow pointing at the wrong element, a gray rectangle hiding half the table, and a title clipped at the canvas edge. This skill fixes that class of failure by forcing agents to measure actual rendered coordinates (getBoundingClientRect()) instead of estimating pixel positions from memory.

Why agents benefit

• Coordinate-based highlights — Agents stop eye-balling callout boxes and instead read real DOM positions, so the box wraps exactly one element, not the empty space around it.
• Privacy masking that preserves layout — Blur or mosaic only the measured cell boundary (name, phone number, application number) instead of slapping a wide gray bar over the original structure.
• Canvas completeness validation — The skill requires a full-canvas check: title, card, footer, and callouts all inside bounds, no partial clips treated as final.
• Multi-frame GIF verification — Agents check every representative frame, not just the first, confirming highlights don't drift and masked areas stay covered throughout the animation.
• Dimension consistency — Static image and GIF share the same canvas ratio and display scale, so your docs or slide decks look coherent.

Practical scenarios

Customer support documentation

An agent collects a bug report from a user, screenshots the failing dashboard, masks the customer's patent registration number and address, and draws a callout around the broken filter dropdown. The output goes straight into a ticket response — no manual cleanup.

Product changelog visuals

Your agent captures a new billing screen, highlights the updated price toggle, and generates both a static PNG and an animated GIF showing the toggle interaction. All frames keep the callout locked to the same element with a consistent canvas size.

PR review evidence blocks

An agent verifies a UI fix across viewports, captures before/after pairs, blurs dev-only customer data, and produces side-by-side callouts. Reviewers see exactly which element changed, at measured coordinates, without digging through the code.

Add it to your agent workflow

npx skills add bam-bam-2/solo-skills --skill measured-ui-callouts

Then instruct your agent: capture the element, measure its bounding rect, apply the callout box, mask sensitive cells, render the final canvas, and confirm nothing clips. The skill's checklist (original content unchanged, no PII left, overlay matches target, title not covered) becomes your agent's quality gate before output is accepted.

Compare before adopting

Before you wire this into your pipeline, check three things: quality signals (does the skill's README define measurable acceptance criteria like coordinate accuracy and frame coverage?), maintenance freshness (recent commits, open issues, responsiveness to feedback), and alternatives (generic screenshot tools may blur or annotate, but without coordinate measurement or the specific privacy-preservation rules here). Also confirm it fits your workflow — the skill assumes browser-driven capture where getBoundingClientRect() is reachable, which may not apply to server-rendered screenshots.

Why it is worth tracking

The skill codifies a narrow, painful problem: agents producing presentation-ready UI evidence. The README's explicit verification steps act as a repeatable quality contract, which is rare among agent-skill category entries on GitHub. It has 11 stars and a clear author-maintained structure on bam-bam-2/solo-skills. Watch it if your agents regularly generate before/after visuals, docs, or bug reports — and re-evaluate when the repo adds support for non-DOM image measurement, which will broaden its usefulness significantly.