Navigation: AI Skill for UX Design
Navigation is an AI skill that makes your assistant choose nav patterns by information architecture, not habit. Users always know where they are, what's here, and how to move on.
npx skills add Uxcel-Lab/product-skills --skill ux-navigation
What this skill does
Helps an AI assistant pick navigation patterns from your information architecture, not from what modern sites look like.
- Establishes the IA shape, platform, and entry points before picking a pattern.
- Layers global, local, contextual, utility, and footer navigation, each with its own job.
- Marks the current location with selected states, breadcrumbs, titles, and readable URLs.
- Keeps primary sections visible instead of hiding them behind a hamburger.
- Applies interaction basics: 44px touch targets, click activation, icons with labels.
- Specs headers, tabs, breadcrumbs, and pagination once the pattern is chosen.
- Hands the result to heuristics, accessibility, and microcopy audits for validation.
When to use it
Use it when you need an AI assistant to:
- design navigation for a new site or app;
- review an existing header, sidebar, or menu;
- choose between a top bar and a sidebar;
- decide what belongs in a hamburger menu;
- add breadcrumbs, tabs, or pagination;
- fix pages where users get lost;
- adapt navigation for mobile.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Top bar vs. sidebar | Top bar for 7 or fewer stable sections; left sidebar for broad or growing structures |
| Hamburger menu | Secondary items only; keep primary sections visible when space allows |
| Mega menu | Large catalogs needing scannable category panels; plain dropdowns for few categories |
| Tabs | 2 to 9 parallel categories in one row; a progress tracker for sequential steps |
| Bottom nav | 3 to 5 global destinations on mobile, within one-handed reach |
| Breadcrumbs | Hierarchies 3 or more levels deep; skip on flat sites |
| Pagination vs. infinite scroll | Pagination for goal-driven browsing; infinite scroll for leisure feeds |
| Gesture navigation | Accelerators on top of visible controls, never the only path |
How the skill works
1
Establish IA and platform
The skill maps your section count, hierarchy depth, platform, and how users arrive.
2
Apply the core
It layers global, local, and utility nav, marks the current location, and keeps sections visible.
3
Surface pattern trade-offs
It weighs top bar vs. sidebar, hamburger, tabs, breadcrumbs, and pagination against your structure.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
