mcpField
D
dashboard-creator

dashboard-creator

github.com/mhattingpete数据与数据库689322 次安装14 周前更新
代码仓库

关于 dashboard-creator

用于根据指标和数据创建交互式 HTML 仪表板的技能，可在同一视图中组合 KPI 卡片、图表、进度指示和数据表。

主要功能

  1. 01交互式 HTML 仪表板
  2. 02显示趋势的 KPI 卡片
  3. 03柱形、饼形和折线图
  4. 04进度指示器
  5. 05表格形式的数据展示

适用场景

  1. 01汇总关键业务指标
  2. 02可视化性能数据
  3. 03通过图表和表格呈现分析结果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill dashboard-creator

安装后在 Claude Code 中输入/dashboard-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/templates/
base_template.html
dashboard_components.html
references/
design_patterns.md
svg_library.md

详细介绍

仪表盘创建器

创建包含 KPI 卡片和图表的交互式 HTML 仪表盘。

适用场景

  • “为 [指标] 创建仪表盘”
  • “展示 KPI 可视化”
  • “生成绩效仪表盘”
  • “创建包含图表的分析仪表盘”

组件

  1. KPI 卡片：指标名称、数值、变化百分比、趋势图标
  2. 图表：使用 SVG 或 CSS 绘制柱状图／饼图／折线图
  3. 进度条：完成度指示器
  4. 数据表格：表格形式的数据展示

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">
    
    
    
  </div>
</body>
</html>

KPI 卡片模式

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

图表模式（SVG 柱状图）

<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"/>
  
</svg>

工作流

  1. 提取指标和数据
  2. 创建 KPI 卡片网格
  3. 生成 SVG 图表（柱状图／饼图／折线图）
  4. 添加进度指示器
  5. 写入 [name]-dashboard.html

使用语义化颜色：绿色（正向）、红色（负向）、蓝色（中性）。

评论

支持 Markdown