Banner prompt

A slim bar for an announcement, a campaign, a cookie notice or a last nudge.

Prompt

Use the klarhimmel-design skill. Add a banner to {page} for {message}. Install: npx shadcn add @klarhimmel/banner-announcement @klarhimmel/banner-promo @klarhimmel/banner-cookie @klarhimmel/banner-cta-bar (remove what you do not use) Pick: - banner-announcement: one sentence, a link, dismiss; above the navbar - banner-promo: a campaign with a code chip - banner-cookie: consent with accept and reject - banner-cta-bar: a closing nudge after the content Props: text under the limit (announcement 140, promo 120); a link with a real href; dismissLabel names the button. Copy: One sentence, no exclamation marks. Say what changes for the reader and what the link does. Accessibility: Announcement and cookie banners are landmarks with a label. Reject is as easy to reach as accept. The dismiss button needs its own name. 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: only one banner above the navbar; reject and accept look equally clickable; dismiss and links work by keyboard.

Variables

Variable	What to fill in	Example
`{page}`	Where it appears	the home page
`{message}`	The one thing it says	a new spa wing opens in March

Blocks it uses

A good result

Only one banner above the navbar. Reject and accept look equally clickable. Dismiss and links work by keyboard.

checklist.md

- [ ] only one banner above the navbar
- [ ] reject and accept look equally clickable
- [ ] dismiss and links work by keyboard