dashboard-creator
Automatically generates interactive HTML-based dashboards with KPI cards and data visualizations.
Install
mkdir -p .claude/skills/dashboard-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/24" && unzip -o skill.zip -d .claude/skills/dashboard-creator && rm skill.zipInstalls to .claude/skills/dashboard-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Generate KPI cards with trend icons and percentage changes
- →Construct SVG-based bar, pie, and line charts
- →Implement progress bars for completion tracking
- →Format tabular data for display
- →Assemble HTML dashboard structures with embedded CSS
How it works
The tool extracts metrics to populate predefined HTML structures and SVG chart patterns. It applies semantic color coding to represent positive, negative, and neutral data points.
Inputs & outputs
When to use dashboard-creator
- →Create a KPI dashboard
- →Visualize performance metrics
- →Generate progress indicators
- →Make an analytics dashboard UI
About this skill
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).
When not to use it
- →Creating non-dashboard web pages
- →Generating dynamic backend data processing scripts
Limitations
- →Output is restricted to static HTML files
- →Visualizations are limited to SVG and CSS-based representations
How it compares
This tool automates the manual coding of HTML structures and SVG elements for specific dashboard components like KPI cards and charts.
Compared to similar skills
dashboard-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| dashboard-creator (this skill) | 31 | 9mo | No flags | Beginner |
| d3-visualization | 7 | 4mo | No flags | Advanced |
| d3js-visualization | 7 | 2mo | Review | Intermediate |
| antv-l7 | 2 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mhattingpete
View all by mhattingpete →You might also like
d3-visualization
lyndonkl
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.
d3js-visualization
benchflow-ai
Build deterministic, verifiable data visualizations with D3.js (v6). Generate standalone HTML/SVG (and optional PNG) from local data files without external network dependencies. Use when tasks require charts, plots, axes/scales, legends, tooltips, or data-driven SVG output.
antv-l7
antvis
Comprehensive guide for AntV L7 geospatial visualization library. Use when users need to: (1) Create interactive maps with WebGL rendering (2) Visualize geographic data (points, lines, polygons, heatmaps) (3) Build location-based data dashboards (4) Add map layers, interactions, or animations (5) Process and display GeoJSON, CSV, or other spatial data (6) Integrate maps with AMap (GaodeMap), Mapbox, Maplibre, or standalone L7 Map (7) Optimize performance for large-scale geographic datasets
vchart-development-assistant
VisActor
VChart图表库专家助手，支持问题诊断、配置生成、图片/Figma设计稿还原等场景，基于结构化知识库提供精确的图表开发解决方案
anywidget-marimo
diegosouzapw
Toolkit for generating custom widgets from scratch for Marimo.
debug
hta218
Instrument web/web-app code with structured debug logging via a global variable (window.__debug_logs). Produces a clean JSON timeline for reproducing and diagnosing bugs. Use when user wants to debug a feature or track down a bug.