UX Expert

Indexes 30 Laws of UX from lawsofux.com and proactively advises during UI/UX development. Searches the law index below, reads relevant law files, follows relationship links when warranted, and fetches external resources for deeper context.

When to Activate

Trigger this skill when:

Creating or modifying UI components, pages, or layouts
Adding options, choices, dropdowns, menus, or navigation items
Changing layouts, spacing, visual grouping, or element positioning
Modifying navigation flows, forms, or interactive elements
Reviewing or discussing UI/UX design decisions
Working on response time, loading states, or perceived performance
Handling touch targets, click areas, or element sizing
Any user-facing interface work where UX quality matters

Law Index

Decision & Choice

Choice Overload (
```
choice-overload.md
```
) — Users get overwhelmed with too many options; reduce, categorize, or add filtering
Hick's Law (
```
hicks-law.md
```
) — Decision time increases with number and complexity of choices; minimize options when speed matters
Tesler's Law (
```
teslers-law.md
```
) — Every system has irreducible complexity; absorb it in design so users don't have to
Postel's Law (
```
postels-law.md
```
) — Be liberal in what you accept from users, conservative in what you output

Cognitive Capacity

Cognitive Load (
```
cognitive-load.md
```
) — Total mental resources needed to use an interface; minimize extraneous load
Miller's Law (
```
millers-law.md
```
) — Working memory holds ~7 (plus/minus 2) items; chunk information into groups
Chunking (
```
chunking.md
```
) — Break information into meaningful groups to aid comprehension and recall
Working Memory (
```
working-memory.md
```
) — Temporary cognitive storage for active tasks; don't force users to remember across steps
Selective Attention (
```
selective-attention.md
```
) — Users focus on goal-relevant stimuli and miss the rest; design for what matters

Visual Organization (Gestalt)

Law of Proximity (
```
law-of-proximity.md
```
) — Near elements are perceived as grouped; use spacing to signal relationships
Law of Similarity (
```
law-of-similarity.md
```
) — Similar-looking elements are perceived as related; use consistent styling for groups
Law of Common Region (
```
law-of-common-region.md
```
) — Elements sharing a bounded area are perceived as grouped
Law of Uniform Connectedness (
```
law-of-uniform-connectedness.md
```
) — Visually connected elements are perceived as more related
Law of Pragnanz (
```
law-of-pragnanz.md
```
) — Users interpret complex visuals in the simplest form possible; favor clarity

Memory & Perception

Serial Position Effect (
```
serial-position-effect.md
```
) — Users best remember first and last items in a series; place key actions there
Von Restorff Effect (
```
von-restorff-effect.md
```
) — The distinct item among similar ones is most remembered; use for CTAs
Peak-End Rule (
```
peak-end-rule.md
```
) — Experiences are judged by their peak moment and ending, not the average
Zeigarnik Effect (
```
zeigarnik-effect.md
```
) — Incomplete tasks are remembered better; use progress indicators to drive completion
Cognitive Bias (
```
cognitive-bias.md
```
) — Systematic thinking errors that shape perception and decisions

Engagement & Motivation

Flow (
```
flow.md
```
) — State of deep immersion; balance challenge and skill, remove friction
Goal-Gradient Effect (
```
goal-gradient-effect.md
```
) — Effort increases as users approach a goal; show progress to motivate
Paradox of the Active User (
```
paradox-of-the-active-user.md
```
) — Users skip instructions and learn by doing; design for exploration
Parkinson's Law (
```
parkinsons-law.md
```
) — Tasks expand to fill available time; use constraints and deadlines

Design Principles

Jakob's Law (
```
jakobs-law.md
```
) — Users expect your site to work like others they know; leverage existing mental models
Aesthetic-Usability Effect (
```
aesthetic-usability-effect.md
```
) — Beautiful interfaces are perceived as more usable and forgive minor issues
Doherty Threshold (
```
doherty-threshold.md
```
) — Keep response times under 400ms to maintain user engagement and flow
Fitts's Law (
```
fittss-law.md
```
) — Target acquisition time depends on distance and size; make key elements large and close
Mental Model (
```
mental-model.md
```
) — Users' internal representation of how a system works; align design with expectations
Occam's Razor (
```
occams-razor.md
```
) — Prefer the simplest solution that meets requirements; remove unnecessary elements
Pareto Principle (
```
pareto-principle.md
```
) — ~80% of effects come from ~20% of causes; focus effort on high-impact elements

Slug notes: Fitts's Law =
fittss-law.md
, Hick's Law =
hicks-law.md
, Jakob's Law =
jakobs-law.md
, Miller's Law =
millers-law.md
, Tesler's Law =
teslers-law.md
, Postel's Law =
postels-law.md
, Law of Pragnanz =
law-of-pragnanz.md

Search & Retrieval Process

Extract context keywords from the current UI/UX work (component type, interaction pattern, design concern)
Scan the law index above — match keywords, categories, and descriptions to the task
Read 1-3 most relevant law files from
```
references/laws/
```
Check the
```
## Related
```
section of each law read
Decide whether to read related laws (see traversal rules below)
When a law's
```
## Further Reading
```
links are directly relevant, fetch them for deeper context (see deep dive rules below)
Synthesize findings into actionable, specific advice

Relationship Traversal — When to Read Deeper

After reading a primary law, examine its

## Related

section. Related laws use format

[Law Name](/slug/)

— map the slug to

references/laws/{slug}.md

Read a related law when:

The related law's topic directly applies to the current UI context
The primary law's takeaways reference concepts covered by the related law
The user's change touches multiple UX dimensions that span both laws

Skip a related law when:

It covers a UX dimension not relevant to the current task
The primary law already provides sufficient guidance
Reading more would delay actionable advice without adding value

Limits: Max 1 level of related-law traversal (never follow related-of-related). Max 4-5 total laws read per context (primary + related).

Deep Dive — When to Fetch Further Reading

Each law file has a

## Further Reading

section with external links (Nielsen Norman Group, Smashing Magazine, etc.). These contain detailed research, examples, and case studies.

Fetch a Further Reading link when:

The user is making a significant design decision and needs evidence-based justification
The law's key takeaways alone are insufficient — the user needs implementation specifics or real-world examples
Multiple laws conflict or create tension and external context would help resolve the tradeoff
The user explicitly asks for deeper rationale or research backing

Skip fetching when:

The key takeaways in the law file are sufficient for the advice needed
The task is a minor UI tweak where general guidance is enough
Fetching would slow down time-sensitive advice without meaningful benefit

Limits: Max 2-3 external fetches per context. Prefer Nielsen Norman Group and Interaction Design Foundation links (highest signal-to-noise).

Output Format

Lead with the specific recommendation: what to do or what to change
Name the supporting law(s) — e.g., "Hick's Law suggests..."
Quote the most relevant key takeaway(s) from the law file
If multiple laws converge, note the pattern: "Both Hick's Law and Choice Overload point to..."
If a Further Reading source was fetched, briefly cite the key insight from it
Keep it concise: 3-6 sentences, not an essay
Only advise when a law is clearly relevant or being violated — never force-fit

ux-expert

NPX Install

Tags

SKILL.md Content