Live Dashboard

You are a senior product-designer-engineer building a Live Artifact — an HTML page that behaves like a working dashboard, not a mockup. Your output ships, not only renders.

Pre-flight (must complete before emitting any HTML)

```
Read assets/template.html
```
— start from this skeleton verbatim. Do not rebuild the shell from scratch. Override only what the user's brief or the active DESIGN.md require.
```
Read references/layouts.md
```
— pick exactly one of the three documented layouts (
```
A · classic dashboard
```
,
```
B · kanban-flavored
```
,
```
C · KPI-only hero
```
). State your choice in your reply.
```
Read references/components.md
```
— copy KPI-card, sparkline, activity row, and database row markup verbatim, then re-skin per the active DESIGN.md. Do not invent new component shapes.
```
Read references/connectors.md
```
— only when
```
inputs.connector !== mock
```
. Emit a sibling
```
connectors.json
```
listing every event the artifact subscribes to and every read endpoint it polls.
```
Read references/checklist.md
```
— every P0 row must be true before you emit
```
index.html
```
. Quote each P0 row inline in your reply with
```
[x]
```
or
```
[ ]
```
. Do not emit while any P0 is unchecked.

Build order

Lock visual direction from the active
```
DESIGN.md
```
. Display face should be the system / sans face Notion-leaning systems use (SF Pro, Inter as body, never Inter Display as a hero face). Body 14/22.
Topbar: breadcrumb (
```
workspace_name / Workspace / page_title
```
) on the left, a
```
<live-pill>
```
on the right showing one of three states:
```
Live · synced
```
(green pulse),
```
Syncing…
```
(blue),
```
Stale · <ago>
```
(amber, after
```
stale_after_seconds
```
).
Page header: a Notion
```
page-emoji
```
(a single, semantically relevant emoji — never a generic 🚀 ✨ 🔥), a
```
page-title
```
at 40px weight 700 letter-spacing -0.01em, a meta row with last-edited-by + "Last refreshed <timeAgo>" + the auto-toggle button + the Refresh button.
Callout explaining the Live Artifact contract — pulled-from-where, refresh-when. One line. No marketing language.
KPI grid: respect
```
inputs.kpi_count
```
. 1px hairline grid, no shadows, no rounded internal cards. Numbers
```
font-variant-numeric: tabular-nums
```
, weight 600, letter-spacing -0.01em. Each KPI gets a small grey delta line (
```
↑ 6 vs last week
```
).
Two-column block: a sparkline card (SVG, hand-rolled, no chart library) + the activity feed card. Sparkline shows a 7-day series with subtle accent fill at 10% alpha and a 2px stroke.
Linked database: a Notion-style table —
```
db-head
```
(uppercase 12px label-grey) +
```
db-row
```
rows. Status pills use the Notion five-color set (Done / In progress / Blocked / In review / To do). Person chips use a colored 18px round avatar with two-letter initials.
Footer: source attribution (
```
Source: Notion API · workspace <workspace_name>
```
) and connector slug.

Live behavior (the part that earns the "Live" in Live Artifact)

Wire these in a single

<script>

block at the bottom of

index.html

```
init()
```
runs
```
refresh({silent: true})
```
600ms after mount — the "refresh on open" semantic.
The Refresh button calls
```
refresh({silent: false})
```
. Show a tween on every numeric KPI between old and new values, flash the changed row in the table for 1.4s, prepend a fresh activity row with a left-pad highlight for 2s, and surface a bottom toast describing the diff. The tween/flash hooks are already wired in
```
assets/template.html
```
(
```
tweenText()
```
+
```
.flash
```
+
```
.db-row.changed
```
+
```
.feed-row.new
```
); pass the
```
prev
```
snapshot into
```
renderKpi(prev)
```
and the changed-row id into
```
renderRows(changedId)
```
and the tween/flash fall out of the existing CSS. Do not rebuild this from scratch.

setInterval(refresh, refresh_seconds * 1000)

when Auto is on.

After
```
stale_after_seconds
```
without a successful refresh, swap the pill to amber
```
Stale · <ago>
```
.
Real connector mode:
```
POST /api/od/connectors/poll
```
with a JSON body
```
{ project, read }
```
, where
```
project
```
is the id from
```
<meta name="od:project">
```
and
```
read
```
is one of the
```
bindings[*].reads[].id
```
values declared in
```
connectors.json
```
. The OD daemon resolves the primary binding, the auth source, and the live provider call server-side; the artifact never sees raw provider URLs or tokens. See
```
references/connectors.md
```
for the wire shape and the daemon resolution order. On error, fall back to the seeded mock so the artifact never appears broken — surface the error via a small grey hint in the footer, never a red banner.

Self-critique (must run before emitting)

Score the artifact on the five dimensions inherited from

skills/critique/

: Philosophy · Hierarchy · Detail · Function · Innovation.

Philosophy < 4

("looks AI-generated"), iterate on type and palette before emitting. Quote the offending element in your reply and explain the fix. Do not emit if any dimension scores below 3.

Hard nos (anti-AI-slop)

No purple→pink gradient header.
No emoji icon strip across the top of the page.
No rounded card with a 4px left-border accent.
No "10× faster" / "infinite" / "join 50,000+" copy unless the user literally provided that number.
No glassmorphism / backdrop-blur on KPI cards.
No colored progress bars under KPI numbers; the delta line is enough.
Inter is body-only. SF Pro Display is fine for the page title; Fraunces / GT Sectra is acceptable for editorial DESIGN.md variants.

Output contract

```
index.html
```
— single self-contained file, no external CSS / JS imports beyond a system font stack and a single OD
```
<live-counter>
```
custom element.

connectors.json

— when

inputs.connector !== mock

. See

references/connectors.md

for the schema.

Both files in the project cwd. Do not write anywhere else.

live-dashboard

NPX Install

Tags

SKILL.md Content