New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Implementing Navigation

by ancoleman in ancoleman/ai-design-components

Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration.

MITAuto-check passedFrontend & Design

Install Implementing Navigation

skills CLI
$ npx skills add ancoleman/ai-design-components --skill implementing-navigation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ancoleman/ai-design-components implementing-navigation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/implementing-navigation .claude/skills/implementing-navigation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implementing-navigation
GitHub stars
526
Token cost
~1.8k tokens
SKILL.md length
634 words
Files
22 (incl. scripts, references, assets)
Skills in repo
75
Repo updated
First seen
Licence
MIT

At a glance

Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration.

  • Works in 5 steps: Analyze the information architecture → Select appropriate navigation pattern → Implement with accessibility first → …
  • Building navigation systems
  • SKILL.md covers Purpose, When to Use, Navigation Decision Framework and Frontend Navigation Components, plus 11 more sections
  • Runs Python scripts from its folder; calls node and python

What it does

Implementing Navigation is an agent skill from ancoleman/ai-design-components. Implements 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.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 24 other files, including scripts, reference files and assets (for example `assets/navigation-config-schema.json`, `assets/route-templates.json` and `examples/django_urls.py`).

It sits in Frontend & Design, covering Backend development and Accessibility. It works with Python, React and React Router. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

  • Building navigation systems
  • Setting up routing

Example prompts

  • “Use the implementing-navigation skill to implement navigation patterns and routing for both frontend (React/TS) and backend (Python) including…”
  • “/implementing-navigation”

Requirements

  • Python 3

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Analyze the information architecture
  2. Select appropriate navigation pattern
  3. Implement with accessibility first
  4. Add progressive enhancement
  5. Test across devices and assistive technologies

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implementing Navigation loads about 1.8k tokens when it runs, and up to ~43k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 634 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~43k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 634 words, ~1,808 tokens.

Download SKILL.mdSave it as .claude/skills/implementing-navigation/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
implementing-navigation
description
Implements 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.

Navigation Patterns & Routing Implementation

Purpose

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).

When to Use

Use this skill when:

  • Building primary navigation (top, side, mega menus)
  • Implementing secondary navigation (breadcrumbs, tabs, pagination)
  • Setting up client-side routing (React Router, Next.js)
  • Configuring server-side routes (Flask, Django, FastAPI)
  • Creating mobile navigation patterns (hamburger, bottom nav)
  • Implementing keyboard-accessible navigation
  • Building command palettes or search-driven navigation
  • Creating multi-step wizards or steppers
  • Ensuring WCAG 2.1 AA compliance for navigation

Navigation Decision Framework

Information Architecture → Navigation Pattern

Flat (1-2 levels)      → Top Navigation
Deep (3+ levels)       → Side Navigation
E-commerce/Large       → Mega Menu
Linear Process         → Stepper/Wizard
Long Content          → Table of Contents
Power Users           → Command Palette
Multi-section Page    → Tabs
Large Data Sets       → Pagination

Frontend Navigation Components

Primary Navigation Patterns

Top Navigation (Horizontal)

  • Best for shallow hierarchies, marketing sites
  • 5-7 primary links maximum for cognitive load
  • See references/menu-patterns.md for implementation

Side Navigation (Vertical)

  • Best for deep hierarchies, admin panels, dashboards
  • Supports multi-level nesting and collapsible sections
  • See references/menu-patterns.md for sidebar patterns

Mega Menu

  • Best for e-commerce, content-heavy sites
  • Rich content with images and descriptions
  • See references/menu-patterns.md for mega menu structure
Secondary Navigation Components

Breadcrumbs

  • Shows hierarchical path and current location
  • Essential for deep sites and e-commerce
  • See references/navigation-components.md for breadcrumb patterns

Tabs

  • Content switching without page reload
  • URL synchronization for bookmarking
  • See references/navigation-components.md for tab implementation

Pagination

  • For search results, product lists, articles
  • Consider virtualization for performance
  • See references/navigation-components.md for pagination patterns
Client-Side Routing

React Router (Industry Standard)

  • Type-safe routing with loader patterns
  • Nested routes and lazy loading support
  • See references/client-routing.md for React Router patterns

Next.js App Router

  • File-based routing with RSC support
  • Parallel and intercepting routes
  • See references/client-routing.md for Next.js routing

Backend Routing Patterns

Python Web Frameworks

Flask

  • Blueprint-based organization
  • Route decorators and URL rules
  • See references/flask-routing.md for Flask patterns

Django

  • URL configuration with namespaces
  • Path converters and regex patterns
  • See references/django-urls.md for Django URL conf

FastAPI

  • Router-based organization
  • Path operations and dependencies
  • See references/fastapi-routing.md for FastAPI routers

Mobile Navigation

Patterns for Touch Devices

Hamburger Menu

  • Slide-out drawer for primary navigation
  • See references/menu-patterns.md for mobile drawer

Bottom Navigation

  • 3-5 primary actions, thumb-friendly
  • See references/menu-patterns.md for bottom nav

Tab Bar

  • Horizontal scrollable tabs with swipe
  • Natural for mobile-first applications

Accessibility Requirements

Keyboard Navigation
Tab       → Move forward through links
Shift+Tab → Move backward through links
Enter     → Activate link/button
Space     → Activate button
Arrow keys → Navigate within menus
Escape    → Close dropdowns/modals
ARIA Patterns

Essential ARIA attributes for accessible navigation:

  • See references/accessibility-navigation.md for complete ARIA patterns
  • Includes landmark roles, states, and properties
  • Screen reader optimization techniques
Show full SKILL.md (255 more words)Show less
Focus Management
  • Visible focus indicators (2px minimum, 3:1 contrast)
  • Focus trap for modals and dropdowns
  • Skip navigation link for keyboard users
  • See references/accessibility-navigation.md for focus patterns

Implementation Utilities

Navigation Structure Management

Generate and validate navigation trees:

bash
# Validate navigation structure
node scripts/validate_navigation_tree.js nav-config.json

# Generate breadcrumb trails
node scripts/calculate_breadcrumbs.js current-path
Route Generation (Python)

Generate route configurations:

bash
# Generate Flask/Django/FastAPI routes
python scripts/generate_routes.py --framework flask --config routes.yaml

Code Examples

Frontend Examples

For working navigation implementations:

  • examples/horizontal-menu.tsx - Responsive top navigation
  • examples/tab-navigation.tsx - Tabs with URL sync
  • examples/mobile-navigation.tsx - Hamburger and drawer
Backend Examples

For routing configuration:

  • examples/flask_routes.py - Flask blueprint setup
  • examples/django_urls.py - Django URL patterns
  • examples/fastapi_routes.py - FastAPI router organization

Navigation Configuration

For complex navigation structures, use the configuration schema:

  • assets/navigation-config-schema.json - Navigation tree schema
  • assets/route-templates.json - Common route patterns

Validate configurations before implementation using the validation script.

Library Recommendations

Frontend Routing

React Router is the recommended solution for React applications:

  • Industry standard with excellent TypeScript support
  • Built-in accessibility with NavLink active states
  • See references/library-comparison.md for alternatives
Component Libraries

For rapid development, consider:

  • Headless UI libraries (Radix UI, React Aria)
  • Accessible by default
  • Work with any styling approach

Progressive Enhancement

Build navigation that works without JavaScript:

  • Server-rendered HTML navigation
  • Progressive enhancement with client-side routing
  • Fallback for JavaScript failures

Performance Considerations

  • Lazy load route components
  • Prefetch navigation targets
  • Use route-based code splitting
  • Implement loading states for navigation

Testing Navigation

Essential navigation tests:

  • Keyboard navigation flow
  • Screen reader announcements
  • Mobile touch interactions
  • Route parameter validation
  • Deep linking functionality

Next Steps

  1. Analyze the information architecture
  2. Select appropriate navigation pattern
  3. Implement with accessibility first
  4. Add progressive enhancement
  5. Test across devices and assistive technologies

For detailed implementation guides, explore the referenced documentation files based on specific requirements.

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 21 other files (scripts, references, assets) in skills/implementing-navigation of ancoleman/ai-design-components.

  • SKILL.md
  • assets/navigation-config-schema.json
  • assets/route-templates.json
  • examples/django_urls.py
  • examples/fastapi_routes.py
  • examples/flask_routes.py
  • examples/horizontal-menu.tsx
  • examples/mobile-navigation.tsx
  • examples/tab-navigation.tsx
  • outputs.yaml
  • references/accessibility-navigation.md
  • references/client-routing.md
  • references/django-urls.md
  • references/fastapi-routing.md
  • references/flask-routing.md
  • references/library-comparison.md
  • references/menu-patterns.md
  • references/navigation-components.md
  • … and 4 more

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Implementing Navigation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implementing Navigation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implementing Navigation this skillancoleman/ai-design-components526—~1.8kAutomated safety check: PassMIT
Reactmagnus919/agent-skills111—~1.4kAutomated safety check: PassMIT
Web Coderboshi-xixixi/TraeSkill2741 repos~5.2kAutomated safety check: PassMIT
Frontend UIfossasia/eventyay1.7k—~299Automated safety check: PassApache-2.0
Figma To StaticLeoYeAI/openclaw-master-skills2.2k—~7.1kAutomated safety check: PassMIT
DocsPrefectHQ/fastmcp28k—~1kAutomated safety check: PassApache-2.0

Similar skills

  • React

    magnus919/agent-skills

    Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the…

    111 GitHub stars~1.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Web Coder

    boshi-xixixi/TraeSkill

    Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

    274 GitHub starsUsed in 1 repo~5.2k tokens
    Frontend & DesignAuto-check passed

  • Frontend UI

    fossasia/eventyay

    Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

    1.7k GitHub stars~299 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Figma To Static

    LeoYeAI/openclaw-master-skills

    Convert Figma design files to pixel-level mobile-first static HTML/CSS pages.

    2.2k GitHub stars~7.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Docs

    PrefectHQ/fastmcp

    Write or revise a page under docs/ for gofastmcp.com. An agent skill from PrefectHQ/fastmcp.

    28k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • LangBot Core Development

    langbot-app/LangBot

    Covers developing the LangBot core backend and web UI: dev setup, repo layout, API auth types, adding endpoints, migrations and keeping the MCP server in step.

    18k GitHub stars~1.4k tokensUpdated today
    DevelopmentAuto-check: notes

More from ancoleman/ai-design-components

All 75 skills in this repo

  • Building AI Chat

    ancoleman/ai-design-components

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.

    526 GitHub starsUsed in 1 repo~3.4k tokens
    Auto-check passed

  • Building Forms

    ancoleman/ai-design-components

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.

    526 GitHub stars~3.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Building Tables

    ancoleman/ai-design-components

    Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

    526 GitHub stars~1.8k tokensUpdated 10 mo ago
    Auto-check passed

  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed

  • Designing Layouts

    ancoleman/ai-design-components

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.

    526 GitHub stars~1.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Displaying Timelines

    ancoleman/ai-design-components

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.

    526 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Implementing Navigation

What does Implementing Navigation do?

Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Implementing Navigation is an agent skill from ancoleman/ai-design-components. Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration.

When should I use Implementing Navigation?

Implementing Navigation fits situations like: building navigation systems; setting up routing.

How do I install Implementing Navigation in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill implementing-navigation -a claude-code`. Or copy the skill folder (skills/implementing-navigation in ancoleman/ai-design-components) into .claude/skills/implementing-navigation in your project. Claude Code loads it when a task matches its description.

How do I install Implementing Navigation in Codex?

Run `npx skills add ancoleman/ai-design-components --skill implementing-navigation -a codex`. Or copy the skill folder (skills/implementing-navigation in ancoleman/ai-design-components) into .agents/skills/implementing-navigation in your project. Codex loads it when a task matches its description.

Can I use Implementing Navigation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill implementing-navigation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-navigation, .gemini/skills/implementing-navigation, .github/skills/implementing-navigation and .opencode/skills/implementing-navigation in your project.

What does Implementing Navigation need to run?

Going by SKILL.md and its folder, Implementing Navigation needs Python for the scripts in its folder and the command-line tools its instructions call (node and python). Our summary lists: Python 3.

Does Implementing Navigation access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implementing Navigation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Implementing Navigation use?

Implementing Navigation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implementing Navigation use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 41k tokens, read only when the agent opens those files.

What are the alternatives to Implementing Navigation?

Skills that share tags, products or a category with Implementing Navigation: React (magnus919/agent-skills, 111 stars), Web Coder (boshi-xixixi/TraeSkill, 274 stars), Frontend UI (fossasia/eventyay, 1.7k stars) and Figma To Static (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implementing Navigation?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.