Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Live Dashboard

nexu-io/open-design

  • 73 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

Helps with ai & agent building tasks during AI-assisted development.

About

live-dashboard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

  • live-dashboard
  • AI & Agent Building
  • AI-coding skill

Live Dashboard by the numbers

  • 73 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #5,582 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill live-dashboard

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs73
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

What it does

Helps with ai & agent building tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

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.

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10
AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.