ux-design-patterns

Read before adding or changing any front/ UI element - a control, layout, button, or interaction pattern. Covers the don't-invent-new-UX-without-a-PRD rule and the priority order for design tradeoffs (existing behavior > intuitiveness > information density > usability > utility > uniqueness > industry practices > generic UI).

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/ux-design-patterns/SKILL.md

Quality

Content

85%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, actionable instruction skill: a clear reuse-before-invent principle, a concrete priority order, and a sequenced checklist with a visual-verification checkpoint and real grep examples. The only slack is mild verbosity in the rationale paragraph and anecdote, plus heuristic (rather than executable) decision guidance.

Suggestions

Trim the meta paragraph ('This list exists to end debates quickly...') and condense the pager anecdote to its essential lesson to tighten conciseness toward 5.

Pair the priority-order decision guidance with one concrete worked example of applying the order to a real tradeoff, to push actionability past heuristic-only instruction.

Consider extracting the detailed pager case study into a short reference file and linking it one level deep, which would keep SKILL.md leaner while preserving the example.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean and assumes Claude's competence, but the meta paragraph ('This list exists to end debates quickly... meant to be fast, not a detour') and the lengthy pager anecdote are minor over-explanation that could be trimmed, so it sits just below the lean 5 anchor.	4 / 5
Actionability	Provides concrete copy-paste guidance (grep -rn "pagination\|paginate_button" front/, named patterns like dataTables_wrapper, specific paths like front/css/dark-patch.css) and a 5-step checklist, but the core decision guidance ('design using the priority order') is heuristic rather than executable, leaving minor gaps below the 5 anchor.	4 / 5
Workflow Clarity	The practical checklist is a clearly sequenced 5-step process (grep, reuse, check PRD, design+record, verify) with an explicit validation checkpoint ('Verify visually in a real browser/devcontainer before calling it done'), which for a simple single-purpose skill meets the top anchor.	5 / 5
Progressive Disclosure	The skill is under 50 lines, has no bundle files and no need for external references, and is well-organized into three clear sections (Core principle, Priority order, Practical checklist), matching the simple-skill exception for a top score.	5 / 5
	Total	18 / 20 Passed

Description

75%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific, distinct, and gives explicit trigger guidance ('Read before adding or changing any front/ UI element'), with concrete element types and a signature priority-order rule. It is solid across all dimensions but stops short of the top anchor on completeness and trigger coverage due to the absence of a dedicated 'Use when...' clause and synonym breadth.

Suggestions

Add an explicit 'Use when...' clause with concrete trigger phrases (e.g., 'Use when adding or changing a button, control, form, modal, table, or layout in front/') to lift completeness toward 5.

Broaden trigger-term coverage with synonyms users naturally say ('form', 'modal', 'component', 'filter input', 'badge') alongside 'control' and 'interaction pattern'.

Tighten the action list beyond 'adding or changing' to name discrete operations (e.g., 'reusing existing front/ markup and CSS classes, resolving design tradeoffs, deciding when to introduce new UX') for stronger specificity.

Dimension	Reasoning	Score
Specificity	Names the front/UI domain and several concrete element types ('a control, layout, button, or interaction pattern'), but the action set is essentially 'add/change' across types rather than a comprehensive list of distinct operations, so it sits below the 5 anchor.	4 / 5
Completeness	Provides a clear 'what' (reuse-before-invent rule plus tradeoff priority order) and an explicit 'when' ('Read before adding or changing any front/ UI element'), but lacks a standalone 'Use when...' clause with concrete trigger phrases, so it does not reach 5.	4 / 5
Trigger Term Quality	Includes natural terms users would say ('UI element', 'control', 'layout', 'button', 'interaction pattern'), but misses common synonyms like 'form'/'modal'/'component' and any file types, placing it below the comprehensive 5 anchor.	4 / 5
Distinctiveness Conflict Risk	Carves a clear niche via the don't-invent-UX-without-a-PRD rule and the explicit priority order, with distinct UI-element triggers, but could still overlap a generic frontend skill, keeping it just below the minimal-conflict 5 anchor.	4 / 5
	Total	16 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: netalertx/NetAlertX
Path: .claude/skills/ux-design-patterns/SKILL.md
Commit: 014b960

Reviewed: 6 days ago

Table of Contents

Discovery Implementation Validation

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.