Are the generated dashboards mobile-friendly?

Yes, the layout uses a responsive grid system and system-ui fonts, ensuring the visualizations look great on both desktop monitors and mobile devices.

Can I customize the look of the generated dashboards?

Yes, the skill uses a clean, CSS-based approach with semantic variables that can be easily modified or extended to match specific brand guidelines.

How do I trigger the dashboard creation process?

Simply ask Claude to 'create a dashboard for my metrics' or 'generate a performance visualization,' and it will extract relevant data and build the HTML file automatically.

Does this skill require external libraries like D3.js or Chart.js?

No, the Dashboard Creator generates native HTML and inline SVG charts, ensuring the dashboards are standalone and require no external dependencies or CDNs.

What types of visualizations are supported?

The skill supports KPI summary cards with trend icons, SVG-based bar and line charts, progress indicators, and formatted data tables.

Interactive Dashboard Creator

Name: Interactive Dashboard Creator
Author: mhattingpete

bymhattingpete

•

126

•

Analytics & Monitoring

Generates professional HTML dashboards featuring KPI cards, SVG charts, and interactive data visualizations for monitoring project metrics.

The Dashboard Creator skill empowers Claude to transform raw data and performance metrics into visually appealing, standalone HTML dashboards. By utilizing a standardized layout with grid systems and embedded SVG graphics, it creates clear representations of KPIs, trends, and progress indicators without the need for external dependencies. This skill is ideal for developers and project managers who need to quickly generate status reports, project analytics, or visual monitoring interfaces directly from their development environment.

Key Features

01Built-in KPI cards with trend indicators and semantic coloring

02126 GitHub stars

03Automated HTML dashboard generation with modern CSS styling

04Clean, dependency-free code using system UI fonts and native elements

05Responsive grid layouts for organized multi-metric displays

06Dynamic SVG chart generation including bar, pie, and line charts

Use Cases

01Generating automated status report dashboards for stakeholders

02Creating lightweight monitoring interfaces for application health data

03Visualizing project performance metrics and development KPIs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mhattingpete/claude-skills-marketplace dashboard-creator

For use in Claude.ai and ChatGPT

Download Skill