# Data Dashboard Builder

Builds a local, data-backed dashboard with charts, tables and a sources panel.

- Repository: https://github.com/JimLiu/baoyu-design (5752 stars)
- Category: Data and ML
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add JimLiu/baoyu-design --skill claude-dashboard -g -a claude-code -y`
Codex: `npx skills add JimLiu/baoyu-design --skill claude-dashboard -g -a codex -y`
Cursor: `npx skills add JimLiu/baoyu-design --skill claude-dashboard -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baoyu-design --skill claude-dashboard -g -a gemini-cli -y`

## Description

Use this for a local, data-backed dashboard, metrics page, KPI tracker, scorecard, data visualization or recurring report that opens in the bundled live editor: a page or scroll story of charts, numbers and tables over datasets (a CSV/TSV/JSON file the user has, or data you gather and attach), with a Sources panel that shows where every number comes from. Read it when creating, filling, refreshing or revising one. You write the datasets, then the page as plain HTML, into the dashboard's own store with this skill's script. Not for a static HTML mockup or a picture of a dashboard: that is the baoyu-design skill.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Dashboard, the shared type

A dashboard is a page you write over **datasets** the type loads, attributes
and refreshes. Everything is a document in its own store, written with
`write-db`. `SKILL.md`, `artifact-type/` and `scripts/` are the type's own
files: leave them as they are.

What the person asks for is what you build; the defaults apply only to what
they left unsaid. Whatever the page's own code can draw or do is allowed: any
chart, control or interaction. A chart they named is the one you draw, by hand
where `d3` has no helper; if you draw another, say which and why.

## The calls

A dashboard is a folder, `<root>`: `designs/<slug>/` in the current project
unless the person names another (`<slug>`: the title in lowercase words joined
by `-`; a title not in Latin letters, such as a Chinese one, takes a short
English rendering of it: `x-account-analytics`). The first `write-db` or
`upload` creates it. One script, Node 22 or later with nothing to install,
does every call; below, `A` is `<this skill's folder>/scripts/artifact.mjs`.

The rest: https://github.com/JimLiu/baoyu-design/blob/HEAD/dsh-plugins/dsh-claude-dashboard/skills/claude-dashboard/SKILL.md