laws-of-ux
Review and guide UI implementations using the 21 Laws of UX. Identifies usability issues in HTML, CSS, and JavaScript by applying established cognitive, visual, and behavioral principles. Use when reviewing UI code, building new interfaces, or auditing user experience.
52
58%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/laws-of-ux/SKILL.mdQuality
Discovery
75%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a solid description that clearly communicates its purpose and includes an explicit 'Use when' clause with reasonable triggers. Its main weakness is that the specific actions could be more concrete (e.g., listing specific UX laws or specific types of issues it identifies), and the trigger terms could cover more natural user language variations. The unique framing around '21 Laws of UX' provides excellent distinctiveness.
Suggestions
Add more specific concrete actions, e.g., 'evaluates click target sizing (Fitts's Law), cognitive load (Hick's Law), visual hierarchy, and grouping (Gestalt principles)'
Expand trigger terms to include natural variations like 'frontend review', 'web design', 'layout', 'design audit', 'interface design', or 'design principles'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI implementations, UX laws) and some actions (review, guide, identifies usability issues), but doesn't list specific concrete actions like 'check contrast ratios', 'evaluate click target sizes', or 'assess navigation patterns'. The mention of '21 Laws of UX' adds some specificity but the actions remain somewhat general. | 2 / 3 |
Completeness | Clearly answers both 'what' (review and guide UI implementations using 21 Laws of UX, identifies usability issues in HTML/CSS/JS) and 'when' (explicitly states 'Use when reviewing UI code, building new interfaces, or auditing user experience'). | 3 / 3 |
Trigger Term Quality | Includes relevant terms like 'UI', 'UX', 'HTML', 'CSS', 'JavaScript', 'usability', and 'user experience', which users might naturally say. However, it misses common variations like 'frontend', 'web design', 'layout review', 'accessibility', 'Fitts's law', 'Hick's law', or 'design patterns' that users might use. | 2 / 3 |
Distinctiveness Conflict Risk | The '21 Laws of UX' framework creates a very distinct niche. This is clearly differentiated from general code review skills, generic UI skills, or accessibility-focused skills. The specific methodology makes it unlikely to conflict with other skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill is highly actionable with excellent concrete code examples and measurable review flags, but it is severely undermined by its verbosity and monolithic structure. At 600+ lines, it wastes significant context window space explaining UX law definitions and key takeaways that Claude already knows. The content would be dramatically improved by keeping only the review checklist and review flags in the main file, with detailed examples split into referenced sub-files.
Suggestions
Remove all 'Definition' and 'Key Takeaway' sections — Claude already knows these UX laws. Keep only 'What to look for in code', examples, and 'Review flags' for each law.
Split detailed law content into separate files (e.g., COGNITIVE_LAWS.md, VISUAL_LAWS.md, BEHAVIORAL_LAWS.md) and keep only the Review Checklist table and cross-cutting concerns in SKILL.md as an overview.
Add an explicit review workflow with steps: e.g., 1) Scan with checklist table, 2) Identify top 3-5 violations, 3) Prioritize by user impact, 4) Provide specific code fixes with before/after, 5) Verify fixes don't introduce new violations.
Consolidate redundant examples — several laws (Von Restorff, Similarity, Hick's Law) use nearly identical button-styling examples that could be combined into a single 'button hierarchy' reference.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~600+ lines. Explains UX laws Claude already knows (definitions of Fitts's Law, Hick's Law, etc.). Each law includes a 'Definition' and 'Key Takeaway' that are textbook knowledge Claude possesses. The review checklist table alone would suffice for most of this content, with the detailed examples being far more concise. | 1 / 3 |
Actionability | Highly actionable with concrete HTML/CSS code examples for each law, specific review flags with measurable thresholds (e.g., '44x44px', '7 or fewer items', '<400ms'), and a clear review checklist table mapping checks to specific code patterns to look for. | 3 / 3 |
Workflow Clarity | The review checklist provides a clear scanning workflow, and the two modes (Review/Guidance) are stated. However, there's no explicit step-by-step review process with validation checkpoints — it's unclear how to prioritize findings, when to stop reviewing, or how to structure the output of a review. The cross-cutting concerns section helps but doesn't constitute a complete workflow. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with all 21 laws fully detailed inline. This content desperately needs to be split — the review checklist table could be the SKILL.md with detailed law references in separate files (e.g., COGNITIVE_LAWS.md, VISUAL_LAWS.md, BEHAVIORAL_LAWS.md). No bundle files exist to offload this content. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (980 lines); consider splitting into references/ and linking | Warning |
metadata_version | 'metadata.version' is missing | Warning |
Total | 9 / 11 Passed | |
- Repository
- RoleModel/rolemodel-skills
- Commit
4d83977
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.