Add agent-board-design-qa skill

[drepkovsky]

What

Adds agent-board-design-qa — a skill to QA the implemented, running web UI by measuring it, not eyeballing screenshots. It is the post-implementation gate that pairs with agent-board-design-review (which reviews the mockup).

Why

Vision models downsample screenshots, so a 2px misalignment, a silently truncated label, an off-token shadow, or an off-center button vanish before the model ever sees them (frontier models score <50% on fine-grained visual perception vs ~96% for humans). The fix is to derive findings from the DOM/CSSOM where the numbers are exact, and reserve the screenshot for evidence and for the residual aesthetic.

How

• Capability contract — reuses whatever browser/preview capability the harness already exposes (Claude Code preview_*, Codex, qprobe, Playwright). No new browser infrastructure.
• HOW vs WHAT — the method/thresholds are portable (the skill); the design system (tokens, breakpoints, components) is read per-repo on the spot.
• One portable primitive — a ~70-line DOM geometry scanner (overflow, clipped content, silent truncation, collapse, sibling overlap, near-miss misalignment, tap-target, sub-16px input font), injected via the harness's eval tool.
• Layered method — geometry -> token conformance -> axe-core (contrast/a11y) -> reference pixel-diff + overlay (only when a reference image exists) -> vision-judge last, on crops, advisory only.
• A reference is just an image in — no baked-in Figma engine.

Wired into src/skills.ts (SKILL.md + AGENTS.md + router), src/skills-audit.ts (drift audit), src/workspace.ts (BUNDLED_SKILLS + materialization), and test/cli.test.ts. Installable via agent-board skills install. Source-of-truth draft lives at docs/internal/design-qa-skill.md.

Validation

• tsc --noEmit clean
• agent-board skills check — no drift
• bun test — 67/67 pass

Dogfooded

Ran the scanner on the agent-board web viewer through the Claude Code preview tools. The loop hardened the scanner against 4 issues it surfaced (124 noisy findings -> 5 real on desktop):

1. window.innerWidth can be 0 in the eval context, flagging every element as overflowing. Fixed: read document.documentElement.clientWidth + zero guard.
2. Reported every descendant of an overflowing element. Fixed: report only the outermost.
3. Descended into SVG internals (path/circle), producing false overlaps. Fixed: skip ownerSVGElement.
4. Native <select> "overflows" (it clips option text by design). Fixed: skip.

Real findings on the viewer: both picker <select>s at 36px height / 13px font, a 32px Refresh button, and a non-responsive layout (12 genuine horizontal-overflow findings at 375px, confirmed visually).

🤖 Generated with Claude Code