Agent skill · design visual · sickn33
design-ux
UX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI \"feels off\", \"sucks to use\", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app.
Why this skill is useful
Provides a structured heuristic evaluation framework for assessing interactive UI usability that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
design-ux — usability audit (heuristic evaluation) When to Use Use this skill when you need uX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI "feels off", "sucks to use", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app. Scores the RENDERED UI against Nielsen's 10 +... Usability ≠ aesthetics. design-system/design-spatial make it look right; this checks whether a first-timer can do the task without being told how. Use it whenever a UI "sucks to use," needs a paragraph of instructions, or before shipping anything interactive. Rule 0 — fresh eyes, on the rendered artifact (inherited from design-spatial §1) Never self-grade. The builder rationalizes its own UI. Render the live UI in its default first-load state (not a hand-arranged screenshot), capture an interaction trace of the primary task, and have a separate judge (a subagent/VLM that did NOT build it) score it. A described list of changes is not an audit — the audit is a fresh judge hunting for what's wrong on the real screen. The procedure 1. Name the primary task(s) the UI exists for (e.g. "trim a clip and set its speed, then export"). The audit is relative to these, not to abstract prettiness. 2. Render default state + trace the task. Screenshot the first-load UI (wide AND narrow — overflow gate from design-spatial §2). Then actually perform the primary task and screenshot each step. 3. Score every heuristic (table below) on the artifact: pass / violation, severity (blocker / major / minor), a specifically located finding, and a concrete fix. Separate judge does this. 4. Prioritize: blockers → majors → minors; cluster fixes that touch the same surface. 5. Fix, then RE-RENDER and RE-SCORE. Do not claim fixed without re-auditing the new artifact (verify-outputs-rule). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/design-ux