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
Decision gist · record as of 2026-07-25
Dashboard Creator builds interactive HTML dashboards with KPI cards, charts, and data visualizations. 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.
Use it when
- Yes.
- Dashboard Creator supports bar charts, pie charts, and line charts rendered as SVG graphics.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
mhattingpete/claude-skills-marketplace/dashboard-creator · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create interactive HTML dashboards with KPI cards and data visualizations”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Technical Doc Creator builds polished HTML documentation for APIs and systems, complete with endpoint references, code samples, and architecture diagrams. It structures content with getting started guides, request/response examples, and syntax-highlighted code blocks. Perfect for creating developer-facing documentation that's ready to share.
Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
This skill produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
This skill spawns three independent subagents to tackle problems from different angles—prioritizing simplicity, performance, or extensibility for code; top-down, bottom-up, or lateral thinking for design; or expert, pragmatic, or innovative perspectives for creative work. Each solution is scored against correctness, completeness, quality, clarity, and elegance, then the winner is returned with trade-off analysis and guidance on when alternatives might suit better.
Dashboard Builder generates a single, self-contained HTML file that combines KPI cards, interactive charts, and filterable data tables into a professional dashboard. Everything runs in the browser with no external dependencies or server setup required. Perfect for executive summaries, monitoring snapshots, and shareable data reports.
More skills build-dashboard (Apache-2.0) · Svg Visuals (GPL-3.0) · Interactive Dashboard Builder (unlicensed) · code-refactor (Apache-2.0) · code-transfer (Apache-2.0) · file-operations (Apache-2.0)