create-figure

Files (3)

• SKILL.md
• render.sh · scripts/
• trim_pad.py · scripts/

SKILL.md (first lines)

$ARGUMENTS の指示にもとづいて、図や表を **HTML で作成 → PNG にレンダリング → 均等な余白でトリミング** する。

このスキルの基準ディレクトリ（この SKILL.md が置かれているディレクトリ＝`${CLAUDE_PLUGIN_ROOT}/skills/create-figure`）を `<SKILL>` と表記する。スクリプトは `<SKILL>/scripts/...` の絶対パスで実行する（`${CLAUDE_PLUGIN_ROOT}` が使えない場合は、この SKILL.md の実パスから `scripts/` を組み立てる）。

## ワークフロー

### 1. 引数を解釈する
$ARGUMENTS から次を読み取る:
- **図にしたい内容**: データ・表・ランキング・構造・関係・フローなど
- **デザイン指示 / 参考デザイン**: 配色・トーン・「既存の○○図に揃える」等。**あれば最優先で従う**
- **出力ファイル名**: 指定があればそれ。なければ内容から kebab-case の英数名を付ける
- **保存先**: 指定がなければ、関連ファイル（記事など）と同じディレクトリ

不明・曖昧な点（どんな図にするか、配色、配置など）があれば、作り始める前に `AskUserQuestion` で確認する。

### 2. デザイン方針を立てる（frontend-design skill を使う）
- **frontend-design skill を起動**して、図のレイアウト・配色・タイポグラフィの方針を決める
- ユーザーからデザイン指示・参考デザインがある場合は、**それを frontend-design より優先**する
- 特に指示がなければ、下記「デフォルトスタイル」を土台にする（複数の図を揃えたいとき用）

### 3. HTML を作成する
- 図／表を **1枚のカード（`.panel`）に収めた自己完結の HTML** を書く（外部アセット不要、フォントは CDN）
- **body に背景色とパディングを必ず付ける**（トリミングが背景色を基準に切り出すため。背景なしだとトリムできない）
- 日本語が含まれる場合は日本語フォントも指定する
- 数値は等幅フォント＋`tabular-nums` で桁を揃えると整う

### 4. PNG にレンダリングする
`<SKILL>/scripts/render.sh` を使う（headless Chrome・既定 2x）:

```
"<SKILL>/scripts/render.sh" <html> <out.png> [WxH] [scale]
```

- 引数 `WxH`（既定 `1100,800`）と `scale`（既定 `2`）は任意
- `WxH` はパネルが収まる十分なウィンドウサイズにする（小さいと右・下が切れる）。多少大きめでよい（余白は次でトリムされる）
- 呼び出しは出力 PNG のサイズが安定する（撮影完了）まで待ってから返る（最大 15 秒）

### 5. 均等な余白でトリミングする（**別ステップで実行**）
レンダリングと**同じコマンドにまとめず**、別の Bash 呼び出しで実行する:

```
python3 "<SKILL>/scripts/trim_pad.py" 16 <out.png>
```

- 背景色を自動検出してパネルにトリミングし、全辺に均等な余白（既定 16 CSS px）を付け直す
- 余白量を変えたい場合は第1引数を変更（例 `24`）。複数画像をまとめて渡せる
- render を 2x 以外で撮った場合は、同じ値を `--scale <N>` で渡して余白計算を合わせる（余白 device px = CSS px × scale）

> ⚠️ render と trim を 1 つのコマンド（`&&` や背景実行）にまとめると、trim がスキップされることがある。**必ず別ステップ**で実行する。

### 6. 確認する
- `Read` で生成した PNG を見て、見切れ・余白の均等さ・配色・文字の収まりを確認する
- 問題があれば HTML を直して 4 → 5 を再実行する
- 複数の図を作る場合、配色・フォント・カードの体裁を揃える

## デフォルトスタイル（デザイン指示がない場合の土台）

技術ドキュメント風のライトテーマ。複数の図を一貫させたいときの基準。

- **フォント**: 本文 `IBM Plex Sans JP` / 数値・ラベル `IBM Plex Mono`（`tabular-nums`）。Google Fonts から読み込む
- **背景**: ページ `#e8ecf2` / パネル白・枠線 `#cdd5e1`・角丸・**影なし**（影があるとトリムで下辺が濃く出やすい）
- **余白**: body `padding: 40px`（トリムで切るので大きめでOK）／パネル `padding: 26px 30px`
- **配色トークン**: ink `#1d2632` / dim `#5d6a7a` / faint `#98a3b3` / アクセント青 `#1f6fe5`
- 比較・対比で2系統に分けるときは 青 `#1f6fe5` / 橙 `#e2640f`
- カテゴリ3段階（難易度など）は 緑 `#15a05a` / 青 `#2f6fe0` / 赤 `#dc2b3e`
- タイトルは `IBM Plex Mono` で `LLM Wiki · ○○` のように主題を青、補足をfaintにする
- 注記（フット）は faint・通常ウェイト・一色（強調でデータ色を使わない）

## 注意

- **render と trim は必ず別の Bash 呼び出し**にする（上記）
- レイアウトに flex の固定幅カードを横並びにする場合、`.cards { width: max-content }` ＋ `.card { flex: 0 0 <px> }` にしないと、`inline-block` パネルの幅算出からはみ出して片側の余白が潰れる
- 一時ファイルが必要なら、出力先プロジェクト内の `.tmp/` に置く
- Pillow 未導入なら `python3 -m pip install --user Pillow`
- フォント読み込みに数百ms かかるため、レンダリングは焦らず待つ（render.sh は出力 PNG のサイズが安定するまでポーリングで待ち〔最大 15 秒〕、その後 Chrome を終了させて返る）

From TAATHub/claude-code, MIT.

More from TAATHub/claude-code