Board screens prompt
Work that moves through stages: a kanban board with a Move menu on every card.
Prompt
Prompt
Use the klarhimmel-design skill. Build the {work} board for {product}, with columns {columns}. Install: npx shadcn add @klarhimmel/app-boards-kanban (remove what you do not use) Pick: - app-boards-kanban: columns of cards (assignee, due, flag); a Move menu on each card; empty, loading, error Props: columns { title, cards { title, assignee, due, status?, overdue } }; countLabel, moveLabel, moveTo, moved, overdueLabel are the words; state enum from your fetch status. Keep the moved card in your data when a move happens. Copy: Card titles start with a verb. Due dates are as people read them. A flag says one word ("Blocked"). The empty column says what belongs there. Accessibility: Moving is by the Move menu, not only by dragging; the move is announced and focus follows the card. Overdue says the word beside the date, never only colour. 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: every card can move by keyboard alone; the move is announced; empty columns say so; no off-screen scrolling at 390.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet events |
{work} | What the cards are | event preparation |
{columns} | Two to five stages | To do, In progress, Done |
Blocks it uses
A good result
Every card can move by keyboard alone. The move is announced. Empty columns say so.
- [ ] every card can move by keyboard alone
- [ ] the move is announced
- [ ] empty columns say so
- [ ] no off-screen scrolling at 390