Dashboard Creator

Name: Dashboard Creator
Rating: 4.9 (177 reviews)
Author: mhattingpete

visualizationreportinghtmlkpiautomation

★ 4.9 (177)⭐ 608📄 Apache-2.0🕒 2026-03-06Source ↗

Install this skill

npx skills add mhattingpete/claude-skills-marketplace

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

What this skill does

•Generates responsive HTML/CSS structures for data visualization
•Creates standardized KPI metric cards with directional trend indicators
•Renders native SVG bar, line, and pie charts
•Integrates progress bar components for status tracking
•Produces self-contained files that open in any standard web browser

When to use it

✓Converting raw log or JSON data into a readable performance report
✓Visualizing project progress for stakeholders or team reviews
✓Creating quick monitoring interfaces for local development metrics
✓Displaying real-time analytical shifts using clear success/warning color coding

When not to use it

✕Building full-scale, interactive production analytics applications
✕Handling massive datasets that require server-side database connectivity
✕Creating tools that require real-time, live API socket updates

How to invoke it

Example prompts that trigger this skill:

“Create an HTML dashboard showing current CPU usage and memory stats”
“Generate a KPI report for Q1 revenue with percentage growth markers”
“Make a progress dashboard based on the tasks defined in our project plan”
“Visualize these monthly sales figures as a bar chart in a new dashboard”
“Build a summary dashboard that displays key performance indicators for this application”

Example workflow

Agent parses source data or logs provided by the user
Agent calculates necessary metrics for KPI or chart display
Agent builds the HTML skeleton with defined CSS styles for consistency
Agent generates individual SVG elements for graphical charts
Agent writes the complete output to a file named [project]-dashboard.html
Agent confirms generation and provides the file path for local viewing

Prerequisites

–Claude Code or compatible AI agent environment
–Write access to the target project directory

Pitfalls & limitations

!SVG charts are static and do not provide interactive tooltip hover states
!Layout is fixed to standard grids and may require manual CSS adjustments for complex custom designs
!Not intended for live database integration or dynamic client-side filtering

FAQ

Do I need a separate web server to view the output?

No, the output is a standalone HTML file that can be opened directly in any modern web browser without a server.

Can I customize the colors in the KPI cards?

Yes, you can instruct the agent to modify the CSS classes, though the skill relies on pre-defined semantic color patterns by default.

Does this skill work with raw JSON input?

Yes, the agent can parse structured JSON data and map the values to the corresponding visual components.

How it compares

Compared to writing an HTML report from scratch, this skill enforces a consistent design pattern and accelerates the generation of SVG components, which are otherwise tedious to code manually.

Source & trust

⭐ 608 stars📄 Apache-2.0🕒 Updated 2026-03-06🛡 no risky patterns found

View original skill on GitHub →

From the source: “# Dashboard Creator Create interactive HTML dashboards with KPI cards and charts. ## When to Use - "Create dashboard for [metrics]" - "Show KPI visualization" - "Generate performance dashboard" - "Make analytics dashboard with charts" ## Components 1. **KPI Cards**: metric name, value, change %, tre…”

View the full SKILL.md source


# Dashboard Creator

Create interactive HTML dashboards with KPI cards and charts.

## When to Use

- "Create dashboard for [metrics]"
- "Show KPI visualization"
- "Generate performance dashboard"
- "Make analytics dashboard with charts"

## Components

1. **KPI Cards**: metric name, value, change %, trend icon
2. **Charts**: bar/pie/line using SVG or CSS
3. **Progress Bars**: completion indicators
4. **Data Tables**: tabular data display

## HTML Structure

```html
<!DOCTYPE html>
<html>
<head>
  <title>[Project] Dashboard</title>
  <style>
    body { font-family: system-ui; background: #f7fafc; }
    .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .kpi-value { font-size: 36px; font-weight: bold; }
    .trend-up { color: #48bb78; }
    .trend-down { color: #e53e3e; }
  </style>
</head>
<body>
  <h1>[Dashboard Name]</h1>
  <div class="grid">
    <!-- KPI cards -->
    <!-- Charts -->
    <!-- Progress bars -->
  </div>
</body>
</html>
```

## KPI Card Pattern

```html
<div class="kpi-card">
  <div class="kpi-label">Revenue</div>
  <div class="kpi-value">$124K</div>
  <div class="trend-up">↑ 12.5%</div>
</div>
```

## Chart Pattern (SVG Bar Chart)

```html
<svg viewBox="0 0 400 300">
  <rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
  <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
  <!-- bars for each data point -->
</svg>
```

## Workflow

1. Extract metrics and data
2. Create KPI cards grid
3. Generate charts (bar/pie/line) as SVG
4. Add progress indicators
5. Write to `[name]-dashboard.html`

Use semantic colors: green (positive), red (negative), blue (neutral).

Quoted from mhattingpete/claude-skills-marketplace for reference — see the original for the authoritative, latest version.

📄 Full skill instructions — original source: mhattingpete/claude-skills-marketplace

The Dashboard Creator skill enables agents to generate standalone HTML files containing visual representations of technical metrics and performance data. By automating the production of KPI cards, progress indicators, and SVG-based charts, this tool saves developers from manually drafting boilerplate reporting interfaces. It acts as an abstraction layer for rendering data in a browser, handling the CSS, layout, and visual logic so the developer can focus on the underlying data processing. Whether you need to visualize system latency, track project completion percentages, or display revenue shifts, this skill produces clean, readable documents that function without external dependencies. It is particularly valuable for status reporting, internal documentation, or quick monitoring tasks that require clear, immediate visual feedback rather than complex heavy-duty analytics platforms.

By mhattingpete

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/dashboard-creator/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/mhattingpete/claude-skills-marketplace/dashboard-creator/SKILL.md
Cursor: ~/.cursor/skills/mhattingpete/claude-skills-marketplace/dashboard-creator/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/mhattingpete/claude-skills-marketplace/dashboard-creator/SKILL.md

🚀 Install with CLI:
npx skills add mhattingpete/claude-skills-marketplace

Read the Master Guide: Mastering Agent Skills →

Recommended Rules

View more rules →

Recommended Workflows

View more workflows →

Automatic commit message generator

GitAIAutomation

--- description: Automatic commit message generator and fast AI-powered commit for all current changes --- // turbo-all This workflow automatically ...

Setup Husky Git Hooks

GitAutomationQuality

--- description: Automate code quality checks with pre-commit and pre-push hooks --- 1. **Install Husky**: - Install husky and lint-staged. // ...

Setup Vercel Cron Jobs

VercelCronAutomation

--- description: Create and test scheduled tasks in Next.js --- 1. **Create Cron Config**: - Add `crons` to `vercel.json`. ```json { "c...

Recommended MCP Servers

View more MCP servers →

scrapling-fetch

Community

Access text content from bot-protected websites. Fetches HTML/markdown from sites with anti-automation measures using Scrapling.

AltTester®

Official

Use AltTester® capabilities to connect and test your Unity or Unreal game. Write game test automation faster and smarter, using [AltTester](https://alttester.com) and the AltTester® MCP server.