| 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
