Skills

Data Dashboards

Build a fast, good-looking page: a data dashboard, or any page made with show_html (a...

Install

npx skills add milind-soni/OpenMausBot --skill data-dashboards -g -a claude-code -y
Category
Design
Updated
3d ago
License
Apache-2.0
Context cost
Mediumabout 2,250 tokens
Runs scripts
No, instructions only

What it does

Build a fast, good-looking page: a data dashboard, or any page made with show_html (a landing page, a pricing page, a tool), in this chat or at a public link with publish_page. Use when the person asks for a dashboard, charts or KPIs on a page, a page or mock-up to look at, or a data page to share or keep up to date.

Data dashboards and pages

A page made with show_html shows in the chat as one card. The person watches it appear, steps back through its versions, opens it full screen, shares it at a public link, and points at a part to change: their next message then says what they pointed at (a tag, its text, a CSS selector and a bit of its HTML). Change exactly that with show_html and the page's app_id; the same card refreshes.

Pick the right home

The person wantsBuild
A quick answer or one chartNo page. Use the Data tools (data_sql, data_show) or a markdown table.
A small summary to look at hereA chat page (show_html) with pre-aggregated rows embedded as CSV.
To explore bigger data, or a link to shareQuery with the Data tools, export the slice with data_export (format: "parquet") into a folder beside index.html, show the folder in the chat with show_html path, and publish_page it when the person wants a link: the same card gains it.
"Keep it up to date"The shared page, plus a schedule (trigger, action=create, when=schedule) whose instructions re-run the export, set CONFIG.updated, and publish the same folder again. Publishing the same path keeps the same link.

Publish only when the person asks to share. A published page is public: never put secrets, personal details or rows they didn't ask to share in it.

Start from the template

dashboard.html sits next to this guide, in the folder named by this skill's root. It is tested in the chat sandbox and on published pages, in light and dark, at phone and desktop widths. Copy it to your working folder as index.html (a small chat page sends its text as html; a folder page is shown with path) and change only what the data needs:

Read the whole SKILL.md on GitHub

More in Design