dashboard-creator

Solid

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.

AI & Automation 657 stars 91 forks Updated 3 days ago Apache-2.0

Install

View on GitHub

Quality Score: 90/100

Stars 20%
94
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
84
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 1. **KPI Cards**: metric name, value, change %, trend icon 2. **Charts**: bar/pie/line using SVG or CSS 3. **Progress Bars**: completion indicators 4. **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 1. Extract metrics and data 2. Create KPI card...

Details

Author
mhattingpete
Repository
mhattingpete/claude-skills-marketplace
Created
9 months ago
Last Updated
3 days ago
Language
HTML
License
Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

analytics-metrics

Build data visualization and analytics dashboards. Use when creating charts, KPI displays, metrics dashboards, or data visualization components. Triggers on analytics, dashboard, charts, metrics, KPI, data visualization, Recharts.

2 Updated yesterday
Makiya1202
Web & Frontend Featured

dashboard

固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图

7,985 Updated 2 weeks ago
nexu-io
AI & Automation Featured

creating-data-visualizations

Create analytical charts and plots from existing data. Use for exploratory or reporting visuals such as bars, lines, scatters, and dashboards; not for publication-grade scientific figures or AI-generated schematics.

2,502 Updated 6 days ago
foryourhealth111-pixel