UI & UX

UI Laws

ui-laws-audit

Two modes, one catalogue. In design mode it maps a concept, mock, or component to the relevant Laws of UX and returns concrete without/with guidance. In audit mode it scores a page or component against every applicable law (and optional Web Interface Guidelines), with blocking/major/minor findings and file-level remediations. Each law lives in its own reference file, synced from the site's /ui-laws catalogue.

What it does

  • Loads the per-law catalogue from references/laws (synced from this site's UX laws)
  • Design mode: names applicable laws and gives priority-ordered, law-backed recommendations
  • Audit mode: marks Applicable vs N/A, then Pass / Partial / Fail with severity
  • Scores audits out of 100 with grade bands, capped when blocking failures remain
  • Returns structured reports with evidence and concrete fixes

Report shape

Excerpt of the scored audit report. Law IDs stay stable across re-runs; each law is its own file under references/laws/.

markdown
# UI Laws Audit — /contact

**Score:** 72/100 (Needs work); capped due to blocking failures
**Scope:** full · **Viewport notes:** desktop primary; mobile targets under 44px on submit

## Blocking issues
- LAW-001 · Fitts's Law · Primary submit is 28×28 on mobile · Expand hit area to ≥44px
- LAW-030 · Inline Validation · Errors only on submit · Validate on blur and clear on edit

## Recommended changes (priority order)
1. Fix blocking hit targets and inline validation
2. Add focus-visible rings on interactive controls
3. Soften choice overload in the topic select

How it flows

  1. 01Choose design, audit, or both from the request
  2. 02Read the law index, then only the law files that apply
  3. 03Design: recommend; Audit: inspect, verdict, score, and report
  4. 04Offer implement / re-audit / sync-laws next steps

Example prompt

“Design-review this settings form against the UI laws, then audit the implemented /settings page.”

Install

sh
npx dot-skills add levi-putna/twistedbrackets.com/ui-laws-audit

Installed with dot-skills, which keeps one .skills/ folder as the source of truth and links it into Claude Code, Cursor, and other agents. Learn more about dot-skills.