dashboard-creator_skill

Overview

This skill creates lightweight, responsive HTML dashboards with KPI metric cards, SVG charts, progress indicators, and data tables. It focuses on clear visual hierarchy, semantic colors for trends, and simple markup that can be dropped into any project. Use it to turn raw metrics into shareable, interactive dashboard pages quickly.

How this skill works

Provide the metric names, values, and time-series or categorical data and the skill generates an HTML file containing a grid of KPI cards, SVG-based bar/pie/line charts, progress bars, and optional tables. Charts are rendered as SVG for crisp visuals and easy customization; trend states use semantic classes (trend-up, trend-down). The output is a single HTML page styled with minimal CSS so it can be embedded or served as a static dashboard.

When to use it

• Quickly prototype an analytics dashboard from CSV or JSON metrics.
• Display KPI summaries and trend indicators for product or ops monitoring.
• Create lightweight HTML exports of reporting data for stakeholders.
• Build visualizations when you need self-contained, static dashboards.
• Generate visual summaries for demos, sprint reviews, or status reports.

Best practices

• Supply normalized numeric values and timestamped series for accurate charts.
• Use semantic color conventions: green for positive, red for negative, blue for neutral.
• Limit KPI cards to key metrics (4–8) to avoid cognitive overload.
• Prefer SVG for charts to retain clarity at different sizes and for easy styling.
• Include alt text or captions for tables and charts to improve accessibility.

Example use cases

• Revenue and conversion KPI dashboard with revenue card, MTD trend, and weekly line chart.
• Operations dashboard showing uptime %, incident counts as KPI cards, and a bar chart of incidents by service.
• Product analytics page with DAU/MAU cards, retention line chart, and user segment pie chart.
• Performance report exported as a single HTML file for offline review or email attachments.