Klarhimmel UI

App shell prompt

The frame around every screen: sidebar navigation and a top bar with breadcrumbs and the account menu.

Prompt

Prompt

Use the klarhimmel-design skill. Build the app shell for {product}: navigation groups {groups}, and the account menu with {account}. Install: npx shadcn add @klarhimmel/app-shell-sidebar @klarhimmel/app-shell-topbar (remove what you do not use) Pick: - app-shell-sidebar: grouped links with icons, the current page, collapsible groups and an icon rail - app-shell-topbar: breadcrumbs and the account menu Props: groups { label, collapsible, open, items { label, icon, href, badge? } }; active names one item label; collapsed starts the rail; crumbs are links with the last as the page; account { name, email, items, signOut }. Copy: Item labels are one or two words. Icons come from the fixed set. The last crumb is the page title. Accessibility: The current item has aria-current="page"; the rail keeps every link named and shows its name in a tooltip on hover and focus; the account button is named and the menu returns focus on Escape. 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: active matches an item label; every icon-only link has a name; one h1 on the page, not in the shell.

Variables

VariableWhat to fill inExample
{product}The appExempelhotellet admin
{groups}Up to four nav groupsWorkspace, Manage
{account}Account menu actionsprofile, billing, sign out

A good result

Active matches an item label. Every icon-only link has a name. One h1 on the page, not in the shell.

checklist.md
- [ ] active matches an item label
- [ ] every icon-only link has a name
- [ ] one h1 on the page, not in the shell