UI-Patterns

Proven interaction patterns from shipped products. No theory -- real patterns from award-winning sites and successful products.

Scope

Use this skill when:

• You are designing concrete UI elements (hero, navigation, cards, forms, footer)
• You are structuring landing pages and need conversion-relevant patterns
• You are designing pricing tables, testimonials, or CTAs
• You want to ensure your patterns meet established standards

Principles

1. Patterns Follow Expectations

Users have mental models. A hamburger menu opens navigation; a cart icon leads to checkout. Only break expectations with clear added value.

2. Progressive Disclosure

Show only what is relevant in the current context. Reveal details on interaction, not all at once.