UI Patterns

Concrete, evidence-based patterns for building common UI components. This skill answers the question: "How should I build this specific component?"

For visual grouping theory, see gestalt-ui. For behavioural psychology laws, see laws-of-ux. For visual hierarchy and spacing systems, see refactoring-ui. For usability audits, see ux-heuristics.

Core Principle

Follow proven patterns. Innovate on value, not on interaction mechanics. Users spend most of their time on other sites (Jakob's Law). Every component you build should feel familiar unless you have strong evidence that a novel pattern is significantly better.

Scoring

Goal: 10/10. When reviewing or building components, rate 0-10 based on adherence to proven patterns.

• 9-10: Every component follows established patterns. Scanning flow is optimised. Decision reference followed for all pattern choices.
• 7-8: Most components are well-patterned. Minor issues: one unconventional choice, missing loading state.
• 5-6: Mixed adherence. Some components feel right, others require learning or cause confusion.
• 3-4: Significant pattern violations. Users struggle to predict behaviour.
• 1-2: Components invented from scratch. Nothing feels familiar or predictable.