live-dashboard

What this skill does

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

1. `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.
2. `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.
3. `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.
4. `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.
5. `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

1. **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.
2. **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`).
3. **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.
4. **Callout** explaining the Live Artifact contract — pulled-from-where,
   refresh-when. One line. No marketing language.
5. **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`).
6. **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.
7. **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.
8. **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**.

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)

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