alignment-verification

Alignment Verification Skill

RULE: Alignment is BINARY. In line or not. Zero tolerances.

Core Principle

Alignment verification has exactly two outcomes:

• Delta = 0px --> ALIGNED: YES
• Delta > 0px --> ALIGNED: NO (report exact deviation)

There are NO tolerances. A 2px deviation in a row of chips is visible. A 1px misalignment between form labels is noticeable. "Close enough" does not exist.

When you claim something is aligned, you MUST prove it with pixel measurements.

Mental Model

Alignment is a RELATIONSHIP between elements, not a property of a single element.

Every alignment check requires:

1. Target Element(s) - What you are checking
2. Reference Element - What you are aligning TO (parent, sibling, baseline)
3. Alignment Type - How they should relate (center, edge, spacing)
4. Container Space - For alignment to work, there must be space to align within

Example mental model:

"Button should be horizontally centered in its parent"
- Target: the button
- Reference: the parent container
- Type: horizontal center
- Container: parent must be wider than button for centering to be meaningful

Verification Protocol

Step 1: Identify What Should Align

Before measuring, explicitly state:

• Which elements are being checked
• What type of alignment is expected
• What the reference point is

Step 2: Extract Exact Pixel Values

Use Puppeteer's evaluate to get precise measurements:

// Get element bounding box via puppeteer_evaluate
puppeteer_evaluate({
  script: `
    const el = document.querySelector('[selector]');
    const box = el.getBoundingClientRect();
    JSON.stringify({ x: box.x, y: box.y, width: box.width, height: box.height });
  `
})
// Returns: { x, y, width, height }

Extract ALL values needed for your alignment type.

Step 3: Calculate Exact Deviations

Calculate with full precision. DO NOT round. DO NOT apply tolerances.

// For horizontal centering in parent
const parentBox = await page.locator('[parent]').boundingBox();
const childBox = await page.locator('[child]').boundingBox();

const parentCenter = parentBox.x + (parentBox.width / 2);
const childCenter = childBox.x + (childBox.width / 2);
const deviation = Math.abs(parentCenter - childCenter);
// Report: deviation === 0 ? "ALIGNED: YES" : `ALIGNED: NO (${deviation}px off)`