How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/raphaelsalaja/skills --skill alignmentBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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. Rendering every width belongs to viewports.
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.
3. Check the lines
Crop each candidate from the 2x screenshot and count the pixels. Drop any finding the pixels do not show.
Text, icons and controls that start a column share one x. A title 2px right of its description is alignment-shared-edge.
Repeated siblings sit at one gap. A list spaced 8, 8 then 12px is alignment-even-gaps. A deliberate group break is at least twice the gap.
Every padding, gap and margin is a step on the project's scale. A 6px padding on a 4px scale is alignment-on-scale.
4. Check the centres
Text in a control centres on its cap height and baseline, not its line box. Ink sitting 2px low in a button is alignment-ink-centre. Trim the box with text-box: trim-both cap alphabetic or balance the padding.
An icon beside a label centres on the label's cap height. An icon centred on the line box and sitting 1px low is alignment-icon-with-label.
Play icons, arrows and triangles carry their weight on one side. A play icon centred by its box that looks shifted left is alignment-optical-glyph. Nudge it and name the value, such as --play-nudge: 1px.
A nested surface's radius is the outer radius minus the inset. A 16px panel inside a 16px card at 8px inset is alignment-concentric-radius, and it takes 8px.
5. Judge the weight
Look at the screenshot at 1x and name what the eye lands on first. Compare icon strokes with the text's stem weight, filled icons beside outline icons and circles drawn the same size as squares.
Circles and triangles need roughly 10% more size than a square to read as equal. A 2px icon stroke beside 1.5px text stems is alignment-visual-weight.
6. Report with proof
Copy report.html to .alignment/<page>/index.html, an ignored folder and never the source tree. Save the 2x screenshot beside it and write report.js in the shape its header comment shows, then open it.
The report draws the numbered outlines and cuts each zoomed crop from that screenshot, so write data only. A report with its own markup or crops cut by hand is alignment-shipped-report. A finding with no measurement and no rect is alignment-annotated-proof.
7. Fix only when asked
The report is the deliverable. When the user asks for fixes, change the token or primitive behind each finding. Rerun the script and the screenshot, then report what cleared.
The pair
Every check is a pair. The broken line sits beside the line that replaces it.
| Rule | Broken | Replacement |
|---|---|---|
alignment-measure-the-render | "The flex container centres it" | Measured in the running page at 2x |
alignment-shared-edge | Title inset 2px from its description | Both start on one ink line |
alignment-even-gaps | Rows at 8, 8 and 12px | Rows at 8, 8 and 8px |
alignment-on-scale | padding: 6px on a 4px scale | padding: 8px |
alignment-ink-centre | Label ink 2px low in its button | text-box: trim-both cap alphabetic |
alignment-icon-with-label | Icon centred on the line box | Icon centred on the cap height |
alignment-optical-glyph | Play icon centred by its box | Play icon nudged 1px right, named |
alignment-concentric-radius | 16px panel in a 16px card at 8px inset | 8px panel radius |
alignment-visual-weight | 2px icon stroke beside 1.5px stems | Stroke matched to the text weight |
alignment-annotated-proof | "The button looks a bit off" | Finding 3, 1.8px low, with the crop |
alignment-shipped-report | Crops cut by hand into a page written from scratch | report.html copied, only report.js written |
Reporting
Severity. HIGH is a miss visible at 1x on a primary surface, such as a heading column or a primary button. MEDIUM is a 1–2px miss, uneven gaps, a radius mismatch, a weight imbalance or a hand-built report. LOW is an off-scale value that still renders aligned.
Format. One finding per root cause, numbered to match the overlay:
1. file:line - [rule-id] what is wrong (measured values)Cite the element from the script when the source line is not found. Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Mark canvas, image and cross-origin content as Not verified.
