card-render - SKILL.md Agent Skill

name: card-render description: 'output//params.json と creature.png をもとに、reference/zukan-card.css に対応したカード HTML (card.html) を生成し、画像を base64 埋め込みした自己完結型 HTML (card_standalone.html) も出力するレンダリング専用スキル。画像生成は行わず、gpt-image-2 または card-pipeline で作成済みの creature.png を参照する。WHEN: いきものカードを HTML 化、params.json から card.html を生成、カードを再レンダリング、HTML だけ作り直す、自己完結型 HTML を作る、いきもの図鑑カードの表示を更新。' argument-hint: 'output/ 配下の対象フォルダ名（例: 260528143015_空野ひかり）または params.json パス'

card-render: いきものカード HTML レンダリングスキル

card-params-extract が出力した params.json と、gpt-image-2 が生成した creature.png をもとに、reference/zukan-card.css の内容を埋め込んだ 1 ページ HTML (card.html) を出力する。

このスキルは HTML レンダリングだけ を担当する。画像生成は行わない。インタビュー抽出から画像生成、HTML 生成までをまとめて行う場合は card-pipeline を使う。

利用ケース

パラメータ抽出済み（output/<folder>/params.json あり）の人物について、card.html だけを生成
params.json や creature.png を更新した後、HTML だけ作り直す
仕上がった card.html を単体ファイルとして開いて目視確認
画像を base64 で埋め込んだ自己完結型 HTML（card_standalone.html）を生成し、ファイル 1 枚で配布・共有

前提

output/<folder>/params.json が存在（card-params-extract で生成済み）
output/<folder>/creature.png が存在（gpt-image-2 で生成済み。未生成でも HTML は出力できるが画像は表示されない）
reference/zukan-card.css が存在（本リポジトリに同梱されているカード共通スタイル）
Python 3.11 系（標準ライブラリのみで動作。追加依存なし）

手順

対象フォルダを確定する
- 引数がフォルダ名（例 260528143015_空野ひかり）なら output/<arg>/ を対象とする
- 引数が params.json の絶対/相対パスなら、その親フォルダを対象とする
- params.json が無ければエラーで停止（先に card-params-extract を実行する旨を提示）
params.json を読み込む
- read_file で全文ロード（後の差し込みに使用）
- creature.types, creature.stats.peaks, creature.affinity.weak.tags などの必須キーを軽くチェック
HTML (card.html) を生成する
- scripts/render_card.py を実行:
```
  python .github/skills/card-render/scripts/render_card.py `
  --params output/<folder>/params.json `
  --out output/<folder>/card.html
```
- スクリプトは params.json を読み、reference/zukan-card.css のクラス体系に沿った 1 ページ HTML を出力する
- card.html から画像は ./creature.png 相対参照、CSS は reference/zukan-card.css の内容を style タグへ埋め込む
- 既存 card.html は 常に上書き（パラメータ更新時に追従させるため）
自己完結型 HTML (card_standalone.html) を生成する
- card.html 生成後、render_card.py は同じフォルダに creature.png があるとき、画像を base64 データ URI に置換した card_standalone.html を自動生成する
- 外部ファイル参照がなくなり、HTML 1 枚だけで画像も表示される（メール添付や単体共有向け）
- creature.png が無い場合はスキップし、card.html のみ出力する
- --no-standalone で生成を抑止、--standalone-out <path> で出力先を変更できる
完了報告
- 保存先: output/<folder>/card.html および output/<folder>/card_standalone.html
- 生物名・タイプ・レアリティ・とくいわざを要約表示
- VS Code で card.html をブラウザプレビューする手順を 1 行で添える

主要オプション

引数 / フラグ	既定値	説明
引数	—	フォルダ名 (`260528143015_空野ひかり`) または `params.json` パス
`--image`	`creature.png`	HTML から見た画像の相対パス
`--css`	`../../reference/zukan-card.css`	埋め込み元 CSS ファイルのパス
`--standalone-out`	`<出力フォルダ>/card_standalone.html`	画像 base64 埋め込み版 HTML の出力先
`--no-standalone`	off	自己完結型 HTML の生成をスキップ

レンダラの仕様

scripts/render_card.py は params.json から以下のブロックを構築する（CSS クラスは reference/zukan-card.css 準拠）。

trainer.recorder は単一文字列、複数名の配列、または 、 / 改行 / ; 区切り文字列を受け付け、観察者欄へ複数行で表示する。

observed_date が空の場合は、HTML 生成時の当日を YYYY/MM/DD 形式で「生成日」として表示する。

ブロック	主要クラス	差し込み元
ページ枠	`.field-guide-page`	—
画像プレート	`.field-guide-plate` / `.specimen-frame` / `.creature-image`	`./creature.png`
トレーナー/観察者枠	`.guide-note-grid` / `.guide-note` / `.observed-date` / `.observer-comment`	`trainer.{western_name,real_name,real_name_kana,department,recorder}` / `observed_date` / `entries.observation_note`
ヘッダ	`.field-guide-header` / `.specimen-number` / `.creature-alias`	`primary_name` / `alias`
タイプ/レアリティ	`.creature-meta-row` / `.type-badge--<class>` / `.rarity-stars`	`types[]` / `rarity`
分類	`.taxonomy-strip`	`taxonomy.class` / `taxonomy.genus` / `taxonomy.species`
ステータス	`.stat-panel` / `.stat-row` / `.stat-row--peak`	`stats.{endurance,...}` / `stats.peaks`
わざ	`.move-cards` / `.move-card--signature` / `.move-card--hidden`	`moves.signature` / `moves.hidden`
弱点・耐性	`.affinity-box` / `.affinity-cell--weak` / `.affinity-cell--resist`	`affinity.{weak,resist}`
進化チェーン	`.evolution-chain` / `.evo-node--current`	`evolution.{previous,current,next}`
フレーバー	`.flavor-quote`	`flavor_quote`
図鑑エントリ	`.field-guide-entries` / `.guide-entry--wide`	`entries.*`（`observation_note` を除く）

タイプ → CSS クラスのマッピング:

タイプ	クラス
思索	`type-badge--thought`
観察	`type-badge--observe`
創発	`type-badge--emerge`
行動	`type-badge--action`
共鳴	`type-badge--resonate`
調律	`type-badge--tune`

未知のタイプ名が来た場合は既定の .type-badge のみ（色は中立色）を付ける。

エラーハンドリング

状況	対処
`params.json` が無い	「先に card-params-extract を実行してください」と提示して停止
`creature.png` が無い	HTML は生成できるが画像は表示されない。画像が無いため `card_standalone.html` は生成されない。必要なら先に `gpt-image-2` または `card-pipeline` で画像生成する
既知のタイプ語彙が増えた	references/type-class-map.md に追記し、`render_card.py` の `TYPE_CLASS` 辞書も更新する

参照

scripts/render_card.py — HTML レンダラ本体
references/type-class-map.md — タイプ ↔ CSS クラス対応表
reference/zukan-card.css — カード共通スタイル
card-params-extract — 入力 params.json を作るスキル
gpt-image-2 — creature.png を作る画像生成スキル
card-pipeline — 抽出・画像生成・HTML 生成をまとめて行う入口スキル
パラメータ生成ルール §3 / §4

注意

HTML 内に API キーやローカルの絶対パスを書き込まない
カード文面はパラメータ生成ルール §3 の方針（ポジティブ / 体言止め混在 / 観察記録調）を維持する
配布用 HTML インデックスへの組み込みは別タスクで実施（このスキルは 1 枚分のみ）