Onboarding screens prompt

Getting a new account to its first result: welcome, checklist and a step flow.

Prompt

Use the klarhimmel-design skill. Build the onboarding for {product}: welcome, then these setup steps: {steps}. Install: npx shadcn add @klarhimmel/app-onboarding-welcome @klarhimmel/app-onboarding-checklist @klarhimmel/app-onboarding-steps (remove what you do not use) Pick: - app-onboarding-welcome: the first screen: one primary action and 2 to 4 tips - app-onboarding-checklist: up to 7 steps with a progress count - app-onboarding-steps: a wizard header with Back and Continue Props: welcome primary { label, href }; checklist items { title, description, done, action? } and progress { label, of, suffix }; steps { label, description } (3 to 6) with active naming one of them. Copy: One obvious next step per screen. Step titles start with a verb; help lines say why it matters in one sentence. Accessibility: The current step has aria-current="step" and is also said in words; ticking a checklist item updates the count, so keep it a real checkbox. Back is never the primary button. 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: exactly one primary action per screen; active matches a step label; completion message set.

Variables

Variable	What to fill in	Example
`{product}`	The app	Exempelhotellet admin
`{steps}`	Three to seven setup steps	add rooms, set rates, connect payments

Blocks it uses

A good result

Exactly one primary action per screen. Active matches a step label. Completion message set.

checklist.md

- [ ] exactly one primary action per screen
- [ ] active matches a step label
- [ ] completion message set