From laws-of-ux
Laws of UX knowledge base — 30 UX principles for frontend development. Use when reviewing UI code, building components, checking layout decisions, or learning about UX best practices. Triggers on: UX review, usability check, Fitts law, Hick law, Miller law, Jakob law, Gestalt, cognitive load, visual hierarchy, user experience, frontend review, layout review.
How this skill is triggered — by the user, by Claude, or both
Slash command
/laws-of-ux:ux-lawsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A collection of 30 UX laws and psychological principles that designers and developers should consider when building user interfaces. Based on https://lawsofux.com/ by Jon Yablonski.
sections/01-heuristics/_index.mdsections/01-heuristics/aesthetic-usability-effect.mdsections/01-heuristics/choice-overload.mdsections/01-heuristics/fittss-law.mdsections/01-heuristics/hicks-law.mdsections/02-cognitive/_index.mdsections/02-cognitive/chunking.mdsections/02-cognitive/cognitive-bias.mdsections/02-cognitive/cognitive-load.mdsections/02-cognitive/flow.mdsections/02-cognitive/millers-law.mdsections/02-cognitive/paradox-of-active-user.mdsections/02-cognitive/selective-attention.mdsections/02-cognitive/serial-position-effect.mdsections/02-cognitive/von-restorff-effect.mdsections/02-cognitive/working-memory.mdsections/03-gestalt/_index.mdsections/03-gestalt/law-of-common-region.mdsections/03-gestalt/law-of-pragnanz.mdsections/03-gestalt/law-of-proximity.mdA collection of 30 UX laws and psychological principles that designers and developers should consider when building user interfaces. Based on https://lawsofux.com/ by Jon Yablonski.
This skill functions as agentic RAG — the agent navigates the sections hierarchy, loading only the laws relevant to the current task.
| What you need to check | Start here |
|---|---|
| Too many options in UI (dropdowns, menus, nav) | Heuristics → Hick's Law, Choice Overload |
| Touch targets too small or poorly spaced | Heuristics → Fitts's Law |
| Response time / loading issues | Principles → Doherty Threshold |
| Too much info on screen at once | Cognitive → Miller's Law, Cognitive Load, Chunking |
| Grouping / layout / spacing problems | Gestalt → Proximity, Similarity, Common Region, Uniform Connectedness, Prägnanz |
| Users confused by unfamiliar patterns | Principles → Jakob's Law; Gestalt → Mental Model |
| Visual hierarchy / what stands out | Cognitive → Von Restorff Effect, Serial Position Effect, Selective Attention |
| Forms too long or complex | Principles → Tesler's Law, Parkinson's Law |
| User motivation / progress | Principles → Goal-Gradient Effect, Zeigarnik Effect, Peak-End Rule |
| Input handling / error tolerance | Principles → Postel's Law |
| Simplicity vs. complexity trade-off | Principles → Occam's Razor, Tesler's Law, Pareto Principle |
| Onboarding / first-time users | Cognitive → Paradox of Active User, Working Memory |
| Overall UX review | Read Code Patterns for all code-level checks |
_index.md of the target section — it lists all laws with one-line summaries.sections/05-code-patterns/ for actionable rules.When reviewing frontend code:
| # | Section | Laws | When to use |
|---|---|---|---|
| 01 | Heuristics | 4 | Decision time, target acquisition, response time, user perception |
| 02 | Cognitive | 10 | Memory limits, attention, learning, cognitive biases |
| 03 | Gestalt | 6 | Visual grouping, layout, element relationships |
| 04 | Principles | 10 | Design trade-offs, simplicity, user motivation, input handling |
| 05 | Code Patterns | — | Concrete code-level checks mapped to UX laws |
| Law | Category | One-liner |
|---|---|---|
| Aesthetic-Usability Effect | Heuristic | Beautiful design is perceived as more usable |
| Choice Overload | Heuristic | Too many options overwhelm users |
| Fitts's Law | Heuristic | Larger, closer targets are faster to acquire |
| Hick's Law | Heuristic | More choices = longer decision time |
| Chunking | Cognitive | Group info into meaningful chunks |
| Cognitive Bias | Cognitive | Systematic thinking errors affect decisions |
| Cognitive Load | Cognitive | Minimize mental effort to use interface |
| Miller's Law | Cognitive | Working memory holds 7±2 items |
| Paradox of Active User | Cognitive | Users skip manuals, learn by doing |
| Selective Attention | Cognitive | Users filter out irrelevant info |
| Serial Position Effect | Cognitive | First and last items remembered best |
| Von Restorff Effect | Cognitive | Distinctive items stand out in memory |
| Working Memory | Cognitive | Limited capacity for active info |
| Flow | Cognitive | Optimal state of focused engagement |
| Law of Common Region | Gestalt | Shared boundaries group elements |
| Law of Proximity | Gestalt | Near elements are perceived as grouped |
| Law of Prägnanz | Gestalt | We simplify complex shapes mentally |
| Law of Similarity | Gestalt | Similar elements are seen as related |
| Law of Uniform Connectedness | Gestalt | Connected elements are perceived as related |
| Mental Model | Gestalt | Users have prebuilt expectations |
| Doherty Threshold | Principle | System response < 400ms keeps flow |
| Goal-Gradient Effect | Principle | Motivation increases near the goal |
| Jakob's Law | Principle | Users expect your site to work like others |
| Occam's Razor | Principle | Simplest solution is usually best |
| Pareto Principle | Principle | 80% of effects from 20% of causes |
| Parkinson's Law | Principle | Tasks expand to fill available time |
| Peak-End Rule | Principle | Experiences judged by peak + end moments |
| Postel's Law | Principle | Accept varied input, send strict output |
| Tesler's Law | Principle | Complexity can be moved but not removed |
| Zeigarnik Effect | Principle | Incomplete tasks are remembered better |
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub forgeplan/marketplace --plugin laws-of-ux