Creates interactive marketing dashboards using HTML, CSS, and JavaScript for real-time data visualization of KPIs, campaign performance, and business metrics. Use this skill whenever someone asks to build a dashboard, create a data visualization, design metric displays, build a reporting interface, or create any interactive display of marketing performance data.
This skill creates interactive, visually stunning marketing dashboards using HTML/CSS/JS. Dashboards combine real-time data visualization with actionable metrics to give stakeholders an at-a-glance view of marketing performance.
Keywords: dashboard, data visualization, metrics display, KPI dashboard, analytics dashboard, reporting dashboard, charts, graphs, interactive reports
A stakeholder should understand the overall status within 5 seconds of seeing the dashboard. Use:
TOP: Hero KPIs (3-5 large numbers)
└── Overall health at a glance
MIDDLE: Trend Charts (2-3 visualizations)
└── How are we trending over time?
BOTTOM: Detail Tables (sortable, filterable)
└── Deep-dive for those who want specifics
| Element | Content |
|---|---|
| Row 1 | 4 hero KPI cards (Revenue, Leads, CAC, ROAS) |
| Row 2 | Revenue trend line chart + Lead trend bar chart |
| Row 3 | Channel performance comparison table |
| Element | Content |
|---|---|
| Row 1 | Campaign status, spend, conversions, CPA |
| Row 2 | Daily spend + conversion trend chart |
| Row 3 | Ad group/set performance table |
| Row 4 | Creative performance comparison |
| Element | Content |
|---|---|
| Row 1 | Organic traffic, keyword rankings, backlinks, indexed pages |
| Row 2 | Traffic trend + keyword position trend |
| Row 3 | Top pages by traffic + Top keywords table |
<div class="kpi-card">
<span class="kpi-label">Cost Per Lead</span>
<span class="kpi-value">$34.50</span>
<span class="kpi-change positive">↓ 12% vs last month</span>
<span class="kpi-target">Target: $40</span>
</div>
:root {
/* Status Colors */
--status-good: #10B981;
--status-warning: #F59E0B;
--status-danger: #EF4444;
/* Chart Colors */
--chart-primary: #6366F1;
--chart-secondary: #8B5CF6;
--chart-tertiary: #EC4899;
--chart-quaternary: #14B8A6;
/* Background */
--bg-primary: #0F172A;
--bg-card: #1E293B;
--bg-hover: #334155;
/* Text */
--text-primary: #F8FAFC;
--text-secondary: #94A3B8;
--text-muted: #64748B;
/* Spacing */
--gap: 1.5rem;
--radius: 12px;
}
const dashboardData = {
period: "March 2026",
kpis: {
totalLeads: { value: 245, change: 12, target: 200 },
totalSpend: { value: 8500, change: -5, target: 10000 },
costPerLead: { value: 34.69, change: -15, target: 50 },
roas: { value: 3.2, change: 8, target: 2.5 }
},
channels: [
{ name: "Google Ads", spend: 4000, leads: 120, cpa: 33.33, roas: 3.5 },
{ name: "Meta Ads", spend: 3000, leads: 85, cpa: 35.29, roas: 2.8 },
{ name: "Email", spend: 500, leads: 30, cpa: 16.67, roas: 8.0 },
{ name: "Organic", spend: 1000, leads: 10, cpa: 100, roas: 1.5 }
]
};
// Fetch from Google Sheets, Airtable, or custom API
async function fetchDashboardData() {
const response = await fetch('API_ENDPOINT');
const data = await response.json();
updateDashboard(data);
}
| Feature | Priority | Description |
|---|---|---|
| KPI hero cards | Must have | Large numbers with change indicators |
| Trend charts | Must have | Line/bar charts showing time series |
| Period comparison | Must have | This period vs. last period |
| Status indicators | Must have | Color-coded health signals |
| Data tables | Should have | Sortable, detailed breakdown |
| Filters | Should have | Date range, channel, campaign |
| Export | Nice to have | Download as PDF or CSV |
| Auto-refresh | Nice to have | Live data updates |
| Dark/light mode | Nice to have | User preference |
| Annotations | Nice to have | Mark events on timeline charts |
# Dashboard: [Dashboard Name]
## Specifications
- **Audience**: [Who uses this dashboard]
- **Data Sources**: [Where data comes from]
- **Update Frequency**: [Real-time / Daily / Weekly / Monthly]
- **KPIs Displayed**: [List of metrics]
## Layout Design
[Visual description or wireframe]
## Complete Code
[Full HTML/CSS/JS implementation]
## Data Structure
[JSON schema for dashboard data]
## Usage Instructions
[How to update data, customize, deploy]
performance-reporter skill for the data analysis that goes alongside the dashboard.