Steps prompt
How it works, in numbered steps or a timeline.
Prompt
Prompt
Use the klarhimmel-design skill. Explain how {product} works in {count} steps: {steps}. Install: npx shadcn add @klarhimmel/steps-numbered @klarhimmel/steps-horizontal @klarhimmel/steps-timeline @klarhimmel/steps-media (remove what you do not use) Pick: - steps-numbered: numbered cards or a list; steps may carry a code block - steps-horizontal: 3 to 5 short steps in one row - steps-timeline: a vertical timeline for long steps - steps-media: one screenshot that stays beside the steps Props: steps with a title and one or two sentences; layout cards or list on steps-numbered; an optional cta. Copy: Each step starts with a verb and is something the reader does. Keep the numbers honest: no skipped step. Accessibility: Steps are an ordered list, so a screen reader hears the count. Do not rely on colour for the order. 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: 3 to 5 steps unless a timeline; each title starts with a verb; at most one cta.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | What you sell, in a few words | Room booking for small hotels |
{count} | Three to five | 3 |
{steps} | What the reader does, in order | sign up, add rooms, take bookings |
Blocks it uses
A good result
3 to 5 steps unless a timeline. Each title starts with a verb. At most one cta.
- [ ] 3 to 5 steps unless a timeline
- [ ] each title starts with a verb
- [ ] at most one cta