Опишете задачата
Към всички skills

implementing-navigation

ancoleman · DevOps

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.

Оригинален текст · няма потвърден превод на български
Платформи: ClaudeНиво: НапредналоВ индекса: 04.03.2026 г.Обновен в GitHub: 11.12.2025 г.

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
522
Лиценз
Не е посочен. Проверете в репозитория.
Последна проверка на записа
Няма посочена дата

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add ancoleman/ai-design-components

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от SKILL.md

Началото на файла на автора, без превод.

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

Целият SKILL.md в GitHub