Dashboard screens prompt
The first screen after sign-in: key figures and a chart with its data table.
Prompt
Prompt
Use the klarhimmel-design skill. Build the dashboard for {product}: figures {figures} and a chart of {series}. Install: npx shadcn add @klarhimmel/app-dashboard-stats @klarhimmel/app-dashboard-chart (remove what you do not use) Pick: - app-dashboard-stats: 2 to 4 figures with a signed change and what it is measured against - app-dashboard-chart: a bar or line chart with a summary sentence and a data table behind a disclosure Props: stats items { label, value, change ("+12%"), trend up|down|flat, against }; chart points { label, value } as text numbers (3 to 12), kind bar|line, unit; state from your fetch status on both. Copy: The summary sentence says what the chart shows and the takeaway. Changes carry their sign and baseline ("vs last month"). Accessibility: Direction is the sign and the word, never colour or arrow alone. The chart summary and table carry the same data for assistive tech. Loading and error states are text. 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 figure has a signed change and baseline; chart has a summary sentence and a table; loading, empty and error handled.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet admin |
{figures} | Two to four headline figures | occupancy, bookings, revenue |
{series} | What the chart plots | revenue per month |
Blocks it uses
A good result
Every figure has a signed change and baseline. Chart has a summary sentence and a table. Loading, empty and error handled.
- [ ] every figure has a signed change and baseline
- [ ] chart has a summary sentence and a table
- [ ] loading, empty and error handled