Mesurer Solid: UI Measurement for Humans and Coding Agents

Mesurer Solid is my Solid 2 port and extension of Mesurer. It adds an isolated inspection layer to real browser applications without requiring the host app to use Solid. The layer connects rendered UI measurements, human feedback, and coding-agent workflows.

What it does

• Measures rendered geometry, spacing, typography, layout, overflow, and computed styles.
• Provides selection, rulers, guides, distances, X-ray, text inspection, color picking, settings, history, and persistence.
• Captures human intent through element annotations or arbitrary visual regions.
• Exposes JSON-safe context, feedback, inspection, and review APIs through window.__MESURER__.
• Supports runtime extensions with tools, commands, overlays, settings, state, and disposal.
• Runs through a browser extension or a transport-neutral injection script, so the outer browser harness stays in control of navigation, screenshots, and interaction.

A rendered-evidence workflow

Mesurer treats the rendered page as the source of truth. Source code can say that a gap is 16 pixels or that two edges align. Fonts, intrinsic sizing, transforms, breakpoints, and neighboring elements can change the result. Mesurer makes each claim inspectable:

annotation → rendered context → source edit → stable page
  → review / feedback → measurements and screenshots → iterate

Tests cover complex pages, stacking contexts, browser top-layer UI, strict Trusted Types pages, and Electron renderers. The current beta includes a removable context plugin, deterministic revalidation, screenshot planning, and a portable agent skill.

Mesurer handles measurement and annotation. The surrounding harness owns tabs, authentication, navigation, screenshots, and source changes.

Read the Mesurer Solid source code for the implementation, examples, extension, and agent integration docs.