← ClaudeAtlas

principle-product-designlisted

UX and product design principles — Nielsen's 10 usability heuristics, visual hierarchy, information architecture, interaction design patterns, design-system compliance, and responsive layout. Accessibility/WCAG conformance is delegated to `swe-workbench:principle-accessibility`. Auto-load when reviewing UX, evaluating usability, checking interaction patterns, assessing visual hierarchy or information architecture, auditing design-system compliance, or planning user-facing features.
lugassawan/swe-workbench · ★ 3 · Web & Frontend · score 69
Install: claude install-skill lugassawan/swe-workbench
# Product Design Principles ## Usability Heuristics (Nielsen's 10) Every user-facing component must satisfy these. Violations block progress. | Heuristic | Rule | Common Violation | |---|---|---| | **Visibility of system status** | Users always know what's happening | No loading indicator during async operations; silent failures with no feedback | | **Match between system and real world** | Use language and concepts users know | Developer jargon in UI labels ("null", "undefined", "404"); unfamiliar abbreviations | | **User control and freedom** | Provide undo, cancel, and escape routes | Destructive action with no confirmation; no way to cancel an in-progress operation | | **Consistency and standards** | Same action, same result, everywhere | Button styles that vary across views; inconsistent terminology for the same concept | | **Error prevention** | Prevent errors before they happen | Allowing invalid input submission; no constraints on date ranges or numeric fields | | **Recognition over recall** | Show options, don't force memorization | Hidden navigation requiring memorized paths; no search/filter on long lists | | **Flexibility and efficiency** | Support both novice and expert users | No keyboard shortcuts for power users; no progressive disclosure for complex forms | | **Aesthetic and minimalist design** | Every element earns its place | Cluttered layouts with competing visual weights; information overload on a single view | | **Error recovery** | Clear error messag