Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Dashboard Creator — measured AI agent skill | DecimalAI

mhattingpete/dashboard-creator

NewSkillScoreMaintained

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

Frontendby mhattingpete

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mhattingpete-dashboard-creator/SKILL.md

decimalai skills pull mhattingpete-dashboard-creator --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mhattingpete-dashboard-creator/SKILL.md https://app.decimal.ai/s/mhattingpete-dashboard-creator/SKILL.md

Raw file: /s/mhattingpete-dashboard-creator/SKILL.md ↗ · machine-readable summary at /s/mhattingpete-dashboard-creator.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 3h ago

Yes — +9% lift+10% tokens0% turns73% of whole cases pass with skill (16/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	3%	0%
case-03	✗→✓	▲ Improved	9%	0%
case-09	✗→✓	▲ Improved	40%	0%
case-11	✗→✓	▲ Improved	25%	0%
case-13	✓→✗	▼ Worse	9%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mhattingpete / claude-skills-marketplace

visual-documentation-plugin/skills/dashboard-creator/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1Bundled 2 files

Skill contents

references/

SKILL.md

Dashboard Creator

Create interactive HTML dashboards with KPI cards and charts.

When to Use

"Create dashboard for metrics]"
"Show KPI visualization"
"Generate performance dashboard"
"Make analytics dashboard with charts"

Components

KPI Cards: metric name, value, change %, trend icon
Charts: bar/pie/line using SVG or CSS
Progress Bars: completion indicators
Data Tables: tabular data display

HTML Structure

html
<!DOCTYPE html>
<html>
<head>
  <title>[Project] Dashboard</title>
  <style>
    body { font-family: system-ui; background: #f7fafc; }
    .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .kpi-value { font-size: 36px; font-weight: bold; }
    .trend-up { color: #48bb78; }
    .trend-down { color: #e53e3e; }
  </style>
</head>
<body>
  <h1>[Dashboard Name]</h1>
  <div class="grid">
    <!-- KPI cards -->
    <!-- Charts -->
    <!-- Progress bars -->
  </div>
</body>
</html>

KPI Card Pattern

html
<div class="kpi-card">
  <div class="kpi-label">Revenue</div>
  <div class="kpi-value">$124K</div>
  <div class="trend-up">↑ 12.5%</div>
</div>

Chart Pattern (SVG Bar Chart)

html
<svg viewBox="0 0 400 300">
  <rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
  <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
  <!-- bars for each data point -->
</svg>

Workflow

Extract metrics and data
Create KPI cards grid
Generate charts (bar/pie/line) as SVG
Add progress indicators
Write to [name]-dashboard.html

Use semantic colors: green (positive), red (negative), blue (neutral).

Want to see if mhattingpete/dashboard-creator would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.