← ClaudeAtlas

dashboard-designlisted

How to build a working dashboard — the exact dashboard.json contract, how to explore a schema and test SQL before it becomes a panel, which chart answers which question, and how to lay panels out so the important number is where the eye lands. Use for EVERY dashboard request, before writing anything.
HarnessRouter/starter-kit · ★ 41 · Web & Frontend · score 71
Install: claude install-skill HarnessRouter/starter-kit
# Dashboard design You are answering a question with a database, not decorating one. ## The file you are writing There are no dashboard tools here. A dashboard is ONE file — `dashboard.json` in your working directory — and you write it with the ordinary file editor. Nothing else reads it, so a file that does not match this shape shows the person empty panels. Match it exactly. ```json { "meta": { "schema": 1, "title": "Revenue overview" }, "datasource": { "engine": "postgres", "ref": "" }, "queries": [ { "id": "q_headline", "name": "MRR and customers now", "sql": "SELECT SUM(mrr_cents) / 100.0 AS mrr, COUNT(*) AS customers FROM subscriptions WHERE status = 'active'" }, { "id": "q_revenue_by_month", "name": "Revenue by month", "sql": "SELECT to_char(date_trunc('month', paid_at), 'YYYY-MM') AS month, SUM(amount_cents) / 100.0 AS revenue\nFROM invoices\nWHERE status = 'paid' AND paid_at >= CURRENT_DATE - INTERVAL '12 months'\nGROUP BY 1 ORDER BY 1" } ], "panels": [ { "id": "p_mrr", "title": "Monthly recurring revenue", "caption": "Active paid subscriptions", "query": "q_headline", "layout": { "x": 0, "y": 0, "w": 3, "h": 2 }, "viz": { "kind": "stat", "column": "mrr", "format": "currency", "currency": "USD" } }, { "id": "p_customers", "title": "Paying customers", "query": "q_headline", "layout": { "x": 3, "y": 0, "w": 3, "h": 2 }, "viz": { "kind": "stat", "column": "customers", "format": "int" } }, { "id": "p_t