dashboard-creator
Dashboard Creator generates self-contained HTML dashboards featuring KPI metric cards with trend indicators, SVG-based bar/pie/line charts, and progress bars. Perfect for building performance monitoring interfaces and analytics displays from your data.
Dashboard Creator builds interactive HTML dashboards with KPI cards, charts, and data visualizations.
AI-generated summary based on this skill's SKILL.md
Install
mhattingpete/claude-skills-marketplace/dashboard-creator · repository language: HTML
git clone https://github.com/mhattingpete/claude-skills-marketplace
cp -r claude-skills-marketplace/visual-documentation-plugin/skills/dashboard-creator ~/.claude/skills/dashboard-creatorFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What can I create with dashboard-creator?
Dashboard Creator generates self-contained HTML dashboards with KPI metric cards, trend indicators, and SVG-based visualizations. You can build performance monitoring interfaces, analytics displays, and interactive dashboards featuring bar, pie, and line charts—all in a single HTML file ready to share or embed.
Can I generate HTML dashboard for metrics with dashboard-creator?
Yes. Dashboard Creator specializes in generating HTML dashboards for metrics. It produces complete, self-contained HTML files with KPI cards, data visualizations, progress bars, and trend tracking—no external dependencies required. Perfect for creating performance dashboards and analytics displays from your data.
What chart types does dashboard-creator support?
Dashboard Creator supports bar charts, pie charts, and line charts rendered as SVG graphics. These charts integrate seamlessly with KPI cards and progress indicators to create comprehensive performance monitoring interfaces and analytics visualizations within your HTML dashboard.
How does dashboard-creator handle KPI visualization?
Dashboard Creator displays KPIs through color-coded metric cards with trend indicators, allowing you to monitor business analytics at a glance. Trends are tracked visually, and KPIs can be combined with charts, progress bars, and tables to create complete monitoring dashboards for performance tracking.
Is dashboard-creator suitable for building monitoring interfaces?
Absolutely. Dashboard Creator excels at building monitoring interfaces with progress indicators, trend tracking, and real-time metric displays. The self-contained HTML output makes it ideal for creating responsive monitoring dashboards that work across devices without requiring backend infrastructure.
What license does dashboard-creator use?
Dashboard Creator is licensed under Apache-2.0, allowing you to freely use, modify, and distribute the tool and dashboards it creates, subject to the Apache License 2.0 terms.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```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"> <!--
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
visual-documentation-plugin/skills/dashboard-creator/SKILL.md
visual-documentation-plugin/skills/dashboard-creator/assets/templates/base_template.html
visual-documentation-plugin/skills/dashboard-creator/assets/templates/dashboard_components.html
visual-documentation-plugin/skills/dashboard-creator/references/design_patterns.md
visual-documentation-plugin/skills/dashboard-creator/references/svg_library.md