ui-design-patterns
Installation
SKILL.md
UI Design Patterns
Good design is invisible: the user accomplishes the goal without noticing the interface. Every choice below should reduce friction, not add decoration.
Core interaction principles
| Principle | Application |
|---|---|
| Keyboard parity | Every mouse-accessible action needs a keyboard path (tab order, shortcuts, focus rings) |
| Streamline repetition | Batch repeated actions (Find & Replace All, bulk edit, multi-select actions) |
| Spatial/prospective memory | Keep item positions and "things to do later" stable across sessions (don't reflow menus, keep a persistent "later" list/badge) |
| Habituated behaviors | Reuse platform conventions (Ctrl+C/X/V, swipe-to-delete) — don't remap without strong reason |
| Incremental gratification | Show partial results/progress immediately, don't make users wait for a final reveal |
| Surface immediate-need controls | The control matching the user's most likely first action should be visually dominant on landing |
| Defer deferrable choices | Push optional config (sleep timer, advanced settings) to a secondary screen so the primary path stays short |
| Incremental construction | Let users build up a result step by step with visible intermediate state (playlist building, query builders) |
| Frequent items visible | Promote most-used items into primary view; bury rare ones in overflow/"more" |