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 ダッシュボードを作成します。

使用するタイミング

  • 「[metrics] のダッシュボードを作成」
  • 「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 対応