Skip to content
Back to skills

Make Dashboard

ASecurity

Turn data into a self-contained HTML dashboard beside its report, or a spec for the team's BI tool. Use when asked for a dashboard, chart or visual view, or when an answer is too multidimensional for prose.

  • 8 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added October 7, 2026
ai-agents

Security analysis

A100/100

Scanned October 7, 2026

npx -y skills add calven-ai/marketing-as-code --skill make-dashboard --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Make Dashboard?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Make Dashboard
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/calven-ai-make-dashboard/badge)](https://www.skillsdirectory.com/skills/calven-ai-make-dashboard)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: make-dashboard
description: Turn data into a self-contained HTML dashboard beside its report, or a spec for the team's BI tool. Use when asked for a dashboard, chart or visual view, or when an answer is too multidimensional for prose.
license: MIT
metadata:
  kind: workflow
  area: core
  needs: []
  optional: [warehouse-bi]
  writes: repo
  runs: person
---

# Make a dashboard

Dashboards here are single HTML files: inline CSS, an inlined `DATA` object,
and the tiny chart helper already inside the template. They open in any
browser with no build step, CDN, or platform dependency. That's the
contract; never break it by adding external references.

## Procedure

1. **Get the numbers right first.** Source everything from `data/` snapshots
   (pull fresh ones per AGENTS.md "Answering questions from data" if
   needed), interpreted through `data/ontology/`. A dashboard is a report, so
   the same "never invent a number" rule applies.
2. **Copy `reports/_templates/dashboard.html`** to the folder of the report
   it supports (`reports/qmr/<q>/`, `reports/recurring/<domain>/`, or
   `reports/adhoc/YYYY-MM-DD-<question>/`). A dashboard never lives alone;
   if there's no report yet, create one from `reports/_templates/report.md`.
3. **Fill it in**: title, date, the `DATA` object, and the render calls;
   the template documents its own helpers (`bigNumber`, `barChart`,
   `lineChart`, `table`) with examples. Apply `brand/tokens.json` colors if
   filled. Keep it to the few views that answer the question; a dashboard
   with twenty charts answers nothing. Then remove `data-example="replace"`
   from the `<html>` tag and the example line from the footer: the check
   refuses a dashboard that still carries the template's numbers.
4. **List sources**: the footer's data-sources line gets the exact snapshot
   paths used, same as a report's "Data used" section.

## BI mode

With a `warehouse-bi` integration wired (the Wired table in
`integrations/README.md`), also write a spec the team can build in its BI
tool: one section per dashboard in `memory/knowledge/dashboards.md`, created the first time and updated in place later.
Each section lists the metrics by their `data/ontology/metrics.md` names,
the filters (period, segment, channel), and for every metric the snapshot
and column it comes from today, so the warehouse model maps to the same
definitions. Never build in the BI tool itself: the spec is the proposal,
and a person builds it or approves it.

## Rules

- One file, no external requests: check you added no `<script src>`,
  `<link>`, or web-font references.
- Charts label their units and time ranges; deltas say what they're deltas
  against.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.