---

name: claude-dashboard 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." license: "Mixed. The skill text, references and editors adapted from Anthropic's claude.ai Artifact types stay Anthropic's and are not MIT-licensed; the local tooling is MIT. Complete terms in NOTICE.md: https://github.com/JimLiu/baoyu-design/blob/main/NOTICE.md"

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.

| Command | Does | |---|---| | node $A write-db <root> <batch.json \| -> | Writes documents: set, update, delete. All or nothing. | | node $A read-db <root> [<collection>[/<doc_id>]] [--text] | Lists every document, a collection's, or one (--text prints its text raw). | | node $A upload <root> <file> [--name n] | Attaches a CSV, TSV or JSON file: {"url": "/_blob/<id>", "bytes", "contentType", …}. | | node $A delete-asset <root> <url \| id> | Removes an attached file no document names any more. | | node $A check <root> | Checks the documents, the page's files, and that each dataset mark's data-where/data-row finds its rows. Exit 1 while problems > 0. | | node $A open <root> [--port n] [--lan] | Starts the editor at 127.0.0.1:4740 (the next free port up when 4740 is taken; --port n starts from n, --port 0 takes any) in the background and returns {"url", "pid", "stop", …}; url is the dashboard's own page; its path, /dashboard/<id>/, stays the same from one start to the next (/ goes there). Run again, it reuses the one running. --lan: also on the local network (see Sharing). --agent-hook "<command>": see Comments. | | node $A serve <root> [--port n] [--lan] / stop <root> | The same server in the foreground / stops the background one. | | node $A share <root> | Opens it to the local network and prints a link per role; --disable / --enable / --reset <role>, --role <guest>=<role>, --off. See Sharing. | | node $A comments <root> [--all] / --wait | The comments people left on the page / waits for one they send you. See Comments. | | node $A comment-reply <root> <id> <text\|-> / comment-resolve <root> <id> | Answers one (--resolve closes it too) / closes one (--reopen). | | node $A archive <root> [--out file.zip\|dir] | The whole folder, history and comments too, as one zip beside it (--out: another file or folder), to back it up, move it to another computer or send it to someone: {file, files, bytes, open}. Unzipped anywhere, open carries on. The owner's Download folder button in the page does the same; the server's own files and the share links stay out. |

• A batch is a JSON array (or {"writes": [...]}) of {"op": "set" | "update" | "delete", "path": "<collection>/<doc_id>", "data": {...}} (collection and doc_id in place of path work too; file_path, a JSON file, in place of data). Up to 50 writes and 1 MB, each document once; every write is checked before any is written. - reads the batch from stdin. From a shell heredoc, quote its word (<<'EOF'): unquoted, the shell expands $file and any other $ or backtick in the batch. Or write the batch to a file and pass its path.
• A file's text without escaping: {"$file": "<path>"} anywhere in data becomes that file's text, so the page is {"op": "set", "path": "files/index.html", "data": {"text": {"$file": "designs/<slug>/src/index.html"}}}. Paths are relative to the current directory. Keep your working copy in <root>/src/; the store is what the page shows (read-db <root> files/index.html --text prints it).
• update merges fields at any depth; null (or {"__delete__": true}) removes a key; an array or a value replaces. set writes the whole document; delete removes it.
• On disk: <root>/db/<collection>/<doc_id>.json, one JSON file a document (db/dash/meta.json, db/datasets/<id>.json, db/files/index.html.json); attached files at <root>/_blobs/<id> (id the first 32 hex of the file's sha256), each with <id>.json beside it (name, type, size); .artifact-server.json while the editor runs and its log .artifact-server.log (it stays after stop): leave both; so is comments.json (the comments, see Comments), which only the comment commands change. db/data/users/local/runs.json is the page's own (The runs document; data/users/me in a path reads as data/users/local here).
• The open editor watches db/: a write, by these commands or by hand, shows on the page within a moment, with no reload; what the page writes lands in db/.
• A refused call prints {"error": "<CODE>", "message": "…"} and exits 2; nothing was written.

Reading the references locally — where this file says to read artifact-type/reference/<name>.md, read <this skill's folder>/artifact-type/reference/<name>.md. They are the type's own, word for word, so they name claude.ai's calls: write_db (db_op: "batch") is write-db, read_db is read-db (collection data/users/me, doc runs is read-db <root> data/users/me/runs; doc check is what check <root> shows as pageCheck), upload_asset is upload, delete_asset is delete-asset, ArtifactComments reply / resolve is comment-reply / comment-resolve. What they say of live queries, connectors, loaders, certified queries, sharing, request and lastAttempt, routines, drafts, the voice that reads a page aloud and the view context doesn't apply here.

Not here: connectors (so no live query), the view context, other readers and their access, routines, drafts and Remix, a voice to read the page aloud (data-dash-read stays unset), publishing (the folder is the dashboard), and the Anthropic fonts (--font-anthropic-sans and --font-anthropic-serif fall back to system faces).

The documents

Paths are collection/doc_id. Dataset ids are [A-Za-z0-9_-], 1–64 characters; a file's id is its name (index.html, no folders). The store refuses any document over 256 KB. If write-db refuses a batch, its message names the write and why: fix that one; don't retry it unchanged.

dash/meta — {title}

What the user calls it, not "Dashboard". Write it first (first in the batch). A new title later changes only this; the folder keeps its name.

datasets/<id> — where numbers come from

{title, description?, source, updated?, schedule?, staleAfterHours?, fixed?}. title: a short name that stands alone in a list of sources, two to five words, ~30 characters ("Signups vs quarter target", not "To target"). description: a sentence on what this source is. A file's ends with where its rows came from ("Exported from the shop admin on Oct 28.", "From the 2025 annual report, p. 14."). A file over 8 MB is refused. The attached files are plain files in the folder (_blobs/): anyone given the folder can read them; say so once when you attach one.

Every dataset here is an attached file: the local editor has no connectors, so a live query (kind: "query") never loads, and check refuses one. Data that changes over time is gathered again when the person asks for it to be refreshed (Changing and refreshing). Get the rows yourself — the person's file, an export, a query you run with your own tools, figures you gathered and can cite — and save them as CSV or JSON: only the columns and rows the page needs, aggregated where you can.

An attached file — source: {kind: "file", url, name, format?}: CSV, TSV or JSON up to 8 MB. upload it; url is the reply's url as it came (/_blob/<id>; an external one isn't read), name the file's own, format ("csv", "tsv", "json") only when the extension doesn't say. JSON is an array of row objects, or one under rows/data/results; a CSV's first row names the columns. Cells arrive as text, a nested object as JSON: convert (Number(x), day.slice(0, 10), JSON.parse) first. A date not in ISO form (Thu, Oct 29, 2026) is parsed as UTC, d3.utcParse('%a, %b %d, %Y')(day) with the format fitted to the cells, never new Date(day): that is local midnight, which d3.utcFormat shows as the day before east of UTC.

• updated: {at, by} on every file write: at the ISO time now, by who (the person's name, else your own); check counts it missing as a problem, and the page would show a warning.
• A file that stays current: schedule (in words, how it is refreshed and how often) and staleAfterHours (about twice the cadence), past which it shows as stale.
• fixed: true when the data should stay as it is (a period that has ended, sent by someone else, they said so).

files/<name> — {text}, the page

The page is files/index.html (a <script src> or <link href> naming another files/<name> loads it). Any one file over 256 KB is refused with an error. The page goes in a <div id="dash-root"> (the type's: don't write one) in the dashboard's own document, below its toolbar and inside its page gutter: style and select your own classes: body, html or a bare tag name would restyle the dashboard around the page. No network, modules or React: scripts run in order once the page is in place, each in its own scope (what two share goes on window). For charts, d3 v7 is the global d3: helpers for common tasks. Where it lacks something, the page's own code does it.

Every figure, chart and table comes from a dataset: no numbers in markup, no arrays of values in a script (a fixed reference the user chose, like a goal line, is a constant, unmarked). The HTML holds a placeholder (—) marked data-source="<id>"; a script fills it.

Marking — mark the smallest element that shows a value: data-source

• data-field, and data-where="col=value" (or data-row) when it comes from one row; anything computed (a share, a delta, a total) is a dash.calc (it can return rows), marked with its id as data-source plus data-field/data-where for one cell. A mark whose value differs from the data, or that matches no row, is reported back to you: check finds a dataset mark that matches no row; the rest the open page finds when it runs (the runs document). data-field names a column, data-where the rows whose cells are exactly those values (a=1&b=2, written a=1&b=2 in HTML; percent-encode &, = and % in a name or a value), data-row a 0-based row. A chart or its legend wholly from one dataset takes data-source alone (several ids space-separated), once, on