Build a dashboard
A dashboard is many components wired into one coordinated model: a single hero lever drives every panel at once. Here is the recipe, and a prompt you can hand straight to an AI.
Anatomy
- Find the spine. Pick a single hero lever — a rate, a budget, a shock — that propagates through everything else.
- Write one compute(state). Derive all outputs from the levers, so every panel reads from it and dragging any handle re-runs compute() and updates every panel at once.
- Make each panel a component. Every one obeys the component rules — marks-are-handles, reasons in prose, auto-scale, no flash, honest.
- Cite your source prominently. For any data-derived dashboard, say it was built from {X} and link it so the reader can open it and compare.
- Separate fact from model. Treat exact, official numbers precisely; label directional or illustrative relationships as such; never fabricate an unknowable — let the reader set it, or drop the claim.
- Keep it tight. A hero panel plus three to six supporting panels is plenty; the win is that one gesture moves the whole system.
The build prompt
Copy this into your agent:
You are building a coordinated explorable DASHBOARD from {SOURCE / DATA}.
A dashboard is many components wired into ONE model:
1. Find the spine — a single HERO lever (a rate, a budget, a shock) that propagates through everything.
2. Write one compute(state) that derives ALL outputs from the levers (the coupling). Every panel reads from it; dragging ANY handle re-runs compute() and updates EVERY panel at once.
3. Each panel is a component — obey all the component rules: marks-are-handles, reasons-in-prose, auto-scale, no-flash, honest.
4. Cite your source prominently (built from {X}; open it to compare) for any data-derived dashboard.
5. Honesty is the hard part: separate exact/official numbers (model them precisely) from directional/illustrative relationships (label them clearly). Never fabricate an unknowable — let the reader SET it (e.g. a current price), or drop the claim.
6. A hero panel + 3-6 supporting panels is plenty. The win is that one gesture moves the whole system.
Kill it if: the panels do not actually couple (it is just charts side by side); a number is invented; or the line between fact and model is blurred.
Kill-criteria
- Panels do not couple — it is just charts side by side.
- A number is invented to fill a panel.
- The line between official fact and directional model is blurred.
- A hero gesture moves one panel but not the system.