ダッシュボード作成
データ上級
CSV、JSON、APIデータを基に経営陣向けのダッシュボードやチームモニタリング画面を自動生成します。Chart.js、Rechartsなどのチャートライブラリを活用します。
トリガー
/dashboard使用頻度月2-3回
経営陣に週次レポートを報告する担当者なら？ /dashboardでKPIチャートを自動生成し報告時間を節約
データアナリストなら？ 分析結果をインタラクティブなダッシュボードに素早く変換
ダッシュボードチャート可視化レポート
動作フロー
/dashboard [データソース] 実行
↓
フェーズ1: 3つの生成を並列実行
kpi-cards
KPIカード生成
chart-gen
チャートコンポーネント生成
layout-build
レイアウト構成
↓
インタラクション追加 + レスポンシブ最適化
↓
✓ 実行可能なダッシュボードコード
スキルコード
# Dashboard Builder Skill
## Trigger: /dashboard [data source]
When invoked:
1. Analyze data source:
- Read CSV/JSON file or API response
- Identify key metrics and dimensions
- Detect time series patterns
2. Design dashboard layout:
- KPI cards for key numbers (top row)
- Line/bar charts for trends
- Pie/donut for composition
- Table for detailed data
3. Generate code using project's chart library:
- Detect: Recharts, Chart.js, D3, or suggest one
- Create responsive grid layout
- Add loading states and error handling
- Include date range filter if time data exists
4. Output:
- Complete React component(s)
- Sample data structure
- Instructions to connect real data
コピーしてCLAUDE.mdに貼り付ければ、すぐに使えます。
ダッシュボード作成 の仕組み
Dashboard BuilderはデータソースとKPI要件を受け取り、チャートライブラリ（Recharts、Chart.js）を使用したReactコンポーネントを生成し、フィルターコントロール付きのレスポンシブレイアウトを作成し、デプロイ可能なダッシュボードアプリケーションを出力します。
ダッシュボード作成 が力を発揮する場面
数日かかるフロントエンド開発タスクをワンコマンド操作に変換します。ステークホルダーがカスタムダッシュボードを迅速に必要としていて、既存のBIツールが硬直的すぎるか高価すぎるユースケースに最適です。
主な強み
- 完全でデプロイ可能なダッシュボードアプリケーションを生成
- フィルターとドリルダウンコントロール付きレスポンシブレイアウトを含む
- 人気のチャートライブラリにすぐに対応
- 特定のデザイン要件に合わせたカスタマイズ可能な出力