Skip to content
Get packs

Live Team Dashboard

Builds a Notion-style team dashboard HTML page with KPIs, sparkline, activity feed and task table

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
7 files

What it does

When installed, the agent builds a single self-contained HTML dashboard for a team, styled like Notion, with headline numbers, a 7-day trend line, a live-looking activity feed and a task table. It is meant to be a working page rather than a static mockup: it can refresh on demand, shows a status pill for freshness, and is designed to pull data from Notion through a connector. Without a connector it uses built-in sample data so the page still displays.

Great for

  • Teams that want a quick internal ops or project status page styled like Notion
  • Designers prototyping a Notion-like dashboard for a client demo or screenshots
  • Developers who want a starting HTML template with refresh and stale-state behavior

Skip it if

  • Production reporting that must reflect real data: without a bound connector the page shows seeded mock numbers, which can be mistaken for real figures
  • Sensitive team data in shared previews: the connector setup involves Notion access, so review which workspace and permissions are granted before use

Try asking

  • “Build me a Notion-style team dashboard for Acme Studio with KPIs for total tasks, done this week, active members and docs in review.”
  • “Make a live ops dashboard for our workspace with a 7-day sparkline and a linked task table.”
  • “Create a team workspace dashboard with 6 KPIs and no activity feed, using a warm surface tone.”
Step-by-step guide: how to use Live Team DashboardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the Apache-2.0 licence and an attribution note.

    live-dashboard.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip live-dashboard.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip live-dashboard.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a workspace name and a clear list of KPIs so the agent can pick the right layout and labels.
  • Leave the connector on mock for first drafts, then bind Notion once the design is approved.
  • Review the generated connectors.json to confirm which Notion reads and events the page will request.

What's inside

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

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.