data-report について
data-report は、ユーザー提供データを可視化レポートにまとめるスキルです。KPI カード、グラフ、データ表、文章による洞察、方法論セクションを組み合わせ、実データを分析して捏造を避けます。
主な機能
- 01期間と出典を含むレポートヘッダー
- 02トレンド線付き KPI カード
- 032つ以上のグラフ
- 04整形された元データの抜粋
- 05文章による洞察と方法論セクション
- 06高さを固定したグラフコンテナー
活用シーン
- 01パフォーマンス指標の要約
- 02ユーザー提供データの可視化
- 03データに基づくレポートの作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/data-reportを入力して読み込まれたか確認します。
同梱ファイルexample.htmlexample.md
詳細
【テンプレート：データ可視化レポート】
- ヘッダー：レポートタイトル + 期間 + データソースの説明。
- KPI カードのグリッド：最も重要な指標を 3～5 個表示し、各カードに数値 + 前年比の変化 + ミニトレンドラインを表示します。
- メインチャートエリア：少なくとも 2 つのチャート（棒グラフ／折れ線グラフ／円グラフ／散布図）を使用し、Chart.js または ECharts を使用します（jsdelivr CDN から読み込み）。データはユーザー入力を解析して取得します。
- チャートコンテナには固定の高さが必要です：各
<canvas>を外側から<div style="position:relative;height:NNNpx">で囲みます（KPI のミニチャートは約 40px、メインチャートは約 240～280px）。Chart.js でresponsive:true, maintainAspectRatio:falseを使用する場合、親コンテナに明示的な高さがないと ResizeObserver の無限ループに陥り、チャートが際限なく大きくなってブラウザーがフリーズします。絶対にレイアウト目的で canvas にheight=属性を直接指定しないでください。これは初期値にすぎません。 - データテーブル：ユーザーの元データから一部を抜粋し、
<table>とモダンなスタイル（ゼブラストライプ、ホバー、スティッキーヘッダー）を使用します。 - インサイトブロック：絵文字で始まるテキストのインサイトを 3～5 件記載し、製品の週次レポートのようにします。
- 下部に「方法論」の折りたたみ領域を設けます。
- 控えめでプロフェッショナルな配色にします：メインカラー 1 色 + ニュートラルカラーの階調を使用し、チャートにはカラーパレットを使います。
- ユーザーが提供した実際のデータを必ず解析してください。データを捏造しないでください。
コメント
Markdown 対応