animaworks: Skill for Claude Code

Bustupアニメーションフレーム生成 — 疑似Live2D方式

音声ポップアップ（animaタブ長押し）のbustupを、静止画フレーム切替+CSS/JSで動かすための アセット生成手順。2026-08-20にmeiで確立。

方式: リギングなし。口3段階×瞬きのフレーム切替 + CSS呼吸/揺れ + lerp視線追従 + TTS音量(RMS)口パク。AI VTuberのデファクト（感情タグ→プリセット切替、Neuro-samaも同方式）。

成果物の契約（フロントエンドが期待する形）

配置先 <data_dir>/animas/<name>/assets/（通常 ~/.animaworks/animas/<name>/assets/）:

avatar_bustup_<expr>_frame_base.png       # 目開き+口閉じ（その表情の口）
avatar_bustup_<expr>_frame_blink.png      # 目閉じ
avatar_bustup_<expr>_frame_half.png       # 口半開き
avatar_bustup_<expr>_frame_open.png       # 口開き
avatar_bustup_<expr>_frame_blinkhalf.png  # 目閉じ+口半開き

• <expr> は voice-popup.js の VALID_EXPRESSIONS と同じ7種: neutral / smile / laugh / troubled / surprised / thinking / embarrassed。 neutralも明示的に _neutral_ を含む（既存 avatar_bustup.png の命名特例は適用しない）
• 5枚×7表情=35枚。フロントは _frame_base.png へのHEAD 1発で存在判定するので 表情単位で5枚揃えて置く（中途半端に置かない）
• フレームが無いanima/表情は自動で静的bustupへフォールバック（mei以外は当面フレーム無しでよい）
• 描画側の実装は server/static/pages/chat/bustup-animator.js（変更不要）。 仕様の正本は docs/issues/20260820_mei-pseudo-live2d-popup.md

手順

1. 作業ディレクトリ準備

scratchpadに表情ごとのサブディレクトリを作り、既存bustupを src.png としてコピーする。

W=<scratchpad>/bustup-frames; A=~/.animaworks/animas/<name>/assets
for e in neutral smile laugh troubled surprised thinking embarrassed; do
  mkdir -p $W/$e
  cp $A/avatar_bustup_${e}.png $W/$e/src.png   # neutralは avatar_bustup.png の場合あり
done

2. grok image_editで差分3枚を生成（表情ごと）

scripts/gen_one.sh <expr_dir> を直列実行する（grokのheadlessに image_edit ツールがある。 プロンプト全文はスクリプト内。要点: src.png と完全同一を保ち、指定の1変化だけ加える）。

for e in neutral smile laugh troubled surprised thinking embarrassed; do
  bash .claude/skills/bustup-frame-gen/scripts/gen_one.sh $W/$e
done

各dirに eyes_closed.png / mouth_half.png / mouth_open.png ができる。 1表情10分程度（timeout 600）。

3. PIL合成で残り2枚を作る — ここが最大の罠

grok image_editは元画像と解像度・フレーミングが変わる（実測: 1024×1365→864×1152）。 ただし同一呼び出しで生成された差分3枚同士はピクセル一致する。したがって:

• src.png（元bustup）とはいかなる合成もしない。frame_base すら src からは作れない
• base（目開き+口閉じ）と blinkhalf（目閉じ+口半開き）は差分同士の口領域pasteで合成する