Enforces pixel-perfect UI alignment using a zero-tolerance verification protocol to ensure visual precision.
The Alignment Verification skill provides a rigorous framework for Claude to validate layout precision across web interfaces. By treating alignment as a binary state—where any deviation greater than 0 pixels is considered a failure—it eliminates 'close enough' results and subjective visual checks. The skill utilizes automated browser measurements to calculate exact distances between target and reference elements, ensuring that horizontal centering, edge alignment, and spacing remain consistent and professionally polished across all frontend implementations.
Key Features
01Zero-tolerance binary alignment check (Aligned vs. Not Aligned)
02Support for horizontal/vertical centering, edge matching, and equal spacing
030 GitHub stars
04Standardized ALIGNMENT_CHECK reporting for clear documentation
05Automated pixel-level measurement using Puppeteer evaluation
06Precise calculation of deviations to identify exact layout breaks
Use Cases
01Performing Design-QA to catch subtle 1-2px misalignments that manual inspection might miss
02Ensuring consistent spacing and edge alignment in complex navigation bars or chip rows
03Verifying that a modal or call-to-action is perfectly centered within the viewport
