Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add keysjoao/laws-of-ux-skills --skill laws-of-uxgit clone --depth 1 https://github.com/keysjoao/laws-of-ux-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/keysjoao/laws-of-ux-skills/laws-of-ux)<a href="https://agentmods.dev/skills/keysjoao/laws-of-ux-skills/laws-of-ux"><img src="https://agentmods.dev/badge/skills/keysjoao/laws-of-ux-skills/laws-of-ux/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/keysjoao/laws-of-ux-skills/laws-of-ux"><img src="https://agentmods.dev/badge/skills/keysjoao/laws-of-ux-skills/laws-of-ux.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00156 | $0.01006 |
| Opus 5 | $0.00078 | $0.00503 |
| Sonnet 5 | $0.00031 | $0.00201 |
| Haiku 4.5 | $0.00016 | $0.00101 |
Grade A, and why
laws-of-ux scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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.5rembetween related fields,gap: 2rembetween sections" (Proximity) - "Primary CTA should be
min-h-11 min-w-[120px] text-base font-semibold" (Fitts's Law) - "Add
transition-all duration-200to all interactive elements" (Doherty Threshold) - "Max 5 items in this nav group — move the rest to 'More'" (Hick's Law)
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 95 lines · 156 tokens per session scan A 2fae562300f8
laws-of-ux is a skill published in the GitHub repository keysjoao/laws-of-ux-skills (3 stars, last pushed 4mo ago), licensed MIT. It adds 156 tokens to every session and 1,006 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
product-research
Find and compare current FF&E candidates from a design brief, with sourced purchasing facts and optional CSV-library save. Use to research or source products; not to match from an image or pair coordinating items.
color-palette-generator
Create an HTML color palette from a mood, description, or image, with swatches, color codes, pairings, and contrast checks. Use for color schemes or brand colors.
product-enrich
Enrich FF&E schedule rows with categories, colors, materials, and style tags. Use to tag, categorize, or fill those missing fields; not to research new products.
icon-design
Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
design-board
Full UX/UI design review panel — 6 opinionated design leaders (Jony Ive, Amir Salihefendic, Jesse Patel, Joe Gebbia, Katie Dill, Notion Designer) critique your design with brutal honesty, deliberate together, score on 5 principles, and implement fixes. Works with .pen files, HTML/CSS/JS projects, and Figma.
amir-salihefendic
Amir Salihefendic (Todoist/Doist) design critique — calm technology, daily-use sustainability, anti-bloat. Brutally honest UX/UI feedback focused on productivity and the day-500 experience. Scores on 5 principles and implements fixes.