nw-ux-web-patterns
Installation
SKILL.md
Web UI Patterns
Actionable web interface patterns for requirements gathering and design review. Use when the target platform is web (browser-based applications).
Navigation Patterns
| Pattern | When to Use | When to Avoid |
|---|---|---|
| Top navigation bar | 5-7 primary sections, marketing/content sites | Deep hierarchies with 20+ sections |
| Side navigation | Complex apps with many sections, admin dashboards | Simple sites with few pages |
| Breadcrumbs | Deep hierarchies, e-commerce categories | Flat site structures |
| Command palette (Cmd+K) | Power user tools, developer-facing apps | Consumer apps targeting non-technical users |
| Tab bar (mobile) | 3-5 primary destinations | More than 5 destinations |
| Hamburger menu | Secondary navigation, mobile space constraints | Primary navigation users need frequently |
| Mega menu | Large sites with categorized content | Simple sites, mobile interfaces |
Navigation must answer three questions: Where am I? Where can I go? How do I get back?
Key principles: consistent placement across all pages | highlight current location | limit primary nav to 5-7 items (Hick's Law) | provide search as alternative for content-heavy apps