Which alignment types does this skill support?

It supports horizontal and vertical centering, left/right edge alignment, top/bottom edge alignment, and equal spacing between multiple elements.

What does 'zero-tolerance alignment' mean?

It means that elements are only considered aligned if the measured deviation is exactly 0px. Any difference, even 1px, is reported as 'ALIGNED: NO' to ensure the highest standard of visual quality.

Why is 'close enough' alignment rejected?

Subtle misalignments, like a 2px deviation in a row of items, are often subconsciously noticeable to users and can make a UI feel unpolished. This skill removes subjectivity by requiring exact pixel proof.

How does the skill measure elements on a page?

The skill uses Puppeteer to execute scripts that retrieve exact bounding box coordinates (x, y, width, height) of DOM elements, allowing for mathematical verification of their positions.

Alignment Verification

Name: Alignment Verification
Author: adilkalam

byadilkalam

Design Tools

Enforces pixel-perfect UI alignment using a zero-tolerance verification protocol to ensure visual precision.

About

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

Zero-tolerance binary alignment check (Aligned vs. Not Aligned)
Support for horizontal/vertical centering, edge matching, and equal spacing
0 GitHub stars
Standardized ALIGNMENT_CHECK reporting for clear documentation
Automated pixel-level measurement using Puppeteer evaluation
Precise calculation of deviations to identify exact layout breaks

Use Cases

Performing Design-QA to catch subtle 1-2px misalignments that manual inspection might miss
Ensuring consistent spacing and edge alignment in complex navigation bars or chip rows
Verifying that a modal or call-to-action is perfectly centered within the viewport

About

Key Features

Zero-tolerance binary alignment check (Aligned vs. Not Aligned)
Support for horizontal/vertical centering, edge matching, and equal spacing
0 GitHub stars
Standardized ALIGNMENT_CHECK reporting for clear documentation
Automated pixel-level measurement using Puppeteer evaluation
Precise calculation of deviations to identify exact layout breaks

Use Cases

Performing Design-QA to catch subtle 1-2px misalignments that manual inspection might miss
Ensuring consistent spacing and edge alignment in complex navigation bars or chip rows
Verifying that a modal or call-to-action is perfectly centered within the viewport