implementing-navigation
installsforks
How to install implementing-navigation?
ancoleman/ai-design-components/implementing-navigation
$npx -y skills add ancoleman/ai-design-components --skill implementing-navigationImplements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Use when building navigation systems or setting up routing.
SKILL.md
| 1 | # Navigation Patterns & Routing Implementation |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | This skill provides comprehensive guidance for implementing navigation systems across both frontend and backend applications. It covers client-side navigation patterns (menus, tabs, breadcrumbs) and routing (React Router, Next.js) as well as server-side route configuration (Flask, Django, FastAPI). |
| 6 | |
| 7 | ## When to Use |
| 8 | |
| 9 | Use this skill when: |
| 10 | - Building primary navigation (top, side, mega menus) |
| 11 | - Implementing secondary navigation (breadcrumbs, tabs, pagination) |
| 12 | - Setting up client-side routing (React Router, Next.js) |
| 13 | - Configuring server-side routes (Flask, Django, FastAPI) |
| 14 | - Creating mobile navigation patterns (hamburger, bottom nav) |
| 15 | - Implementing keyboard-accessible navigation |
| 16 | - Building command palettes or search-driven navigation |
| 17 | - Creating multi-step wizards or steppers |
| 18 | - Ensuring WCAG 2.1 AA compliance for navigation |
| 19 | |
| 20 | ## Navigation Decision Framework |
| 21 | |
| 22 | ``` |
| 23 | Information Architecture → Navigation Pattern |
| 24 | |
| 25 | Flat (1-2 levels) → Top Navigation |
| 26 | Deep (3+ levels) → Side Navigation |
| 27 | E-commerce/Large → Mega Menu |
| 28 | Linear Process → Stepper/Wizard |
| 29 | Long Content → Table of Contents |
| 30 | Power Users → Command Palette |
| 31 | Multi-section Page → Tabs |
| 32 | Large Data Sets → Pagination |
| 33 | ``` |
| 34 | |
| 35 | ## Frontend Navigation Components |
| 36 | |
| 37 | ### Primary Navigation Patterns |
| 38 | |
| 39 | **Top Navigation (Horizontal)** |
| 40 | - Best for shallow hierarchies, marketing sites |
| 41 | - 5-7 primary links maximum for cognitive load |
| 42 | - See `references/menu-patterns.md` for implementation |
| 43 | |
| 44 | **Side Navigation (Vertical)** |
| 45 | - Best for deep hierarchies, admin panels, dashboards |
| 46 | - Supports multi-level nesting and collapsible sections |
| 47 | - See `references/menu-patterns.md` for sidebar patterns |
| 48 | |
| 49 | **Mega Menu** |
| 50 | - Best for e-commerce, content-heavy sites |
| 51 | - Rich content with images and descriptions |
| 52 | - See `references/menu-patterns.md` for mega menu structure |
| 53 | |
| 54 | ### Secondary Navigation Components |
| 55 | |
| 56 | **Breadcrumbs** |
| 57 | - Shows hierarchical path and current location |
| 58 | - Essential for deep sites and e-commerce |
| 59 | - See `references/navigation-components.md` for breadcrumb patterns |
| 60 | |
| 61 | **Tabs** |
| 62 | - Content switching without page reload |
| 63 | - URL synchronization for bookmarking |
| 64 | - See `references/navigation-components.md` for tab implementation |
| 65 | |
| 66 | **Pagination** |
| 67 | - For search results, product lists, articles |
| 68 | - Consider virtualization for performance |
| 69 | - See `references/navigation-components.md` for pagination patterns |
| 70 | |
| 71 | ### Client-Side Routing |
| 72 | |
| 73 | **React Router (Industry Standard)** |
| 74 | - Type-safe routing with loader patterns |
| 75 | - Nested routes and lazy loading support |
| 76 | - See `references/client-routing.md` for React Router patterns |
| 77 | |
| 78 | **Next.js App Router** |
| 79 | - File-based routing with RSC support |
| 80 | - Parallel and intercepting routes |
| 81 | - See `references/client-routing.md` for Next.js routing |
| 82 | |
| 83 | ## Backend Routing Patterns |
| 84 | |
| 85 | ### Python Web Frameworks |
| 86 | |
| 87 | **Flask** |
| 88 | - Blueprint-based organization |
| 89 | - Route decorators and URL rules |
| 90 | - See `references/flask-routing.md` for Flask patterns |
| 91 | |
| 92 | **Django** |
| 93 | - URL configuration with namespaces |
| 94 | - Path converters and regex patterns |
| 95 | - See `references/django-urls.md` for Django URL conf |
| 96 | |
| 97 | **FastAPI** |
| 98 | - Router-based organization |
| 99 | - Path operations and dependencies |
| 100 | - See `references/fastapi-routing.md` for FastAPI routers |
| 101 | |
| 102 | ## Mobile Navigation |
| 103 | |
| 104 | ### Patterns for Touch Devices |
| 105 | |
| 106 | **Hamburger Menu** |
| 107 | - Slide-out drawer for primary navigation |
| 108 | - See `references/menu-patterns.md` for mobile drawer |
| 109 | |
| 110 | **Bottom Navigation** |
| 111 | - 3-5 primary actions, thumb-friendly |
| 112 | - See `references/menu-patterns.md` for bottom nav |
| 113 | |
| 114 | **Tab Bar** |
| 115 | - Horizontal scrollable tabs with swipe |
| 116 | - Natural for mobile-first applications |
| 117 | |
| 118 | ## Accessibility Requirements |
| 119 | |
| 120 | ### Keyboard Navigation |
| 121 | |
| 122 | ``` |
| 123 | Tab → Move forward through links |
| 124 | Shift+Tab → Move backward through links |
| 125 | Enter → Activate link/button |
| 126 | Space → Activate button |
| 127 | Arrow keys → Navigate within menus |
| 128 | Escape → Close dropdowns/modals |
| 129 | ``` |
| 130 | |
| 131 | ### ARIA Patterns |
| 132 | |
| 133 | Essential ARIA attributes for accessible navigation: |
| 134 | - See `references/accessibility-navigation.md` for complete ARIA patterns |
| 135 | - Includes landmark roles, states, and properties |
| 136 | - Screen reader optimization techniques |
| 137 | |
| 138 | ### Focus Management |
| 139 | |
| 140 | - Visible focus indicators (2px minimum, 3:1 contrast) |
| 141 | - Focus trap for modals and dropdowns |
| 142 | - Skip navigation link for keyboard users |
| 143 | - See `references/accessibility-navigation.md` for focus patterns |
| 144 | |
| 145 | ## Implementation Utilities |
| 146 | |
| 147 | ### Navigation Structure Management |
| 148 | |
| 149 | Generate and validate navigation trees: |
| 150 | ```bash |
| 151 | # Validate navigation structure |
| 152 | node scripts/validate_navigation_tree.js nav-config.json |
| 153 | |
| 154 | # Generate breadcrumb trails |
| 155 | node scripts/calculate_breadcrumbs.js current-path |
| 156 | ``` |
| 157 | |
| 158 | ### Route Generation (Python) |
| 159 | |
| 160 | Generate route c |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
