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 trigger scenarios. 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. Overall, it performs well on completeness and distinctiveness but has room for improvement in specificity and trigger coverage.
Suggestions
Add more specific concrete actions, e.g., 'Checks click target sizing (Fitts's Law), evaluates option complexity (Hick's Law), assesses visual grouping (Gestalt principles)'
Expand trigger terms to include natural variations like 'frontend review', 'web design', 'layout', 'accessibility', 'design patterns', 'user flow'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI implementations, UX laws) and some actions (review, guide, identify 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, identify 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', 'user interface design', or 'Hick's Law', 'Fitts's Law' which would improve matching. | 2 / 3 |
Distinctiveness Conflict Risk | The '21 Laws of UX' framework creates a very distinct niche that differentiates this from generic code review or general UI skills. The combination of UX principles with code review is specific enough to avoid conflicts with broader coding or design 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, measurable thresholds, and a useful review checklist table. However, it is severely undermined by its extreme verbosity — every UX law includes a textbook definition and key takeaway that Claude already knows, and all content is crammed into a single monolithic file. The workflow for actually conducting a review is implicit rather than explicitly sequenced.
Suggestions
Split detailed law descriptions into separate files by category (e.g., COGNITIVE_LAWS.md, VISUAL_LAWS.md, BEHAVIORAL_LAWS.md) and keep only the review checklist table and a brief workflow in SKILL.md.
Remove all 'Definition' and 'Key Takeaway' sections — Claude already knows these UX principles. Keep only 'What to look for in code', one good/bad example pair, and review flags per law.
Add an explicit review workflow with numbered steps: e.g., 1) Scan code against checklist table, 2) For each flagged issue, check detailed law section, 3) Group related findings using cross-cutting concerns, 4) Prioritize by impact, 5) Output structured findings.
Consider reducing examples to the single most illustrative good/bad pair per law, cutting total content by roughly 50%.
| 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, key takeaway, what to look for, examples, and review flags — much of which is redundant. The content could be reduced by 60-70% by removing definitions and focusing only on code-specific review flags and examples. | 1 / 3 |
Actionability | Highly actionable with concrete HTML/CSS code examples for every law, specific review flags with measurable thresholds (e.g., '44x44px', '7 or fewer items', '<400ms'), and clear good/bad comparisons. The review checklist table provides an immediately usable scanning guide. | 3 / 3 |
Workflow Clarity | The review checklist provides a clear starting point, and the overview mentions checking the checklist first then referring to detailed sections. However, there's no explicit workflow for conducting a review (e.g., step-by-step process, how to prioritize findings, how to report results). The cross-cutting concerns section helps with grouping but lacks a concrete review procedure with validation checkpoints. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with all 21 laws fully detailed inline. No content is split into separate files despite the massive length. The cross-cutting concerns and companion skill references at the end are good, but the core content desperately needs to be split — e.g., a concise SKILL.md overview with the checklist table, and separate files for each law category's detailed examples. | 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
72e8136
- 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.