Metrics / Admin Dashboard
Build a single-page metrics or admin dashboard with KPI summary cards, at least one chart, and a data table, rendered from sample or provided data. Locks the data model and which metrics matter first, then a scannable dashboard layout (grid of cards, chart placement, table), then builds the interactive HTML with a lightweight charting approach and a sortable/filterable table. Deciding the metrics and layout before coding prevents a small model from dumping raw data with no hierarchy; a dashboard's value is the at-a-glance summary up top.
Steps
Entry step: data-scope. Each step names the specialist role it wants; the full working prompt is expandable.
- Data scopeplannerentry
data model + which KPIs and views matter
Show working prompt
Scope the data and the views. (1) Define the data shape: the records/rows and their fields (use provided data, or generate a realistic sample array embedded in the page). (2) Pick the 3-5 headline KPIs to show as summary cards and how each is computed. (3) Choose at least one chart (what it plots) and the table's columns. (4) Decide interactions: which column sorts, any filter/date-range. (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'KPI cards show computed values', 'the chart renders from the data', 'the table lists all rows', 'at least one column sorts', 'a filter narrows the table', 'responsive layout', 'no console errors'. Write to notes/data-scope.md and via write_task_note. No design or HTML yet.
- Layout designdesigner
card grid, chart placement, table, hierarchy
Show working prompt
Design the dashboard layout for scannability. (1) Pick a calm palette (hex) with one accent for emphasis/positive-negative deltas. (2) Lay out KPI cards in a top row (value, label, delta), the chart below/beside, and the table at the bottom. (3) Specify card, chart, and table styling and the responsive reflow (cards stack on mobile). (4) Define the sort indicator and filter control look. (5) Self-contained CSS; charts via canvas or inline SVG (no chart-library CDN unless trivially inlined). Write the visual spec to notes/layout-design.md and via write_task_note. No HTML yet.
- Builddeveloper
implement index.html with cards, chart, table
Show working prompt
Implement index.html with inline CSS/JS to the layout and data scope. (1) Embed the data array and compute the KPIs into the summary cards (show deltas in the accent color). (2) Render the chart from the data with canvas or inline SVG. (3) Render the full data table; implement click-to-sort on at least one column and a working filter/search that narrows rows. (4) Make it responsive (cards stack, table scrolls) at 375px and 1280px. (5) Vanilla JS, no CDN. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Evaluate the dashboard. Open/render index.html, sort the table, use the filter, and resize. Check EACH criterion from notes/data-scope.md and write PASS/FAIL with a reason: do KPI cards show correctly computed values, does the chart render from the data, does the table list all rows, does at least one column sort, does the filter narrow the table, is it responsive, zero console errors? Verify a KPI value by hand against the data. Wrong KPIs or a dead chart is a FAIL — loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- admin dashboard
- metrics dashboard
- analytics page
- kpi dashboard
- build a dashboard
- data dashboard
Source
View this craftbook on GitHub · MIT license