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.
64
58%
Does it follow best practices?
Impact
Pending
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 skill description that clearly communicates its purpose and includes an explicit 'Use when' clause. 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 distinctive framing around the '21 Laws of UX' helps it stand out from generic UI review skills.
Suggestions
Add more specific concrete actions, e.g., 'Checks click target sizing (Fitts's Law), evaluates option complexity (Hick's Law), reviews visual grouping (Gestalt principles)'
Expand trigger terms to include natural variations like 'frontend review', 'web design', 'layout', 'design feedback', 'UI/UX audit'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI implementations, UX laws) and some actions (review, guide, identify usability issues), but doesn't list multiple specific concrete actions like 'audit contrast ratios, check click target sizes, evaluate navigation patterns'. The mention of '21 Laws of UX' adds some specificity but the actions themselves 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' with an explicit 'Use when' clause covering reviewing UI code, building new interfaces, or auditing user experience. | 3 / 3 |
Trigger Term Quality | Includes relevant keywords like 'UI', 'HTML', 'CSS', 'JavaScript', 'usability', 'user experience', and 'UX'. However, it misses common natural variations users might say such as 'frontend', 'web design', 'layout review', 'accessibility', 'Hick's law', 'Fitts's law', or 'design feedback'. | 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, CSS formatting 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 clear review flags for each UX law, making it genuinely useful for UI review tasks. However, it is severely over-length — embedding full definitions, takeaways, and multiple code examples for all 21 laws inline creates a massive token footprint that could be reduced by 60%+ through progressive disclosure and by removing textbook definitions Claude already knows. The workflow for conducting a review is implicit rather than explicitly sequenced.
Suggestions
Split detailed law descriptions into separate files (e.g., `laws-cognitive.md`, `laws-visual.md`, `laws-behavioral.md`) and keep only the review checklist table and a brief workflow in SKILL.md.
Remove 'Definition' and 'Key Takeaway' sections for each law — Claude already knows these UX principles. Keep only the 'What to look for in code', code examples, and review flags.
Add an explicit review workflow with steps: e.g., 1) Scan code against checklist table, 2) For flagged items, check detailed law reference, 3) Group related findings using cross-cutting concerns, 4) Output structured findings with severity and suggested fixes.
Trim redundant good/bad examples — many laws could use a single concise example pair instead of verbose ones with explanatory paragraphs.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~600+ lines. Explains well-known UX principles with full definitions that Claude already knows. Each law includes a 'Definition' and 'Key Takeaway' that are textbook explanations adding little value. The content could be reduced to the review checklist table plus code examples, cutting 60-70% of tokens. | 1 / 3 |
Actionability | Excellent actionable content with concrete, executable HTML/CSS code examples for every law. Good/bad comparisons are copy-paste ready, and specific review flags tell Claude exactly what to look for in code (e.g., 'Flag interactive elements smaller than 44x44px'). | 3 / 3 |
Workflow Clarity | The review checklist table provides a clear scanning workflow, and the two modes (Review/Guidance) are mentioned. However, there's no explicit step-by-step review process with validation checkpoints — it's unclear how to sequence the review, prioritize findings, or structure the output of a review. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with all 21 laws fully detailed inline. The review checklist, cognitive laws, visual laws, and behavioral laws with all their examples should be split into separate referenced files. The SKILL.md should be the overview/checklist with links to detailed law descriptions. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
72%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 8 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (988 lines); consider splitting into references/ and linking | Warning |
metadata_version | 'metadata.version' is missing | Warning |
metadata_field | 'metadata' should map string keys to string values | Warning |
Total | 8 / 11 Passed | |
- Repository
- RoleModel/rolemodel-skills
- Commit
097ad6b
- 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.