skills.rest
mhattingpete
mhattingpeteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dashboard-creator

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
One-click install
npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill dashboard-creator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Data & Analytics Skills→
forcedotcomforcedotcom
803

analytics-charts

Transform incoming data into Recharts-compatible payloads for AnalyticsChart rendering.

Official
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-test-export

Detect broken export and download controls on data-driven web pages.

Community
Advanced
Doyajin174Doyajin174
1

d3-viz

Build interactive D3.js data visualizations with charts and interactivity.

Community
Intermediate
JonathanMitchell1234JonathanMitchell1234

tableau-expert

Create advanced calculated fields and LOD expressions in Tableau.

Community
Advanced