design-audit

Solid

Audit a finished frontend change by measuring rendered rects and computed styles before using screenshots as human-checkable evidence.

Web & Frontend 103 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
67
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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. ```js const painted = (el) => { const c = getComputedStyle(el); const b = el.getBoundingClientRect(); if (b.width...

Details

Author
wlsdks
Repository
wlsdks/ontology-atlas
Created
4 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category