v0.1.0 — layout checks and screenshots, no browser

The first release of layoutlint: deterministic UI layout verification for AI coding agents — and anyone else who wants layout bugs caught in milliseconds without launching a browser.

What's in v0.1.0

• layoutlint check <file> — catches overflow, overlap, viewport breakage, and text truncation across viewports (~8ms for 4 viewports). Every violation answers what, where, by how much, and a plausible fix — shaped for an agent to self-correct. --json for machines, exit 1 on violations.
• layoutlint render <file> -o card.png — a deterministic screenshot painted by the engine, not a browser: real Tailwind v4 colors (extracted from Chrome itself), text as glyph outlines from the same HarfBuzz shaping that measured it, borders, radii, clipping. Self-contained SVG or PNG.
• MCP server (layoutlint-mcp) — check_layout and render_layout tools, so agents can verify and look at UI after every edit.
• GitHub Action — uses: saifulapm/layoutlint@v0 lints the layout of changed components on every PR.
• Library — check() and render() from @saifulapm/layoutlint. Node ≥20, no browser dependency anywhere.

Why trust it

Validated against headless Chromium on every push: 297/297 layout corpus cases within 1px of getBoundingClientRect (most at 0.00px) — hand-written cases, real Tailwind v4 markup, and 200 seeded fuzz cases — and every render pixel-diffed against a Chromium screenshot (42/42 within the documented antialiasing budget). Scoreboards and methodology: docs/engineering.md.

Scope (v0)

Flexbox + Tailwind v4, static JSX/HTML. Grid approximates as a column (warned). Shadows/gradients/opacity not painted yet. Known envelope edges are documented, not hidden.

npm i -g @saifulapm/layoutlint   # global: layoutlint / layoutlint-mcp commands
npx -y @saifulapm/layoutlint check Card.tsx   # or one-shot