/graph: あなたの数値がアニメーショングラフに
ユーザーが数値をどんな形で渡しても（Mar 200K, Apr 650K, Nov 1.5M、貼り付けたテーブル、CSVファイル、スクリーンショット、文章など）、それを小さなスペックに変換し、フレームを確認し、動画をレンダリングして、無音のMP4（約5秒）を返します。
${CLAUDE_SKILL_DIR} はこのスキルのフォルダ（このSKILL.mdがあるフォルダ）を指します。環境が自動で埋めてくれない場合は、そのフォルダのパスを使ってください。すべてのファイルはユーザーの現在のフォルダ、またはユーザーが指定したフォルダに保存してください。
0. 環境チェック
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
数秒かかります。このコンピュータがセットアップ済みか不明な場合に実行してください。"ready": true ならそのまま進めます。そうでなければ、表示された "fix" の下にあるコマンドを実行し、初回インストールであることをユーザーに伝えてください：python3 -m pip install playwright（ブラウザドライバ）、python3 -m playwright install chromium（Google Chrome または Edge がインストールされていない場合のみ、約150 MB）、python3 -m pip install imageio-ffmpeg（ffmpeg がない場合のみ）。pip が「externally managed environment」と拒否した場合は、プライベート環境を一度だけ作成し、すべてのコマンドでそのPythonを使用してください：python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg、必要に応じて ~/.animate-skills/bin/python -m playwright install chromium。Windows では python3 の代わりに py を使ってください。ここでブラウザが使えない場合（Claudeアプリのサンドボックスなど）は、このファイルの末尾を参照してください。
1. スペックを作成する
graph-<トピック>.json を保存します：
{
"title": "私のInstagramフォロワー数",
"subtitle": "2026",
"data": [["3月", 200000], ["4月", 650000], ["11月", 1500000]],
"source": "Instagram",
"theme": "night"
}
ルール：
- ユーザーの正確な数値を使用します。値をでっち上げたり、丸めたり、補完したりしないでください。何かが本当に曖昧な場合（どの列か、単位は何か）は、短い質問を1つしてください。それ以外はそのまま進めてください。
- 数値は完全な形で記述：650K →
650000、1.5M →1500000、12% →12（"suffix": "%"を付ける）。 - ラベルは短く（約8文字以内が最適）：
3月、Q1、2024、月。 - タイトルは数値の内容を示し、可能な限りユーザーの言葉を使ってください（最大約30文字；
|で改行を強制）。subtitleとsourceは、ユーザーが明示的に指定した場合、またはリクエストから明らかな場合（「私のInstagramフォロワー数」→ ソースはInstagram）にのみ追加し、勝手に作り出さないでください。
| フィールド | 説明 |
|---|---|
title, subtitle | 見出しとその下の小さな行（期間、単位）。 |
data | [["ラベル", 数値], ...] または [{"label": "...", "value": n}, ...] の形式で、順序通り。 |
type | 省略すると自動判定：値が10個以下なら棒グラフ、それ以上長い系列、または値の変化が大きさに対して小さい場合（体重の210→178、価格、気温など）は折れ線グラフ（範囲にズームイン）。"bar" または "line" で強制指定可能。 |
prefix, suffix | 単位："$"、"€"、"%"、" kg"。 |
decimals | 小数点以下の桁数を強制。デフォルトでは各値に応じて自動調整。 |
compact | デフォルトでは10,000以上を12K / 1.5M / 2Bのように表示。false で完全な数値。 |
callout | 省略すると最初と最後の値から自動で成長タグを生成（↑ 7.5x；10倍以上は整数、↑ 77x；↑ 32%；↓ 18%）。独自の短いテキスト（"黒字回復"）や、null で非表示も可能。 |
good | "down" に設定すると、値が小さいほど良い場合（体重減少、借金返済、コスト、レースタイム）に、下降が緑色のタグ（通常は赤）になります。 |
highlight | どの棒を金色で強調するか："last"（デフォルト）、"max"、インデックス番号、または "none"。 |
theme | night（ダークネイビー、コーラルの棒；デフォルト）、light、sunset、mint。 |
source | グラフ下部に小さく「出典：...」と表示。 |
size | "1080x1920"（縦長、デフォルト）、"1080x1080"、"1920x1080"。 |
duration, fps | 秒数（デフォルト約5）とフレームレート（デフォルト30；60は滑らかだが遅い）。 |
例：examples/instagram-followers.json（棒グラフ）、examples/website-visitors-line.json（折れ線グラフ）。
2. 最終フレームを確認する
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<トピック>.json --still end --out graph-<トピック>-check.png
画像を確認（2〜3秒で生成）：ラベルが読めるか、重なりがないか、数値がユーザーのものと一致しているか。問題があればスペックを修正して再度確認してください。
3. 動画をレンダリングする
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<トピック>.json --out graph-<トピック>.mp4
約10〜20秒かかります。確認用画像は削除してください。
4. 成果物を提供する
ユーザーにMP4のパスを伝えます（環境がファイルを表示できる場合は表示してください）。無音なので、音楽やナレーションを追加する準備ができています。簡単なバリエーション（別のテーマ、正方形サイズ、棒グラフではなく折れ線グラフなど）を1つ提案してください。
ブラウザがない場合（Claudeアプリのサンドボックスなど）
環境チェックでブラウザを起動できない場合は、代わりにアニメーションをページとして作成します：python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<トピック>.json --html graph-<トピック>.html。このページは任意のブラウザでグラフを再生できます（可能であればアーティファクトとして表示）。ユーザーには、MP4を生成するにはClaude Codeが動くコンピュータが必要であること、またはこのページをスクリーン録画することを伝えてください。