TWISTEdBRACKETS

UI & UX

UI Laws Audit

ui-laws-audit

Reviews a UI surface against three maintainable checklists - research-backed UX laws (LAW-001…LAW-027), concise MUST/SHOULD/NEVER rules, and expanded Web Interface Guidelines - then returns a scored audit with blocking/major/minor issues and specific remediations. N/A patterns are excluded from the score. Ties directly to this site's Laws of UX documentation.

What it does

  • Loads enabled UX laws, MUST/SHOULD/NEVER rules, and guideline remediations from the skill references
  • Marks each item Applicable or N/A so absent patterns do not drag the score down
  • Assigns Pass / Partial / Fail with blocking, major, or minor severity
  • Scores out of 100 with grade bands, capped when blocking failures remain
  • Returns a structured report with evidence and concrete file-level fixes

Report shape

Excerpt of the scored audit report this skill returns. Issue IDs stay stable so you can edit the checklists and re-run.

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
- WIG-forms-2 · Missing label on email field · Associate <label> with the input

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

How it flows

  1. 01Resolve the target, scope, and viewport from the request
  2. 02Read the three reference checklists and map applicability
  3. 03Inspect the UI (code and live snapshot when available) and verdict each item
  4. 04Score, write the audit report, and offer fix / re-audit / rule-edit next steps

Example prompt

“Audit the /contact page against the UI laws and Web Interface Guidelines.”

Install

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