live-dashboard skill

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)

not rebuild the shell from scratch. Override only what the user's brief or the active DESIGN.md require.

1. Read assets/template.html — start from this skeleton verbatim. Do

documented layouts (A · classic dashboard, B · kanban-flavored, C · KPI-only hero). State your choice in your reply.

1. Read references/layouts.md — pick exactly one of the three

row, and database row markup verbatim, then re-skin per the active DESIGN.md. Do not invent new component shapes.

1. Read references/components.md — copy KPI-card, sparkline, activity

Emit a sibling connectors.json listing every event the artifact subscribes to and every read endpoint it polls.

1. Read references/connectors.md — only when inputs.connector !== mock.

you emit index.html. Quote each P0 row inline in your reply with [x] or [ ]. Do not emit while any P0 is unchecked.

1. Read references/checklist.md — every P0 row must be true before

Build order

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.

1. Lock visual direction from the active DESIGN.md. Display face

the left, a on the right showing one of three states: Live · synced (green pulse), Syncing… (blue), Stale · (amber, after staleafterseconds).

1. Topbar: breadcrumb (workspacename / Workspace / pagetitle) on

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 " + the auto-toggle button + the Refresh button.

1. Page header: a Notion page-emoji (a single, semantically

refresh-when. One line. No marketing language.

1. Callout explaining the Live Artifact contract — pulled-from-where,

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).

1. KPI grid: respect inputs.kpi_count. 1px hairline grid, no

library) + the activity feed card. Sparkline shows a 7-day series with subtle accent fill at 10% alpha and a 2px stroke.

1. Two-column block: a sparkline card (SVG, hand-rolled, no chart

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.

1. Linked database: a Notion-style table — db-head (uppercase

) and connector slug.

1. Footer: source attribution (Source: Notion API · workspace

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

Wire these in a single block at the bottom of index.html:

"refresh on open" semantic.

• init() runs refresh({silent: true}) 600ms after mount — the

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.

• The Refresh button calls refresh({silent: false}). Show a tween on

pill to amber Stale · .

• setInterval(refresh, refreshseconds 1000) when Auto is on.
• After staleafterseconds without a successful refresh, swap the

{ project, read }, where project is the id from 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.

• Real connector mode: POST /api/od/connectors/poll with a JSON body

Self-critique (must run before emitting)

Score the artifact on the five dimensions inherited from design-templates/critique/: Philosophy · Hierarchy · Detail · Function · Innovation.

If 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)

literally provided that number.

• 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

Fraunces / GT Sectra is acceptable for editorial DESIGN.md variants.

• 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;

Output contract

imports beyond a system font stack and a single OD custom element.

• index.html — single self-contained file, no external CSS / JS

references/connectors.md for the schema.

• connectors.json — when inputs.connector !== mock. See

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