🎁 Get the FREE AI Skills Starter Guide — Subscribe →
BytesAgainBytesAgain
BytesAgain › Skills › Header
🦀 ClawHub✦ BytesAgain

Header

by @ckchzh

Header design reference — navigation patterns, sticky headers, responsive menus, accessibility. Use when designing website headers or implementing navigation...

Versionv1.0.0
Downloads361
Installs2
#legal
TERMINAL
clawhub install header

📖 About This Skill

name: "header" version: "1.0.0" description: "Header design reference — navigation patterns, sticky headers, responsive menus, accessibility. Use when designing website headers or implementing navigation components." author: "BytesAgain" homepage: "https://bytesagain.com" source: "https://github.com/bytesagain/ai-skills" tags: [header, navigation, web, ui, navbar, responsive, frontend, menu] category: "frontend"

Header — Web Header & Navigation Design Reference

Quick-reference skill for designing and implementing web page headers, navigation bars, and responsive menu systems.

When to Use

  • Designing a website header with primary navigation
  • Implementing sticky/fixed header behavior with scroll effects
  • Building responsive hamburger menus and mobile navigation
  • Making headers accessible with proper ARIA roles
  • Choosing the right navigation pattern for the site type

    • Commands

    intro

    scripts/script.sh intro

    Overview of header design — purpose, anatomy, and core principles.

    patterns

    scripts/script.sh patterns

    Navigation patterns — horizontal nav, mega menu, sidebar, breadcrumbs.

    sticky

    scripts/script.sh sticky

    Sticky and fixed header techniques — scroll behavior, shrinking, reveal-on-scroll.

    responsive

    scripts/script.sh responsive

    Responsive navigation — hamburger menus, off-canvas, priority+ pattern.

    html

    scripts/script.sh html

    Semantic HTML for headers — proper landmarks, ARIA roles, skip navigation.

    css

    scripts/script.sh css

    CSS patterns for headers — flexbox layouts, dropdowns, transitions.

    accessibility

    scripts/script.sh accessibility

    Accessibility — keyboard navigation, focus management, screen reader support.

    examples

    scripts/script.sh examples

    Real-world header examples and implementation patterns.

    help

    scripts/script.sh help

    version

    scripts/script.sh version

    Configuration

    | Variable | Description | |----------|-------------| | HEADER_DIR | Data directory (default: ~/.header/) |

    *Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*

    ⚡ When to Use

    TriggerAction
    - Implementing sticky/fixed header behavior with scroll effects
    - Building responsive hamburger menus and mobile navigation
    - Making headers accessible with proper ARIA roles
    - Choosing the right navigation pattern for the site type

    ⚙️ Configuration

    | Variable | Description | |----------|-------------| | HEADER_DIR | Data directory (default: ~/.header/) |

    *Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*