- 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 introOverview of header design — purpose, anatomy, and core principles.
patterns
scripts/script.sh patternsNavigation patterns — horizontal nav, mega menu, sidebar, breadcrumbs.
sticky
scripts/script.sh stickySticky and fixed header techniques — scroll behavior, shrinking, reveal-on-scroll.
responsive
scripts/script.sh responsiveResponsive navigation — hamburger menus, off-canvas, priority+ pattern.
html
scripts/script.sh htmlSemantic HTML for headers — proper landmarks, ARIA roles, skip navigation.
css
scripts/script.sh cssCSS patterns for headers — flexbox layouts, dropdowns, transitions.
accessibility
scripts/script.sh accessibilityAccessibility — keyboard navigation, focus management, screen reader support.
examples
scripts/script.sh examplesReal-world header examples and implementation patterns.
help
scripts/script.sh helpversion
scripts/script.sh versionConfiguration
| Variable | Description |
|---|---|
HEADER_DIR | Data directory (default: ~/.header/) |
*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*