workbuddy_skills/open-design/design-templates/live-dashboard/SKILL.md

name, description, triggers, od

name	description	triggers	od
live-dashboard	Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.	team dashboard notion dashboard live dashboard ops dashboard team workspace dashboard 团队仪表盘 Notion 仪表盘 Live Artifact dashboard	mode platform scenario fidelity preview design_system craft inputs parameters outputs capabilities_required example_prompt prototype desktop operation high type entry reload html index.html debounce-100 requires sections true color typography layout components anti-patterns requires typography color anti-ai-slop motion-discipline state-coverage name type required workspace_name string true name type default page_title string Team Dashboard name type values default connector enum notion linear stripe posthog mock notion name type default min max refresh_seconds integer 30 10 300 name type default min max stale_after_seconds integer 90 30 600 name type values default kpi_count enum 2 4 6 4 name type default include_activity_feed boolean true name type default include_task_table boolean true name type default range accent_hue hue 198 0 360 name type default range surface_warmth spacing 0 -12 24 name type default range density spacing 18 8 36 name type default range display_scale font-scale 1.0 0.85 1.4 primary secondary index.html connectors.json file_write surgical_edit Build me a Notion-style team dashboard for Acme Studio. KPIs: total tasks, done this week, active members, docs in review. Wire it to the Notion connector and let it refresh on demand.

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 " + 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 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)

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