- Agent kit
Scheduling screens prompt
Choosing and seeing times: a keyboard slot picker and a month calendar.
Prompt
Prompt
Use the klarhimmel-design skill. Build the booking times screen for {product}: pick a {thing} slot, and show the month of {events}. Install: npx shadcn add @klarhimmel/app-scheduling-slots @klarhimmel/app-scheduling-calendar (remove what you do not use) Pick: - app-scheduling-slots: days across, times down; a keyboard grid with taken slots said in words - app-scheduling-calendar: a month table with events, today marked in words, an agenda when narrow Props: slots: days with their taken times, times, selected (a day label and a time). calendar: month and today as ISO text (the block never reads the clock), events { date, time, title }, locale. state enum on both. Copy: Day labels carry the weekday and date. A taken slot says "Full", never only a colour. The confirmation says what was booked. Accessibility: The slot grid has one tab stop; arrows, Home, End and Space work. The calendar marks today with the word and aria-current; events are listed in time 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: a taken slot is named as taken; confirm with nothing chosen says so and keeps focus in the grid; today is marked in words; the agenda shows in narrow containers.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet spa |
{thing} | What is being booked | treatment |
{events} | What the calendar lists | weddings and conferences |
Blocks it uses
A good result
A taken slot is named as taken. Confirm with nothing chosen says so and keeps focus in the grid. Today is marked in words.
- [ ] a taken slot is named as taken
- [ ] confirm with nothing chosen says so and keeps focus in the grid
- [ ] today is marked in words
- [ ] the agenda shows in narrow containers