# Dashboard Creator

> Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

- **Type:** Skill
- **Install:** `agentstack add skill-mhattingpete-claude-skills-marketplace-dashboard-creator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mhattingpete](https://agentstack.voostack.com/s/mhattingpete)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [mhattingpete](https://github.com/mhattingpete)
- **Source:** https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/dashboard-creator

## Install

```sh
agentstack add skill-mhattingpete-claude-skills-marketplace-dashboard-creator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

  [Project] Dashboard
  
    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; }
  

  [Dashboard Name]
  
    
    
    
  

```

## KPI Card Pattern

```html

  Revenue
  $124K
  ↑ 12.5%

```

## Chart Pattern (SVG Bar Chart)

```html

  
  
  

```

## 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).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mhattingpete](https://github.com/mhattingpete)
- **Source:** [mhattingpete/claude-skills-marketplace](https://github.com/mhattingpete/claude-skills-marketplace)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mhattingpete-claude-skills-marketplace-dashboard-creator
- Seller: https://agentstack.voostack.com/s/mhattingpete
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.