What problem does it solve? LLMs tend to subjectively judge screenshots as "aligned" and miss subtle pixel-level misalignment in UI layouts. This Skill replaces visual guesswork with objective, per-proposition Python scripts that measure alignment in pixels and produce numeric verdicts. ## Core Features & Use Cases - Proposition-driven script design: For each alignment claim (vertical centering, left-edge alignment, equal spacing), design the ROI, detection algorithm, and threshold, then implement a fresh script rather than relying on a fixed tool. - Reusable toolkit: Background masking, content profiles, run extraction with gap merging, debug overlay PNGs, and a standardized exit-code convention (0=PASS, 1=FAIL, 2=ERROR). - Reference implementations: Includes scripts for center-y alignment of a left circular icon vs. right-side elements, and left-edge x alignment of text across multiple rows. - Use Case: After a CSS change, verify that a circular avatar and the badges beside it share the same vertical center; the script reports a 6.5px offset, generates a debug overlay, and you fix it by adding items-center to the outer flex container. ## Quick Start Check this screenshot to verify whether the icon and the text rows are vertically centered, and report the exact pixel offset with a debug overlay image.
