Agent skill · design visual · nexu-io
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.
Why this skill is useful
Provides specific implementation details for creating a Notion-style dashboard with real-time data integration and design standards.
What it needs
Requires notion account access. About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
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 (workspacename / Workspace / pagetitle) on the left, a <live-pill> on the right showing one of three states: Live · synced (green pulse), Syncing… (blue), Stale · <ago> (amber, after staleafterseconds). 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.kpicount. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/live-dashboard