Skill
code-execution
Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests…
@mhattingpeteInstall SkillDevelopment
Skill
/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.
Install
$ npx -y skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/dashboard-creator
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
dashboard-creator.SKILL.mdname: dashboard-creator
description: 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.
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
<!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
<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)
<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).
Read more
name: dashboard-creator description: 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.
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
<!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
<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)
<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).
Ships withclaude-skills-marketplace
A curated marketplace of Claude Code plugins for software engineering workflows.
Get the whole plugin
Other skills on claude-skills-marketplace.
@mhattingpeteInstall SkillSkill
code-refactor
Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API…
@mhattingpeteInstall SkillSkill
code-transfer
Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving…
@mhattingpeteInstall SkillSkill
file-operations
Analyze files and get detailed metadata including size, line counts, modification times, and content statistics. Use when users…
@mhattingpeteInstall SkillSkill
ensemble-solving
Generate multiple diverse solutions in parallel and select the best. Use for architecture decisions, code generation with…
@mhattingpeteInstall SkillSkill
feature-planning
Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature,…
@mhattingpeteInstall Skill