ontology-atlas: Skill for Claude Code

Measure a finished UI change

People and models localize small spacing, alignment, and overlap defects poorly by sight. An unlocalized feeling cannot become a reliable fix, while imagined defects damage healthy code. The fixed order is: measure → list violations → attach screenshots as evidence.

Run only when pnpm design:route includes design-audit. Audit its returned scope: one affected state for a local change, affected map state for topology, or the full surface for a structural change. Copy-only, pure logic, motion-only, and topology-gesture-only work use their own routed proof.

0. Fix the state

Use a fixed viewport and dataset, wait for fonts and one explicit ready element, move the pointer off interactive targets, and use reduced motion for a static audit. Do not use networkidle as the default readiness signal; hydration can still be incomplete.

Add ?guides=off. Closing a first-run guide manually changes focus and adds its own motion. Use ?guides=reset only when auditing the guide. Playwright may call the shared seedFirstRunSeen(page) helper.

1. Overlap and reachability

Filter to painted elements

A non-zero rect does not mean the element is painted. Children inside a closed <details> retain visible styles and a healthy rect while absent from the screen. The first audit without this filter produced three false findings.

const painted = (el) => {
  const c = getComputedStyle(el);
  const b = el.getBoundingClientRect();
  if (b.width < 1 || b.height < 1) return false;
  if (c.visibility === 'hidden' || c.display === 'none' || Number(c.opacity) < 0.05) return false;
  if (el.closest('details:not([open])')) return false;
  for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
    const nc = getComputedStyle(n);
    const r = n.getBoundingClientRect();
    if (nc.overflow !== 'visible' && (b.bottom < r.top || b.top > r.bottom)) return false;
    if (nc.contentVisibility === 'hidden' || n.hasAttribute('inert')) return false;
  }
  return b.top < innerHeight && b.bottom > 0 && b.left < innerWidth && b.right > 0;
};