New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Live Dashboard

by nexu-io in nexu-io/open-design

Notion-style team dashboard rendered as a Live Artifact. An agent skill from nexu-io/open-design.

Apache-2.0Auto-check passedProductivity & Automation

Install Live Dashboard

skills CLI
$ npx skills add nexu-io/open-design --skill live-dashboard -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nexu-io/open-design live-dashboard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/design-templates/live-dashboard .claude/skills/live-dashboard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
live-dashboard
GitHub stars
100k
Token cost
~2.1k tokens
SKILL.md length
805 words
Files
7 (incl. references, assets)
Skills in repo
245
Repo updated
First seen
Licence
Apache-2.0

At a glance

Notion-style team dashboard rendered as a Live Artifact. An agent skill from nexu-io/open-design.

  • Works in 5 steps: Read assets/template.html — start from… → Read references/layouts.md — pick… → Read references/components.md — copy… → …
  • Tasks that involve OKRs and executive reporting
  • SKILL.md covers Pre-flight (must complete…, Build order, Live behavior (the part that… and Self-critique (must run before…, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Live Dashboard is an agent skill from nexu-io/open-design. 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.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files and assets (for example `references/checklist.md`, `references/components.md` and `references/connectors.md`).

It sits in Productivity & Automation, covering OKRs and executive reporting and App automation through connectors. It works with Notion and Composio. The repository describes itself as: 🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve OKRs and executive reporting
  • Tasks that involve App automation through connectors

Example prompts

  • “/live-dashboard”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read assets/template.html — start from this skeleton verbatim. Do
  2. Read references/layouts.md — pick exactly one of the three
  3. Read references/components.md — copy KPI-card, sparkline, activity
  4. Read references/connectors.md — only when inputs.connector !== mock.
  5. Read references/checklist.md — every P0 row must be true before

What it can do on your machine

Read from SKILL.md and the folder at commit 17e2559. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Live Dashboard loads about 2.1k tokens when it runs, and up to ~7.4k if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 805 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~108
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nexu-io/open-design at commit 17e2559, republished under its Apache-2.0 licence (© nexu-io). 805 words, ~2,081 tokens.

Download SKILL.mdSave it as .claude/skills/live-dashboard/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
live-dashboard
description
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.
triggers
team dashboard, notion dashboard, live dashboard, ops dashboard, team workspace dashboard, 团队仪表盘, Notion 仪表盘, Live Artifact dashboard
od.mode
prototype
od.platform
desktop
od.scenario
operation
od.fidelity
high
od.capabilities_required
file_write, surgical_edit
od.example_prompt
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…

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.
Show full SKILL.md (408 more words)Show less

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.

© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references, assets) in design-templates/live-dashboard of nexu-io/open-design.

  • SKILL.md
  • assets/template.html
  • example.html
  • references/checklist.md
  • references/components.md
  • references/connectors.md
  • references/layouts.md

Open the folder on GitHubat commit 17e2559

Compare with similar skills

Live Dashboard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Live Dashboard compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Live Dashboard this skillnexu-io/open-design100k—~2.1kAutomated safety check: PassApache-2.0
Connect Apps with ComposioComposioHQ/awesome-claude-skills77k3 repos~557Automated safety check: PassNone
Composio Cloud Toolsquarqlabs/argus279—~543Automated safety check: PassApache-2.0
Setting Up RelayfileAgentWorkforce/relay872—~3.3kAutomated safety check: PassApache-2.0
Notion Automationdavepoon/buildwithclaude3.6k5 repos~2.2kAutomated safety check: PassMIT
ComposioComposioHQ/composio30k1 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • Connect Apps with Composio

    ComposioHQ/awesome-claude-skills

    Connects an agent to 1000+ external apps through the Composio Tool Router plugin, so it can actually send emails, create issues and post messages instead of only drafting them.

    77k GitHub starsUsed in 3 repos~557 tokens
    Productivity & AutomationAuto-check passed

  • Composio Cloud Tools

    quarqlabs/argus

    Routes requests to external SaaS apps such as GitHub, Gmail, Google Calendar, Slack, Notion and Linear through cloud tools, with safeguards on irreversible actions.

    279 GitHub stars~543 tokensUpdated 4 mo ago
    Productivity & AutomationAuto-check passed

  • Setting Up Relayfile

    AgentWorkforce/relay

    A skill your agent uses when an agent or human needs to set up relayfile end-to-end so agents can read and write provider files through a local mount.

    872 GitHub stars~3.3k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Notion Automation

    davepoon/buildwithclaude

    Automate Notion tasks via Rube MCP (Composio): pages, databases, blocks, comments, users.

    3.6k GitHub starsUsed in 5 repos~2.2k tokens
    Productivity & AutomationAuto-check passed

  • Composio

    ComposioHQ/composio

    Route and complete Composio work across Composio For You and Composio Platform.

    30k GitHub starsUsed in 1 repo~1.7k tokens
    Productivity & AutomationAuto-check passed

  • Integrations

    butterbase-ai/butterbase-skills

    Use BEFORE recommending or installing any third-party SaaS SDK for email (Resend, SendGrid, Postmark, Mailgun), SMS (Twilio), messaging (Slack), calendar (Google Calendar), CRM (HubSpot…

    534 GitHub stars~832 tokensUpdated 5 days ago
    Sales & SupportAuto-check passed

More from nexu-io/open-design

All 245 skills in this repo

  • Humanize PPT

    nexu-io/open-design

    Turns raw notes into a talk-ready slide outline with per-page image, diagram or video decisions, then checks the rendered deck against that outline.

    100k GitHub stars~4k tokensUpdated yesterday
    Auto-check passed

  • Last 30 Days Trend Research

    nexu-io/open-design

    Produces a cited Markdown briefing on recent community sentiment and social reaction to a topic, labeling every source it could not actually check.

    100k GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • OpenDesign Contribution Flow

    nexu-io/open-design

    Helps newcomers contribute to OpenDesign: ship a skill or design system, translate docs, fix docs or report a bug, ending in a pull request or issue.

    100k GitHub stars~3.5k tokensUpdated yesterday
    Auto-check: notes

  • Chat Motion Overlay Generator

    nexu-io/open-design

    Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.

    100k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Flowai Live Dashboard Template

    nexu-io/open-design

    Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…

    100k GitHub stars~865 tokensUpdated yesterday
    Auto-check passed

  • Hatch Pet

    nexu-io/open-design

    Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references.

    100k GitHub stars~6k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Live Dashboard

What does Live Dashboard do?

Notion-style team dashboard rendered as a Live Artifact. An agent skill from nexu-io/open-design. Live Dashboard is an agent skill from nexu-io/open-design. Notion-style team dashboard rendered as a Live Artifact.

When should I use Live Dashboard?

Live Dashboard fits situations like: tasks that involve OKRs and executive reporting; tasks that involve App automation through connectors.

How do I install Live Dashboard in Claude Code?

Run `npx skills add nexu-io/open-design --skill live-dashboard -a claude-code`. Or copy the skill folder (design-templates/live-dashboard in nexu-io/open-design) into .claude/skills/live-dashboard in your project. Claude Code loads it when a task matches its description.

How do I install Live Dashboard in Codex?

Run `npx skills add nexu-io/open-design --skill live-dashboard -a codex`. Or copy the skill folder (design-templates/live-dashboard in nexu-io/open-design) into .agents/skills/live-dashboard in your project. Codex loads it when a task matches its description.

Can I use Live Dashboard in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nexu-io/open-design --skill live-dashboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/live-dashboard, .gemini/skills/live-dashboard, .github/skills/live-dashboard and .opencode/skills/live-dashboard in your project.

What does Live Dashboard need to run?

SKILL.md names no scripts, command-line tools or credentials: Live Dashboard is instructions for the agent only.

Does Live Dashboard access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Live Dashboard safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Live Dashboard use?

Live Dashboard is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Live Dashboard use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.3k tokens, read only when the agent opens those files.

What are the alternatives to Live Dashboard?

Skills that share tags, products or a category with Live Dashboard: Connect Apps with Composio (ComposioHQ/awesome-claude-skills, 77k stars), Composio Cloud Tools (quarqlabs/argus, 279 stars), Setting Up Relayfile (AgentWorkforce/relay, 872 stars) and Notion Automation (davepoon/buildwithclaude, 3.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Live Dashboard?

nexu-io (a GitHub organization) maintains it in nexu-io/open-design, which has 100,280 GitHub stars. The repository holds 245 skills in this directory. The repository was last updated on October 10, 2026.

Source: nexu-io/open-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.