mcpField
E
experts

experts

github.com/remotion-devマーケティング・グロース68.6k293 回インストール今日更新
リポジトリ

experts について

専門家データの変更時に、ホームページの専門家アニメーションを再生成し、画像素材を管理するリポジトリ用スキルです。透明動画の作成と検証、ドキュメントとプロモーションページへの配置、肖像ファイルの同期を扱います。

主な機能

  1. 01透過 ProRes マスターのレンダリング
  2. 02WebM と Safari 向け HEVC 動画のエンコード
  3. 03サイズ、長さ、アルファの検証
  4. 04動画と肖像素材の同期

活用シーン

  1. 01専門家データ変更後のアニメーション再生成
  2. 02ドキュメントとホームページの動画更新
  3. 03追加した専門家カードのレンダリング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/remotion-dev/remotion --skill experts

インストール後、Claude Code で/expertsを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

エキスパート

動画の更新方法

packages/promo-pages/src/components/experts/experts-data.tsx に表示される エキスパートを変更するたびに、ホームページのエキスパートアニメーションを再生成してください。ExpertsGraphic のコンポジションは、この配列を直接インポートします。

  1. 現在のブランチから、新しい透過 ProRes 4444 マスターをレンダリングします。既存の WebM や MOV を変換しないでください。

    cd packages/brand
bunx remotion render ExpertsGraphic /tmp/experts-graphic-master.mov \
  --codec=prores \
  --prores-profile=4444 \
  --pixel-format=yuva444p10le \
  --image-format=png \
  --timeout=120000 \
  --overwrite

  2. マスターの情報に prores (4444)、yuva... ピクセル形式、1080x1080 が表示されることを確認します。アルファフレームを抽出し、完全な不透明状態ではないことを確認します。

    ffmpeg -i /tmp/experts-graphic-master.mov
ffmpeg -y -i /tmp/experts-graphic-master.mov \
  -vf alphaextract -frames:v 1 /tmp/experts-graphic-alpha.png

  3. 透過 540x540 の Chrome 用 WebM をエンコードします。

    ffmpeg -y -i /tmp/experts-graphic-master.mov \
  -vf scale=540:540 \
  -c:v libvpx \
  -pix_fmt yuva420p \
  -auto-alt-ref 0 \
  -an /tmp/experts-graphic.webm

  4. 540x540 の ProRes 中間ファイルをエンコードし、Safari 用のアルファ付き HEVC MP4 に変換します。

    ffmpeg -y -i /tmp/experts-graphic-master.mov \
  -vf scale=540:540 \
  -c:v prores_ks \
  -profile:v 4 \
  -pix_fmt yuva444p10le \
  -an /tmp/experts-graphic-540-prores.mov

avconvert \
  --source /tmp/experts-graphic-540-prores.mov \
  --preset PresetHEVCHighestQualityWithAlpha \
  --output /tmp/experts-graphic.mp4 \
  --replace

  5. 両方の出力ファイルを、ホームページの両方の使用先にコピーします。

    cp /tmp/experts-graphic.webm ../promo-pages/public/img/experts-graphic.webm
cp /tmp/experts-graphic.mp4 ../promo-pages/public/img/experts-graphic.mp4
cp /tmp/experts-graphic.webm ../docs/static/img/experts-graphic.webm
cp /tmp/experts-graphic.mp4 ../docs/static/img/experts-graphic.mp4

  6. 4 つのファイルすべてを確認します。それぞれ 540x540、長さ 60 秒である必要があります。Safari 用 MP4 の情報に major_brand: mp42、compatible_brands: isommp41mp42、Video: hevc (Main) (hvc1)、handler_name: Core Media Video が表示される必要があります。docs と promo-pages にある対応ファイルのチェックサムが一致することを確認します。

ProRes MOV はどちらもコミットしないでください。コミットするのは 2 つの WebM コピーと 2 つの MP4 コピーのみです。

エキスパートのデータ

信頼できる唯一の情報源は packages/promo-pages/src/components/experts/experts-data.tsx です。肖像画像は packages/docs/static/img/freelancers と packages/promo-pages/public/img/freelancers の両方に置き、内容を同一にしてください。

エキスパートを追加または変更した後、packages/docs からエキスパートカードをレンダリングします。

bun render-cards

packages/docs/static/generated/experts-<slug>.png が、すでに存在すると報告されるのではなく、実際にレンダリングされたことを確認します。

コメント

Markdown 対応