Header footer
Skill Dragoon0x/everything-design-taste/skills/header-footer
Header design, footer architecture, sticky headers, responsive headers, and footer content strategy.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill header-footerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.5 KB, 295 tokens by cl100k_base, as published. Nobody here has run it
Header & Footer Patterns
Header
- Height: 48-64px (compact apps), 64-80px (marketing sites)
- Contents: Logo (left), navigation (center or right), actions (right)
- Sticky: Consider sticky for long-scroll pages, but it steals vertical space
- Compact on scroll: Reduce height and hide secondary items when scrolling down
Header Hierarchy
| Element | Priority | Position |
|---|---|---|
| Logo/brand | Always visible | Left |
| Primary nav | Always visible (desktop) | Center or left |
| Search | Visible or icon-toggle | Center or right |
| User menu | Always visible (logged in) | Right |
| CTA | Optional | Right |
Footer
- Not a junk drawer. Only include useful navigation and legal requirements.
- Column layout: 3-4 columns of links, grouped by category
- Required: Copyright, privacy policy, terms of service
- Useful: Contact info, social links, newsletter signup
- Skip: Links that duplicate the main navigation
Mobile Header
- Logo left, hamburger right (or vice versa)
- Important action (cart, search) visible as icon
- Sticky bottom bar for primary actions (not header)
Dark Footer on Light Sites
Works well. The visual weight anchors the page and separates content from legal/navigation.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.