Spacing Overlay

Measure the real gaps and padding between elements without leaving the running app.

moderate Developer Experience

What it adds

A development overlay that draws the measured padding, margins, and gaps around and between elements, annotated with their values.

What your agent is told to do

1
Measure from the rendered geometry rather than from the stylesheet, so what is drawn is what the browser actually produced after collapsing, flexing, and rounding.
2
Annotate each measurement with its value and, where the value matches an entry in the app's spacing scale, the token name — an unmatched value should read as a number alone so the discrepancy is visible.
3
Distinguish padding, margin, and container gap in the drawing, because the fix for each is different and a single undifferentiated band tells a developer nothing about where to edit.
4
Draw the overlay in a layer that ignores the pointer entirely, so hover states, tooltips, and drag interactions behave exactly as they do with the overlay off.
5
Do not implement your own grid rendering here. Typographic baselines and vertical rhythm belong to Baseline Grid Overlay, and container outlines belong to Layout Debug Mode; this feature owns measured distances between boxes and nothing else.

Edge cases it handles

Grid and flex containers distribute space through gap rather than margins, and adjacent vertical margins collapse into one — the overlay must report the resulting space once, correctly attributed, not the sum of two declarations that never both applied.
A measurement that matches the spacing scale and one that does not must be drawn differently, because finding arbitrary values is most of the reason to run the overlay at all.
Browser zoom and non-integer device pixel ratios produce fractional geometry; round for display but never round a 15px gap into a 16px token match.
The overlay must never intercept pointer events. An overlay that swallows a click makes the interface it is measuring untestable and gets switched off.
Elements that are transformed, rotated, or inside a scroll container need their measurements taken in the same coordinate space as the drawing, or the labels will float away from what they describe.
Dense layouts will overlap their own labels; suppress or defer labels below a legible size rather than stacking unreadable text.
The overlay must reposition on scroll, resize, and layout change, or it silently starts describing where things used to be.

Definition of done

Padding, margin, and gap are drawn distinctly and labelled with measured values.
Values matching the spacing scale are visually distinguished from arbitrary ones.
Collapsed margins and flex or grid gaps are reported once, attributed to the property that produced them.
The overlay intercepts no pointer events and changes no hover or focus behaviour.
Measurements stay aligned to their elements under browser zoom, scrolling, and resize.
Baseline grid and container outlining are delegated to their own features rather than duplicated here.
The feature matches the existing design system.
No existing functionality is broken.

Related features

AI Cost Budgets

Multi-Model Routing

SEO Setup

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.