Header prompt
The bar at the top of every page: brand, links, one action.
Prompt
Prompt
Use the klarhimmel-design skill. Build the page header for {brand} with these links: {links}. The one action is {action}. Install: npx shadcn add @klarhimmel/navbar-simple @klarhimmel/navbar-centered @klarhimmel/navbar-menu (remove what you do not use) Pick: - navbar-simple: up to 8 links, optional search and theme toggle - navbar-centered: brand in the middle, links split either side - navbar-menu: many pages: link groups that open described panels Props: brand; links as { label, href }; cta once. Leave search and themeToggle out unless the site has them. Copy: Link labels are one or two plain nouns. The button names the outcome ("Book a room"), not "Click here". Accessibility: It is the first landmark on the page. It collapses to a menu in narrow containers, so test it at 390 px. Do not add a second h1 here. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: one primary action; no more links than the block allows; the menu opens and closes by keyboard.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{brand} | The name, 40 characters at most | Exempelhotellet |
{links} | Up to eight page names | Rooms, Restaurant, Events, Contact |
{action} | The one next step | Start a free trial |
Blocks it uses
A good result
One primary action. No more links than the block allows. The menu opens and closes by keyboard.
- [ ] one primary action
- [ ] no more links than the block allows
- [ ] the menu opens and closes by keyboard