What problem does it solve? When turning real web or app screens into content images or GIFs, highlight boxes often miss the actual element, personal data leaks into published visuals, and titles or cards get clipped outside the canvas. This Skill enforces a measurement-based workflow so annotations land exactly on the intended element and sensitive information is masked without destroying the original layout. ## Core Features & Use Cases - Measured callout placement: Measures target elements via getBoundingClientRect() on live DOM screens, or measures pixel boundaries on plain captures and converts them through render scale and offset values—no eyeballing coordinates. - Privacy masking that preserves structure: Mosaics or blurs only the personal-data region (names, addresses, phone numbers, application numbers, payment info) while keeping original cell boundaries visible instead of covering areas with gray boxes. - Full-frame visual QA: Verifies titles, cards, descriptions, and callouts all fit inside the final canvas, and checks every representative GIF frame rather than only the first one. - Use Case: You are preparing a product screenshot for a blog post showing a dashboard feature. The Skill measures the exact button position, blurs the customer names in adjacent rows, places a highlight box around only that button, and confirms the title text is not overlapped by the screenshot card before publishing. ## Quick Start Use the measured-ui-callouts skill to turn this app screenshot into a content image with the settings button highlighted and all personal information blurred.
