{"id":"2cc08d70-2a2a-4639-bc7d-53326cf4c059","shortId":"cbu8tM","kind":"skill","title":"live-dashboard","tagline":"Notion-style team dashboard rendered as a Live Artifact. A single-page,\nself-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time\nactivity feed and a linked-database task table — wired to Notion via the\nComposio connector catalog. Refreshes on demand and when the ar","description":"# Live Dashboard\n\nYou are a senior product-designer-engineer building a **Live Artifact** —\nan HTML page that behaves like a working dashboard, not a mockup. Your\noutput ships, not only renders.\n\n## Pre-flight (must complete before emitting any HTML)\n\n1. `Read assets/template.html` — start from this skeleton verbatim. Do\n   not rebuild the shell from scratch. Override only what the user's\n   brief or the active DESIGN.md require.\n2. `Read references/layouts.md` — pick exactly **one** of the three\n   documented layouts (`A · classic dashboard`, `B · kanban-flavored`,\n   `C · KPI-only hero`). State your choice in your reply.\n3. `Read references/components.md` — copy KPI-card, sparkline, activity\n   row, and database row markup verbatim, then re-skin per the active\n   DESIGN.md. Do not invent new component shapes.\n4. `Read references/connectors.md` — only when `inputs.connector !== mock`.\n   Emit a sibling `connectors.json` listing every event the artifact\n   subscribes to and every read endpoint it polls.\n5. `Read references/checklist.md` — every P0 row must be true before\n   you emit `index.html`. Quote each P0 row inline in your reply with\n   `[x]` or `[ ]`. Do not emit while any P0 is unchecked.\n\n## Build order\n\n1. **Lock visual direction** from the active `DESIGN.md`. Display face\n   should be the system / sans face Notion-leaning systems use (SF Pro,\n   Inter as body, **never Inter Display as a hero face**). Body 14/22.\n2. **Topbar**: breadcrumb (`workspace_name / Workspace / page_title`) on\n   the left, a `<live-pill>` on the right showing one of three states:\n   `Live · synced` (green pulse), `Syncing…` (blue), `Stale · <ago>`\n   (amber, after `stale_after_seconds`).\n3. **Page header**: a Notion `page-emoji` (a single, semantically\n   relevant emoji — never a generic 🚀 ✨ 🔥), a `page-title` at 40px\n   weight 700 letter-spacing -0.01em, a meta row with last-edited-by +\n   \"Last refreshed <timeAgo>\" + the auto-toggle button + the Refresh\n   button.\n4. **Callout** explaining the Live Artifact contract — pulled-from-where,\n   refresh-when. One line. No marketing language.\n5. **KPI grid**: respect `inputs.kpi_count`. 1px hairline grid, no\n   shadows, no rounded internal cards. Numbers `font-variant-numeric:\n   tabular-nums`, weight 600, letter-spacing -0.01em. Each KPI gets a\n   small grey delta line (`↑ 6 vs last week`).\n6. **Two-column block**: a sparkline card (SVG, hand-rolled, no chart\n   library) + the activity feed card. Sparkline shows a 7-day series\n   with subtle accent fill at 10% alpha and a 2px stroke.\n7. **Linked database**: a Notion-style table — `db-head` (uppercase\n   12px label-grey) + `db-row` rows. Status pills use the Notion\n   five-color set (Done / In progress / Blocked / In review / To do).\n   Person chips use a colored 18px round avatar with two-letter\n   initials.\n8. **Footer**: source attribution (`Source: Notion API · workspace\n   <workspace_name>`) and connector slug.\n\n## Live behavior (the part that earns the \"Live\" in Live Artifact)\n\nWire these in a single `<script>` block at the bottom of `index.html`:\n\n- `init()` runs `refresh({silent: true})` 600ms after mount — the\n  \"refresh on open\" semantic.\n- The Refresh button calls `refresh({silent: false})`. Show a tween on\n  every numeric KPI between old and new values, flash the changed row\n  in the table for 1.4s, prepend a fresh activity row with a left-pad\n  highlight for 2s, and surface a bottom toast describing the diff. The\n  tween/flash hooks are already wired in `assets/template.html`\n  (`tweenText()` + `.flash` + `.db-row.changed` + `.feed-row.new`); pass\n  the `prev` snapshot into `renderKpi(prev)` and the changed-row id into\n  `renderRows(changedId)` and the tween/flash fall out of the existing\n  CSS. Do not rebuild this from scratch.\n- `setInterval(refresh, refresh_seconds * 1000)` when Auto is on.\n- After `stale_after_seconds` without a successful refresh, swap the\n  pill to amber `Stale · <ago>`.\n- Real connector mode: `POST /api/od/connectors/poll` with a JSON body\n  `{ project, read }`, where `project` is the id from\n  `<meta name=\"od:project\">` and `read` is one of the `bindings[*].reads[].id`\n  values declared in `connectors.json`. The OD daemon resolves the\n  primary binding, the auth source, and the live provider call\n  server-side; the artifact never sees raw provider URLs or tokens. See\n  `references/connectors.md` for the wire shape and the daemon\n  resolution order. On error, fall back to the seeded mock so the\n  artifact never appears broken — surface the error via a small grey\n  hint in the footer, never a red banner.\n\n## Self-critique (must run before emitting)\n\nScore the artifact on the five dimensions inherited from `skills/critique/`:\n**Philosophy · Hierarchy · Detail · Function · Innovation**.\n\nIf `Philosophy < 4` (\"looks AI-generated\"), iterate on type and palette\nbefore emitting. Quote the offending element in your reply and explain\nthe fix. Do not emit if any dimension scores below 3.\n\n## Hard nos (anti-AI-slop)\n\n- No purple→pink gradient header.\n- No emoji icon strip across the top of the page.\n- No rounded card with a 4px left-border accent.\n- No \"10× faster\" / \"infinite\" / \"join 50,000+\" copy unless the user\n  literally provided that number.\n- No glassmorphism / backdrop-blur on KPI cards.\n- No colored progress bars under KPI numbers; the delta line is enough.\n- Inter is body-only. SF Pro Display is fine for the page title;\n  Fraunces / GT Sectra is acceptable for editorial DESIGN.md variants.\n\n## Output contract\n\n- `index.html` — single self-contained file, no external CSS / JS\n  imports beyond a system font stack and a single OD `<live-counter>`\n  custom element.\n- `connectors.json` — when `inputs.connector !== mock`. See\n  `references/connectors.md` for the schema.\n- Both files in the project cwd. Do not write anywhere else.","tags":["live","dashboard","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-live-dashboard","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/live-dashboard","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (5,851 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:25.144Z","embedding":null,"createdAt":"2026-05-07T12:53:02.720Z","updatedAt":"2026-05-11T06:52:25.144Z","lastSeenAt":"2026-05-11T06:52:25.144Z","tsv":"'-0.01':335,402 '1':98,241 '10':446 '12px':464 '14/22':275 '18px':494 '1px':380 '2':125,276 '2px':450 '3':154,308 '4':183,355 '40px':329 '5':207,374 '6':412,416 '600':398 '7':26,438,452 '700':331 '8':502 'accent':443 'activ':33,122,162,175,247,432 'alpha':447 'amber':303 'api':508 'ar':56 'artifact':13,70,198,360,523 'assets/template.html':100 'attribut':505 'auto':349 'auto-toggl':348 'avatar':496 'b':139 'behav':75 'behavior':514 'block':420,484 'blue':301 'bodi':266,274 'breadcrumb':278 'brief':119 'build':67,239 'button':351,354 'c':143 'callout':356 'card':160,388,423,434 'catalog':49 'chart':429 'chip':490 'choic':150 'classic':137 'color':479,493 'column':419 'complet':93 'compon':181 'composio':47 'connector':48,511 'connectors.json':193 'contain':20 'contract':361 'copi':157 'count':379 'dashboard':3,8,22,58,79,138 'databas':39,165,454 'day':27,439 'db':461,469 'db-head':460 'db-row':468 'delta':410 'demand':52 'design':65 'design.md':123,176,248 'direct':244 'display':249,269 'document':134 'done':481 'earn':518 'edit':343 'em':336,403 'emit':95,190,218,233 'emoji':315,320 'endpoint':204 'engin':66 'event':196 'everi':195,202,210 'exact':129 'explain':357 'face':250,256,273 'feed':34,433 'fill':444 'five':478 'five-color':477 'flavor':142 'flight':91 'font':391 'font-variant-numer':390 'footer':503 'generic':323 'get':406 'green':298 'grey':409,467 'grid':376,382 'hairlin':381 'hand':426 'hand-rol':425 'head':462 'header':310 'hero':147,272 'html':21,72,97 'index.html':219 'initi':501 'inlin':224 'inputs.connector':188 'inputs.kpi':378 'inter':264,268 'intern':387 'invent':179 'kanban':141 'kanban-flavor':140 'kpi':145,159,375,405 'kpi-card':158 'kpi-on':144 'kpis':24 'label':466 'label-grey':465 'languag':373 'last':342,345,414 'last-edited-bi':341 'layout':135 'lean':259 'left':286 'letter':333,400,500 'letter-spac':332,399 'librari':430 'like':76 'line':370,411 'link':38,453 'linked-databas':37 'list':194 'live':2,12,57,69,296,359,513,520,522 'live-dashboard':1 'lock':242 'market':372 'markup':167 'meta':338 'mock':189 'mockup':82 'must':92,213 'name':280 'never':267,321 'new':180 'notion':5,44,258,312,457,476,507 'notion-lean':257 'notion-styl':4,456 'num':396 'number':389 'numer':393 'one':130,292,369 'order':240 'output':84 'overrid':113 'p0':211,222,236 'page':17,73,282,309,314,326 'page-emoji':313 'page-titl':325 'part':516 'per':173 'person':489 'pick':128 'pill':473 'poll':206 'pre':90 'pre-flight':89 'pro':263 'product':64 'product-designer-engin':63 'progress':483 'pull':363 'pulled-from-wher':362 'puls':299 'quot':220 're':171 're-skin':170 'read':99,126,155,184,203,208 'real':31 'real-tim':30 'rebuild':108 'references/checklist.md':209 'references/components.md':156 'references/connectors.md':185 'references/layouts.md':127 'refresh':50,346,353,367 'refresh-when':366 'relev':319 'render':9,88 'repli':153,227 'requir':124 'respect':377 'review':486 'right':290 'roll':427 'round':386,495 'row':163,166,212,223,339,470,471 'san':255 'scratch':112 'second':307 'self':19 'self-contain':18 'semant':318 'senior':62 'seri':440 'set':480 'sf':262 'shadow':384 'shape':182 'shell':110 'ship':85 'show':291,436 'sibl':192 'singl':16,317,528 'single-pag':15 'skeleton':104 'skill' 'skill-live-dashboard' 'skin':172 'slug':512 'small':408 'sourc':504,506 'source-nexu-io' 'space':334,401 'sparklin':28,161,422,435 'stale':302,305 'start':101 'state':148,295 'status':472 'stroke':451 'style':6,458 'subscrib':199 'subtl':442 'svg':424 'sync':297,300 'system':254,260 'tabl':41,459 'tabular':395 'tabular-num':394 'task':40 'team':7 'three':133,294 'time':32 'titl':283,327 'toggl':350 'topbar':277 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'true':215 'two':418,499 'two-column':417 'two-lett':498 'uncheck':238 'uppercas':463 'use':261,474,491 'user':117 'variant':392 'verbatim':105,168 'via':45 'visual':243 'vs':413 'week':415 'weight':330,397 'wire':42,524 'work':78 'workspac':279,281,509 'x':229","prices":[{"id":"b868b1eb-7cf0-4d92-934d-393b55a3446a","listingId":"2cc08d70-2a2a-4639-bc7d-53326cf4c059","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-07T12:53:02.720Z"}],"sources":[{"listingId":"2cc08d70-2a2a-4639-bc7d-53326cf4c059","source":"github","sourceId":"nexu-io/open-design/live-dashboard","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/live-dashboard","isPrimary":false,"firstSeenAt":"2026-05-07T12:53:02.720Z","lastSeenAt":"2026-05-11T06:52:25.144Z"}],"details":{"listingId":"2cc08d70-2a2a-4639-bc7d-53326cf4c059","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"live-dashboard","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"3f015c4bb9ea6277c6d2f99609ebd272730aa6c5","skill_md_path":"skills/live-dashboard/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/live-dashboard"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"live-dashboard","description":"Notion-style team dashboard rendered as a Live Artifact. A single-page,\nself-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time\nactivity feed and a linked-database task table — wired to Notion via the\nComposio connector catalog. Refreshes on demand and when the artifact\nis opened. Falls back to seeded mock data when no connector is bound,\nso it works offline / in screenshots / in the picker preview."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/live-dashboard"},"updatedAt":"2026-05-11T06:52:25.144Z"}}