mhattingpete/claude-skills-marketplace
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.
FAQ
Yes. Charts are SVG-based and styled via CSS classes; colors, sizes, and labels can be adjusted directly in the HTML/CSS.
How do I feed data into the dashboard?
Provide metric values and series as JSON or CSV, then map fields to KPI cards and chart rectangles/paths. The workflow extracts metrics, builds cards, generates SVG, and writes the HTML file.
11 skills
This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.
This skill generates HTML architecture diagrams including data flows, business context, and deployment for high-level system documentation.
This skill performs a comprehensive codebase audit across architecture, quality, security, performance, testing, and maintainability to deliver actionable
This skill generates interactive HTML flowcharts and process diagrams with nodes, arrows, and swimlanes for clear workflow visualization.
This skill processes reviewer feedback, creates actionable todos, applies changes systematically, and validates updates to improve code quality.
This skill executes Python locally for bulk operations, delivering high token savings and accelerating multi-file workflows.
This skill helps bootstrap and improve projects by automating structure, tooling, documentation, and workflows for faster, professional setup.
This skill generates three diverse solutions in parallel for a task, then evaluates and selects the best with rationale.
This skill helps you break down feature requests into actionable, implementable plans with tasks, timelines, and clear integration points.
This skill analyzes files and retrieves metadata such as size, line counts, modification times, and content statistics to inform your decisions.
This skill generates comprehensive HTML technical documentation with code blocks, API workflows, architecture diagrams, and syntax highlighting to accelerate
