القائمة
Use if building or auditing UI against the 30 Laws of UX (Fitts, Hick, Gestalt, cognitive load).
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use if driving agent-browser for webpage interaction, screenshots, @ref snapshots, tabs, UI verification, CDP attach, Steel Browser, or cloud providers (Browser Use, Browserbase, Browserless, Kernel).
Use if verifying claimed-done work or auditing session/plan/branch completion with evidence.
Use if creating, redesigning, or merging a Claude skill, with research before writing SKILL.md.
Use skill if you are running repeatable Codex reviews across lenses or branches, optionally verifying and fixing confirmed findings in isolated worktrees.
Use if running deep multi-file research over 5+ entities or a market — wave-dispatched corpus.
Use if finishing a project — review and merge every branch/worktree into main, retire dead branches.
| name | audit-ux-laws |
| description | Use if building or auditing UI against the 30 Laws of UX (Fitts, Hick, Gestalt, cognitive load). |
Self-contained reference for the 30 Laws of UX (based on lawsofux.com by Jon Yablonski), tuned for an agent to find the relevant law, apply it to real code, and flag violations by severity. No live fetch — all law content is bundled in references/.
This skill does two jobs: proactive design (pick the right law while building UI) and review (audit an interface and report violations as CRITICAL / MINOR with concrete fixes). It works on UI only — components, layouts, navigation, forms, interactions, perceived performance. It is not a visual/CSS-correctness pass and it does not redesign brand or content.
The agent owns one decision: which laws are relevant to the thing in front of me? Everything downstream — the takeaway, the code pattern, the severity threshold — lives in the routed reference file. Read the router, open the one category file you need, apply it.
Trigger on phrases and contexts like:
audit-ux-and-save-files.audit-ui-and-save-files.Match what you see to a row; open only the reference file in the last column.
| What you're checking | Laws | Reference file |
|---|---|---|
| Too many options (menus, dropdowns, nav, plans) | Hick's Law, Choice Overload | references/heuristics.md |
| Touch targets too small / far apart / hard to hit | Fitts's Law | references/heuristics.md |
| Beautiful-but-is-it-usable / first-impression trust | Aesthetic-Usability Effect | references/heuristics.md |
| Too much info on screen / dense forms / long lists | Miller's Law, Cognitive Load, Chunking, Working Memory | references/cognitive.md |
| What stands out / CTA emphasis / scanning order | Von Restorff, Serial Position, Selective Attention | references/cognitive.md |
| Onboarding / first-time users skip instructions | Paradox of the Active User, Cognitive Bias, Flow | references/cognitive.md |
| Grouping / spacing / layout relationships | Proximity, Similarity, Common Region, Uniform Connectedness, Prägnanz | references/gestalt.md |
| Users confused by an unfamiliar pattern | Jakob's Law, Mental Model | references/gestalt.md (Mental Model), references/principles.md (Jakob's) |
| Response time / loading / perceived speed | Doherty Threshold | references/principles.md |
| Forms too long / complexity | Tesler's Law, Parkinson's Law, Occam's Razor, Pareto | references/principles.md |
| Input handling / error tolerance | Postel's Law | references/principles.md |
| Motivation / progress / completion / memorable ending | Goal-Gradient, Zeigarnik, Peak-End Rule | references/principles.md |
If more than one row matches, open each named file once and apply every relevant law.
Designing (proactive): read the law's Key Takeaways + Frontend Code Implications, then build to them.
Reviewing (audit): walk the law's Review Criteria, classify each violation, and report it with the fix. Severity scale:
Always connect the finding to the why (the psychological principle) and give a concrete, actionable fix — code pattern or specific change, never "improve the UX."
Each law entry ends with Related pointers (e.g. Choice Overload → Hick's Law → Doherty Threshold). Follow them only when the current law's fix creates a new question the related law answers.
| Law | Category | One-liner | Related |
|---|---|---|---|
| Aesthetic-Usability Effect | Heuristic | Beautiful design is perceived as more usable | Von Restorff, Jakob's |
| Choice Overload | Heuristic | Too many options cause decision paralysis | Hick's, Doherty |
| Fitts's Law | Heuristic | Larger, closer targets are faster to hit | Doherty, Choice Overload |
| Hick's Law | Heuristic | Decision time grows with number of choices | Choice Overload, Miller's |
| Chunking | Cognitive | Group info into meaningful units | Miller's, Cognitive Load |
| Cognitive Bias | Cognitive | Systematic thinking errors shape decisions | Selective Attention, Peak-End |
| Cognitive Load | Cognitive | Minimize mental effort to use the interface | Miller's, Tesler's |
| Miller's Law | Cognitive | Working memory holds ~7±2 items | Chunking, Working Memory |
| Working Memory | Cognitive | Don't force recall across steps/screens | Miller's, Chunking |
| Selective Attention | Cognitive | Users filter to goal-relevant stimuli | Von Restorff, Cognitive Bias |
| Serial Position Effect | Cognitive | First and last items remembered best | Von Restorff, Peak-End |
| Von Restorff Effect | Cognitive | The distinct item stands out — use for CTAs | Serial Position, Selective Attention |
| Flow | Cognitive | Balance challenge & skill; remove friction | Doherty, Goal-Gradient |
| Paradox of the Active User | Cognitive | Users skip manuals and learn by doing | Jakob's, Mental Model |
| Law of Proximity | Gestalt | Near elements are perceived as grouped | Common Region, Similarity |
| Law of Similarity | Gestalt | Similar-looking elements are seen as related | Proximity, Uniform Connectedness |
| Law of Common Region | Gestalt | A shared boundary groups elements | Proximity, Uniform Connectedness |
| Law of Uniform Connectedness | Gestalt | Visually connected elements are most related | Common Region, Similarity |
| Law of Prägnanz | Gestalt | Users read complex shapes in their simplest form | Occam's, Similarity |
| Mental Model | Gestalt | Users carry prebuilt expectations from other products | Jakob's, Paradox of Active User |
| Jakob's Law | Principle | Users expect your site to work like the others they know | Mental Model, Prägnanz |
| Doherty Threshold | Principle | Keep response <400ms to hold attention & flow | Flow, Fitts's |
| Goal-Gradient Effect | Principle | Motivation rises as the goal nears — show progress | Zeigarnik, Flow |
| Zeigarnik Effect | Principle | Incomplete tasks are remembered — use progress cues | Goal-Gradient, Peak-End |
| Peak-End Rule | Principle | Experiences are judged by their peak and ending | Serial Position, Zeigarnik |
| Postel's Law | Principle | Be liberal in what you accept, strict in what you output | Jakob's, Tesler's |
| Tesler's Law | Principle | Irreducible complexity must live in design, not the user | Cognitive Load, Occam's |
| Occam's Razor | Principle | Remove elements until you can't without breaking function | Tesler's, Prägnanz, Pareto |
| Pareto Principle | Principle | ~80% of effects come from ~20% of causes | Occam's, Tesler's |
| Parkinson's Law | Principle | Work expands to fill available time/space — constrain it | Doherty, Goal-Gradient |
Load only the file for the category you routed to in Step 1.
| File | Read when |
|---|---|
references/heuristics.md | Decision time, target acquisition, choice volume, aesthetic trust. |
references/cognitive.md | Memory limits, attention, scanning, learning, biases. |
references/gestalt.md | Visual grouping, layout relationships, shape simplification, expectations. |
references/principles.md | Trade-offs, simplicity, response time, input handling, motivation, conventions. |