Alignment

This skill checks a running page for things that are out of line or out of balance. It measures the rendered ink, confirms each finding in a zoomed screenshot and returns a numbered report.

Measured to the pixel, judged by eye

Lines, gaps, centres and radii are measured, never estimated. A miss of 1–4px is a finding, because it reads as a mistake while a 16px indent reads as intent. Visual weight has no number, so it is judged from the screenshot and shown as a crop.

Opening the running result belongs to verify. Comparing against a named reference belongs to match. Forcing hover, open and error states belongs to lab. Moving a fix into the shared component belongs to reuse.

1. Open the shipped render

Open the page at the viewport it ships at, with a device scale factor of 2. Check each theme and each state the user named. Reasoning from the CSS about where things should land is alignment-measure-the-render.

2. Run the measurement

Read the spacing scale from the project's tokens first. Run measure.js in the page through the browser's evaluate call, passing the scale as window.__alignmentOptions = { scale }.

It returns findings with a rule, the element, the measured values and a rectangle. Treat each as a candidate until step 3 confirms it.