dashboard-creator

Name: dashboard-creator
Availability: InStock
Author: mhattingpete

Generate HTML dashboards with KPI cards, SVG charts, and data tables.

657|94|Updated Oct 17, 2025

Search Tags:#data visualization #charts #HTML #metrics #dashboard #KPI #SVG

Ready to run

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill dashboard-creator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dashboard-creator
Source: https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/dashboard-creator
Command: npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill dashboard-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Creating clear, professional dashboards with key performance indicators (KPIs) and data visualizations can be complex and time-consuming. This Skill automates the generation of stunning, interactive HTML dashboards, allowing you to visualize your data and metrics effortlessly.

Core Features & Use Cases

Dynamic Dashboard Generation: Creates responsive HTML dashboards using SVG for charts.
Rich Components: Includes KPI metric cards, bar charts, pie/donut charts, line charts, and progress indicators.
Data Visualization: Uses a semantic color system and clear layouts for easy data interpretation.
Use Case: Provide your website analytics data (visitors, page views, bounce rate) and this Skill will generate a beautiful, interactive dashboard with metric cards and trend charts.

Quick Start

Example: Request a website analytics dashboard

User: "Create a dashboard for website analytics with:

- Total Visitors: 12,450

- Page Views: 45,230

- Bounce Rate: 32%

- Avg Session: 4:32

Include a line chart for traffic over time and a pie chart for traffic sources."

Output will be a complete HTML/SVG dashboard.

Frequently Asked Questions about dashboard-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create an interactive dashboard to display KPI metrics and charts?▼

This Skill generates a complete HTML dashboard with KPI metric cards, SVG charts (bar, pie, line), and data tables. Provide your metrics and data, and it outputs a responsive, styled dashboard file ready to view in any browser.

Can I visualize multiple chart types in a single dashboard?▼

Yes. The Skill combines bar charts, pie/donut charts, line charts, and progress indicators alongside KPI cards in one HTML dashboard, letting you display different data dimensions simultaneously.

What data format do I need to provide for the dashboard?▼

Describe your KPI values, metric labels, and chart data (visitors, page views, percentages, time-series points). The Skill accepts structured input and converts it into a formatted HTML/SVG dashboard with no additional preprocessing required.

How do I embed the generated dashboard on my website?▼

The Skill outputs a standalone HTML file with embedded SVG and CSS. You can open it directly in a browser, host it on a web server, or embed it in another page as an iframe or component.

Does the dashboard work without external dependencies or libraries?▼

The generated dashboard uses only HTML, CSS, and SVG—no external JavaScript frameworks or CDN dependencies required. It's self-contained and works immediately in any modern browser.

What types of data visualization problems does this Skill solve?▼

Website analytics tracking, sales performance dashboards, KPI monitoring, real-time metrics display, and progress tracking. Use it whenever you need to turn raw metrics into visual, professional dashboards.