Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →mhattingpete/dashboard-creator
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations.
Passed 16 of 22 test cases with the skill, and 14 of 22 without it.
and 1 more in the full report
4 fixed12 passed either way4 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Can you generate a standalone HTML sales dashboard for our Q3 performance? We have key metrics like total revenue ($450K, up 15%), new customer count (120, down 4%), and churn rate (2.1%). Please include summary metric cards, visual charts showing monthly growth, and a progress bar toward our annual target.
| Checked | Without skill | With skill |
|---|---|---|
| The generated HTML uses inline SVG or pure CSS elements to render charts rather than external Canvas libraries like Chart.js. | Missed | Passed |
| Positive metric trends use green semantic styling and negative metric trends use red semantic styling. | Passed | Passed |
The instructions your model reads when the skill loads.
Create interactive HTML dashboards with KPI cards and charts.
<!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>
test cases passed, vs 14 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.