dashboard-creator
npx machina-cli add skill mhattingpete/claude-skills-marketplace/dashboard-creator --openclawFiles (1)
SKILL.md
1.9 KB
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
<!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
<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)
<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).
Source
git clone https://github.com/mhattingpete/claude-skills-marketplace/blob/main/visual-documentation-plugin/skills/dashboard-creator/SKILL.mdView on GitHub Overview
Dashboard Creator builds interactive HTML dashboards featuring KPI cards, bar/pie/line charts, progress indicators, and data tables. It outputs a ready-to-use [name]-dashboard.html and uses semantic colors for quick insights. This tool is ideal for monitoring interfaces and analytics displays that need clear metrics at a glance.
How This Skill Works
The skill extracts metrics, arranges KPI cards in a grid, and generates charts (bar, pie, line) as SVG. It then adds progress indicators and writes the result to [name]-dashboard.html using a simple HTML/CSS template with semantic colors (green for positive, red for negative, blue neutral).
When to Use It
- Create dashboard for [metrics]
- Show KPI visualization
- Generate performance dashboard
- Make analytics dashboard with charts
- Build monitoring interface dashboards
Quick Start
- Step 1: Gather metrics data and decide which KPIs and charts to display.
- Step 2: Create KPI cards grid and embed SVG charts (bar/pie/line) in an HTML template.
- Step 3: Save as [name]-dashboard.html and adjust styling for responsiveness.
Best Practices
- Define a minimal KPI grid that groups related metrics for clarity.
- Choose chart types that match the data (bar for categories, line for trends, pie for proportions).
- Use SVG-based charts to keep dependencies light and ensure scalability.
- Apply semantic colors: green for positive, red for negative, blue for neutral.
- Name the output file as [name]-dashboard.html and ensure responsive styling.
Example Use Cases
- E-commerce sales dashboard showing Revenue, Orders, and Conversion Rate with a weekly bar chart.
- SaaS product metrics dashboard tracking MRR, Churn Rate, and Active Users with a line chart of user growth.
- Marketing campaign dashboard displaying Clicks, Impressions, and CTR with a pie chart of channel mix.
- IT monitoring dashboard for Uptime, Latency, and Error Rate featuring SLA progress indicators.
- Project performance dashboard illustrating Task Completion, Velocity, and Burn-down with a stacked bar chart.
Frequently Asked Questions
Add this skill to your agents
