design-ux
Evaluates the usability of interactive interfaces. Helps your agent identify usage problems and ensure an application is easy to use.
What it does
This tool helps check if a computer program or app is easy to use. It analyzes if a new user can complete the main tasks without needing lots of instructions.
When to use it
- ✓When a program feels confusing or hard to use.
- ✓Before releasing a new app or interactive tool.
- ✓If the program requires many explanations to be used.
Example of what to ask your AI
“Analyze the usability of this interface for the task 'edit a video and export it'.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool simulates a new user trying the program for the first time. It checks if buttons and functions are clear and if actions can be easily undone.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill design-uxOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/design-ux/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
- 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.
- 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.
- 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.
- Prioritize: blockers → majors → minors; cluster fixes that touch the same surface.
- Fix, then RE-RENDER and RE-SCORE. Do not claim fixed without re-auditing the new artifact (verify-outputs-rule).
Heuristics — score each (Nielsen's 10, 1994) + interaction add-ons
| # | Heuristic (Nielsen) | What to check in THIS UI |
|---|---|---|
| 1 | Visibility of system status | Every action has visible feedback; current state/selection/mode always legible; progress for slow ops. |
| 2 | Match the real world | Known metaphors & conventions (e.g. NLE: clips, trim handles, playhead) — not bespoke gestures users must learn. |
| 3 | User control & freedom | Undo/redo, cancel, clear exits from any state; reversible by default. |
| 4 | Consistency & standards | Same thing looks/behaves the same; platform conventions (⌘Z, Delete, drag-to-move) honored. |
| 5 | Error prevention | Invalid states made impossible; destructive actions confirmed or trivially undoable. |
| 6 | Recognition over recall | Options/affordances visible — no memorizing. An instruction wall is a failure of this heuristic: if you must explain scroll-to-zoom / drag-edge / double-click in prose, the affordance is missing. |
| 7 | Flexibility & efficiency | Defaults carry novices; shortcuts/accelerators for experts; sensible first-run with nothing configured. |
| 8 | Aesthetic & minimalist | Signal over chrome; no irrelevant elements competing; the primary surface carries the most visual weight. |
| 9 | Recognize/diagnose/recover from errors | Plain-language errors (not raw stderr), and a path out. |
| 10 | Help & documentation | Rarely needed if 1–9 hold; task-oriented, in-context, not a top-of-page lecture. |
Interaction add-ons (compose, don't restate):
- Don't-make-me-think (Krug): affordances self-evident; the UI teaches itself. Instruction paragraph ⇒ affordance debt (ties to #6).
- Fitts / transit time (design-spatial §3): controls sit near where the task leaves the cursor. A selected object's properties belong adjacent to the object (dock/popover), not in a far panel — every edit shouldn't be a round-trip.
- Discoverability of gestures: any non-obvious gesture (wheel, edge-drag, dbl-click) needs a visible affordance (handle, hover cue, icon) or it doesn't exist for most users.
- Visual-weight match (design-spatial): the surface the user operates (timeline, canvas, editor) should be the visual hero — not a thin strip under a big passive preview.
- Progressive disclosure (design-thinking UX): essentials first; advanced on demand. But disclosure ≠ hiding the primary tool.
…
FAQ
What's the difference between 'design-ux' and 'design-spatial'?
'design-spatial' helps set up the look and layout, while 'design-ux' focuses on ensuring the program is truly easy to use and understand.
What are 'heuristics'?
They are general design principles that help ensure usability, like 'visibility of system status' (the program tells you what it's doing) and 'user control' (the user can undo actions).
What is a 'heuristic evaluation'?
It's the process of analyzing an interface using a set of principles (heuristics) to find usability problems.
Details
Original description by the author
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.
Popularity
- GitHub stars
- 48k
- Ranking position
- #2820
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC