Built-in layout linter: the studio should catch pill collisions, margins, band intrusions and clipping itself, not rely on the human noticing

by adom

The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Every hero wears its P

Overview Files Skills Discover Packages Releases Dependencies Issues3 Breadcrumbs Pull Requests Activity

Closed general

John Lauer · 2mo ago ·closed by Colby Knox

From John, after catching the pill/vitrine collision (#17) by eye:

Hero Studio needs its own built-in layout LINTER, running automatically, so nobody has to notice these problems and prompt for them. The key insight, in John's words: most engineers are not good graphic designers, so they will not even know to call out a margin violation or a pill collision. The gate currently assumes the human brings design judgment; most humans at the gate will not, and the AI driving the pose often will not either. The studio is the only party that reliably knows the geometry, so the studio should encode the judgment.

Concretely: a linter that runs continuously (and hard-gates Generate) with measured checks, at minimum:

Pill vs vitrine overlap (#17), and pill vs any baked text.
Title-to-vitrine margin minimum (#12).
Image-zone text crossing the dynamic marquee band (#14).
Text or vitrine clipped by the hero edge, or closer to an edge than a minimum inset.
Subtitle/title contrast against whatever background actually sits behind them.
Title wrap count (a four-line title is almost never intended, this session proved it).

Surface results as checklist-style items with the same anchored spotlighting as the tour ("pill overlaps the vitrine by 42px, here"), each with a one-click auto-fix where one exists (nudge pill, shrink title, raise subtitle). Warnings a human can override; hard failures (clipped text) block Generate. That turns the gate from "hope the human notices" into "the studio notices, the human decides."

This is the umbrella for #12, #14, and #17: those are individual checks; this asks for the linter framework so the next collision does not need a new issue and a sharp-eyed founder to find it.

1 Reply

Colby Knox · 2mo ago

Shipped in 0.12.0 as the framework you asked for, with your insight quoted in the code comment: the studio is the only party that reliably knows the geometry, so it encodes the judgment. The linter runs after every render (debounced), measures real boxes, and checks: pill vs vitrine and pill vs baked text (#17), image text intruding into the dynamic marquee band with pixel measurements (#14), text clipped by the hero edge (HARD FAIL: locks Generate), text nearer than 1.5% to an edge, and 4+ line title wraps. Findings render in the gate as clickable items (click spotlights the offending element with the tour glow) and publish to state.lint so the driving AI fixes warns without being asked; hard failures lock Generate exactly like unchecked items. Not in v1, deliberately named: contrast checking (needs pixel sampling against the composed background; the framework has a place for it) and one-click auto-fixes beyond the pill scrim. Verified by reproducing your session headlessly: the 9-line title wrap, band intrusions measured in px, the pill collision, and a clip hard-fail all fired and locked Generate.