# Laws Of Ux

> >

- **Type:** Skill
- **Install:** `agentstack add skill-keysjoao-laws-of-ux-skills-laws-of-ux`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [keysjoao](https://agentstack.voostack.com/s/keysjoao)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [keysjoao](https://github.com/keysjoao)
- **Source:** https://github.com/keysjoao/laws-of-ux-skills/tree/main/laws-of-ux

## Install

```sh
agentstack add skill-keysjoao-laws-of-ux-skills-laws-of-ux
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Laws of UX — Actionable Design Companion

Apply the 30 Laws of UX (lawsofux.com) to every frontend decision with specific, code-level guidance.

## Quick Reference

| Command | What it does |
|---------|-------------|
| `/laws-of-ux` | Analyze what's being built → recommend relevant laws + code changes |
| `/laws-of-ux review` | Full audit of existing UI → score 0-60 + prioritized fixes |
| `/laws-of-ux checklist` | Quick 12-point pre-ship pass/fail check |

## Orchestration Logic

### Route Selection

```
IF user is building new UI or frontend-design skill is active:
  → Run PROACTIVE ADVISOR mode (this skill)
IF user says "review", "audit", "check UX", or points at existing code:
  → Route to /laws-of-ux-review
IF user says "checklist", "pre-ship", "ready to ship?":
  → Route to /laws-of-ux-checklist
```

## Proactive Advisor Mode

When the user is building UI, follow this process:

### Step 1: Detect Component Type

Read the code being written. Classify as one of:
- **Form** (inputs, validation, submission)
- **Dashboard** (metrics, charts, KPIs)
- **Navigation** (sidebar, navbar, tabs, breadcrumbs)
- **Wizard/Stepper** (multi-step flow)
- **List/Table** (data display, sorting, filtering)
- **Modal/Dialog** (overlay, confirmation)
- **Card Layout** (grid of items, feed)
- **Landing/Hero** (marketing, CTA-focused)
- **Empty/Error State** (zero data, failures)
- **Settings/Config** (toggles, preferences)

### Step 2: Surface Relevant Laws

Load `references/code-patterns.md` and extract the 5-8 laws mapped to that component type.

### Step 3: Give Actionable Guidance

For each relevant law, provide:

```
**[Law Name]** — [one-line rule]
→ DO: [specific CSS/JSX pattern to implement]
→ DON'T: [common violation to avoid]
```

Keep it to 5-8 laws maximum. Don't dump all 30 — that defeats the purpose (Hick's Law applies to you too).

### Step 4: Code-Level Recommendations

Provide actual code snippets. Not theory, not vague advice. Examples:

- "Add `gap: 0.5rem` between related fields, `gap: 2rem` between sections" (Proximity)
- "Primary CTA should be `min-h-11 min-w-[120px] text-base font-semibold`" (Fitts's Law)
- "Add `transition-all duration-200` to all interactive elements" (Doherty Threshold)
- "Max 5 items in this nav group — move the rest to 'More'" (Hick's Law)

## Critical Rules

1. **Never list all 30 laws at once** — surface only what's relevant to the current component
2. **Always provide code** — if you can't write a CSS/JSX fix, the advice is too vague
3. **Violations > Suggestions** — prioritize what's wrong over what could be better
4. **Respect the user's stack** — adapt patterns to their framework (React, Vue, Tailwind, CSS modules, etc.)
5. **Don't repeat yourself** — if a law was already applied in earlier components, skip it unless there's a new violation

## Reference Files

- `references/ux-laws-complete.md` — All 30 laws with definitions, applications, and violation signals (load on-demand)
- `references/code-patterns.md` — Component-type → law mapping table (load on-demand)

## Sub-Skills

- `laws-of-ux-review` — Full UX audit with 0-60 scoring and prioritized code fixes
- `laws-of-ux-checklist` — Fast 12-point pre-ship verification with pass/fail verdict

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [keysjoao](https://github.com/keysjoao)
- **Source:** [keysjoao/laws-of-ux-skills](https://github.com/keysjoao/laws-of-ux-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-keysjoao-laws-of-ux-skills-laws-of-ux
- Seller: https://agentstack.voostack.com/s/keysjoao
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.