Claude skill - Your users shouldn't need a manual
laws-of-ux is a Claude skill that checks app and website screens against ten UX laws from psychology. When something breaks a law it tells you how to fix it.
The problem
I'm not a UX designer, but I design every screen in the apps I build. I want Vamo and Vamo Host to make sense without anyone having to explain them. I also want them to look modern and polished, not just work.
From book to skill
I read Laws of UX by Jon Yablonski. It takes what psychology knows about how people use things and turns it into design rules. For example, more choices slow us down. We remember an experience by its best or worst moment and how it ended. And we expect a new app to work like the ones we already use.
Before I built anything I wrote a spec. It covered which ten laws to use and what a finding looks like. It also said what should never get flagged. Then I built the skill from that spec with a little help from Claude and Anthropic's skill-creator workflow. The main file is about 90 lines. The details live in 19 reference files that only load when a review needs them.
- Jakob
- Fitts
- Hick
- Miller
- Postel
- Peak-End
- Aesthetic-Usability
- Von Restorff
- Tesler
- Doherty
How it works
It works from code or a screenshot. When Claude is building UI it applies the laws as it goes and only mentions the trade-offs. When I ask for a review it goes through five steps.
- Scope. It lists the screens and flows to review. If it gets a whole repo it starts with the main task.
- Platform. It reads package.json or the device frame in a screenshot to figure out if it's for mobile or web or both. Then it loads only the guides it needs. An Expo app that also ships to the web gets both.
- Ten quick checks. One question per law. When a check hits it reads that law's file before writing anything down, including how the law gets misused.
- Ethics every time. Some patterns are always Blockers. Think pre-checked consent and fake urgency, or hidden costs and a cancel button you can't find. Apps that handle money get extra rules on top. So do shopping and social apps.
- Report. Every finding names where it is and which law it breaks. Then it says what's wrong and how to fix it. Findings are sorted into three levels from Blocker down to Nice to have. It also says what it checked and found fine, plus anything it couldn't verify without a real device.
The laws are reasons, not quotas. If it can't name who gets slowed down or misled, it doesn't flag it.
Example findings
The first one came from running the skill on this site before the redesign. I fixed it as part of the redesign. The second came from a test scenario.
Run on this site
src/app/contact/contact-form.tsx- Law
- Postel
- Wrong
- Send stays disabled until the reCAPTCHA box is checked. If an ad blocker stops reCAPTCHA from loading, Send never enables and nothing says why.
- Fix
- Notice when reCAPTCHA fails to load and show an email address next to Send.
Found in testing
transfer › success message- Law
- Finance (no optimistic UI on money movement) · Doherty
- Wrong
- “Money sent!” shows before the API confirms the transfer.
- Fix
- Show a pending state. Say “sent” only once the API confirms.
Testing
I tested it on five scenarios, from a React Native login screen to a SQL question it should ignore. All 33 checks passed.
The same Claude session that helped build the skill also ran those checks. So they show it does what the spec says, but they don't replace a review from someone who designs for a living.