Communitygithub.com

effectcraft-motion

縦型9:16のモーショングラフィックスやインフォグラフィック(数字、チャート、リスト、キネティックテキスト)をeffectcraft-cli/EffectCraftで作成するためのスキル。

effectcraft-motion とは?

このスキルは、effectcraft-cli / EffectCraft を使用して、1080×1920、30fpsの縦型9:16動画を JSON スペックから自動生成します。手書きのJSXビルドは線形キーフレームやデフォルトフォント、ラベルずれを引き起こすため、常にスペックを用いて生成します。フック、統計、棒グラフ、ドーナツ、ステップ、比較など、あらかじめ定義されたシーンタイプ(最大20種類)を提供し、各シーンに適した効果(グリッド、リキッド、グローなど)やトランジション(フェード、ワイプ、スライド)を指定できます。また、テーマ(リール、ピッチ、インフォポップ、キネティックなど70種類)を選択し、全体のトーンを統一します。このスキルは、プレビュー画像の確認→修正→再プレビューのループを必須とし、レンダリング前に必ずシートをチェックします。データがない場合は、数字なしのシーンかラベル付きイラストで進行し、その旨を報告します。並列レンダリングはエンジンがハングするため禁止されており、すべてのエンジンコマンドは `taskpolicy -b nice -n 19` で実行されます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kasfulk/effectcraft-motion-skills/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

effectcraft-motion は何をしますか?

JSONスペックから1080×1920、30fpsのMP4ファイルが生成されます。これらのシーンタイプに対してeffectcraft-cliのJSXを手書きしないでください — 手書きのビルドは線形キーフレーム、デフォルトフォント、ラベルずれを引き起こします。常にスペックを記述してください。

ハードルール

  1. 一度にエンジンプロセスは1つだけ。 プレビュー/レンダリングを並列実行したり、バックグラウンドで実行したり、別のレンダリング中に実行したりしないでください。「一度に複数レンダリングして」と依頼された場合は、直列に実行し、その理由(エンジンが2つのジョブでハングするため)を説明してください。
  2. すべてのエンジンコマンドに taskpolicy -b nice -n 19 を付与 — プレビュー、レンダリング、スライド、すべてに適用。
  3. ユーザーが指定した数字、または引用元に含まれる数字のみを使用。 統計データの捏造禁止。数字がない場合:ユーザーが時間に追われている、または「すぐ/レンダリング」と言った場合:確認のために止まらず、数字なしのシーン(フック/キネティック/ステップ/比較)またはラベル付きイラスト(「イラスト、実際のデータではありません」とラベルに仮定を明記)を進め、最終レポートでどちらを選択したか伝えてください。それ以外の場合は一度だけ確認してください。イラスト棒グラフの例:{"type":"bars","title":"イラスト:月額Rp100rb、年6%","items":[{"label":"25歳","value":100},{"label":"35歳","value":58}],"highlight":1}。
  4. 新しいシートを確認した後にのみレンダリングしてください。 check のパスは形状が適法であることを意味し、内容が正しいことを意味しません。
  5. duration はオーバーライドであり、デフォルトではありません。 省略してください;タイミングはテキストから決まります。ユーザーが特定のホールドを要求した場合にのみ設定してください。

手順(順序通り)

この手順は自己完結型であり、デザイン承認ゲートはありません。汎用的なブレインストーミング/レビュースキルはこれを上書きしません:ユーザーが動画を依頼した場合(「レンダリング」、期限、「すぐ」)、あなたは制作します — このスキルにはすでに決定パス(テーマ、シーン、データなし)が含まれています。依頼がメッセージ自体に関して曖昧な場合にのみ、確認のために止まってください。計画の承認のためではありません。

E=~/.claude/skills/effectcraft-motion/bin/ecm.mjs
node $E check video.json --strict      # 1 バリデーション + クラフトリント(C01–C10)
taskpolicy -b nice -n 19 node $E preview video.json   # 2 video.sheet.png を生成
  1. Readツールでシートを読んでください。 すべてのパネル。各シーンにつき1つの確定フレーム。
  2. スペックを修正し、再プレビューし、再読み込み。 シートがクリーンになるまでループします。このループは必須です — 間違ったシートをレンダリングすることは、このスキルが存在する目的である失敗です。
  3. レンダリングゲート — レンダリング前にすべてが真であること:すべてのパネルが電話サイズで読めること;空白/左右非対称のパネルがないこと;同じことを言っているパネルが2つないこと;すべての数字がユーザーのデータと一致すること;ハンドル/ブランディングがユーザーの要求通りであること。
  4. taskpolicy -b nice -n 19 node $E render video.json — 最初に out パスを確認してください(デフォルト = スペックのベース名 + .mp4)。
  5. MP4のパスと合計時間を報告してください。動画にデータがない場合(与えられなかったため)、そのように伝えてください。

カルーセル(デッキスペック):同じループ — デッキを作成し("handle" をユーザーのハンドルに設定)、taskpolicy -b nice -n 19 node $E slides deck.json を実行し(デッキスペックには check はありません;バリデーションは slides 内で実行されます)、次に スライド 01.png を読み、ハンドル、ソース行、オーバーフローを確認してから報告してください。

スペック

{"theme":"reel","out":"hemat.mp4","transition":"fade","scenes":[
  {"type":"hook","text":"給料は上がったのに貯金は変わらない?","emphasis":"変わらない"},
  {"type":"stat","value":72,"suffix":"%","label":"の労働者が緊急資金を持っていない"},
  {"type":"bars","title":"月々の貯金額","items":[{"label":"1月","value":40},{"label":"2月","value":72}],"highlight":1},
  {"type":"steps","title":"ここから始めよう","items":["支出を記録する","10%を確保する","自動化する"]},
  {"type":"outro","text":"この動画を保存。","cta":"フォローして他のヒントも"}]}
type必要なもの使用目的
hook / quote / outrotext(+emphasis、source、cta)オープナー、引用、クローザー
kineticlines 1–6フレーズを一つずつ表示 — データではない
statvalue(+prefix、suffix、label)一つの大きなカウント数字
barsitems 2–6 {label,value}(+highlight)カテゴリ/時間の比較;値は相対的 — データが100を超える場合は比例的にスケーリングし(例:千単位)、正確な数値を各 label に保持(「食費・2,1 jt」)
donutvalue 0–100割合/パーセンテージ
stepsitems 1–5番号付きハウツー
compareleft、right {title,points≤4}ビフォー/アフター、A対B
customjsxその他すべて、コアヘルパーを介して

シーンごと:title、bg(base/ink/accent)、duration(省略!)、fx、emphasis、transition(デフォルト cut、fade、wipe、slide、dip)。スペックレベル:transition デフォルト、audio {bed, bedGain, sfx:[{at|scene, name, gain}]} — サウンドは控えめに、3~5秒に1つのSFX。フィールド:reference/scenes.md、サウンド:reference/sound.md。

エフェクト: "fx":["grid","rgbIn"] をスペックまたはシーンレベルで、最大各1つ。プリセット:grid liquid paper grain vignette glow rgbIn blurIn sweep float glitch。reference/fx.md を参照。

シーンの選択

データ/インフォグラフィック動画には、少なくとも1つのチャートシーン(stat/bars/donut)を含める必要があります — キネティックテキストリストはインフォグラフィックではありません。Barsの highlight は、ストーリーの中心となる数字です。Barsのアイテムは比較可能なカテゴリである必要があります(「失敗」対「合計」は不可)。1つの事実につき1つのstat;同じ数字を表示する2つのシーンは避けてください。donut は0~100 — 割合、それ以外には使用しません。

スペックを記述する前に、reference/craft.md からストーリーの形とフックの式を選んでください。reference/themes.md に70のテーマがあります(node $E themes で一覧表示):reel bold news/finance · pitch calm technical · infopop playful explainer · kinetik dark high-energy · tenang soft reflective · edukasi lesson/worksheet。カルーセル:handle オーバーライド付きデッキスペック、reference/templates.md。

プレビュー後、reference/review.md に対して自分のシートを採点してください(基準:8/10)。

修正テーブル(エラー → 編集箇所)

エラー / シートの症状修正(スペック内)
text too long / セーフエリアオーバーフローそのテキストを短く — ラベルは2単語以内、タイトルは5単語以内。決してデータシーンを回避するためにキネティックに切り替えない
duration too short, needs ≥ Nsduration を上げるか、自動タイミングに任せる(省略する)
Barsラベルのオーバーフロー最初にラベル、次にタイトルを短く;ストーリーのバーに highlight
Barsの値が100を超える比例的にスケーリング(例:千単位);正確な数値は label に入れる
donut の値が100を超える間違ったシーンか意味 — ドーナツは100のうちの割合
2つのパネルが同じに見える1つを削除;1つの事実につき1つのstat
スライドに @yourpage が表示されるデッキスペック:"handle": "@..." を設定

レッドフラグ — これらの考えは間違っています

あなたがしようとしていること…現実
「時間を節約するために両方を並列レンダリング」エンジンがハングする;直列に実行し、ユーザーに伝える
「チェックが通ったので、内容は正しいはず」チェックは形状を検証;あなたは要求に対して数字を確認する
「テンポを揃えるために duration を3に設定」duration を省略;テキスト由来のタイミングがテンポ
「CTAが収まらないので削除」代わりに cta を5単語以内に短縮
「棒グラフが収まらないので、値をキネティック行でリストアップしよう」ラベルを短縮;チャートが動画のポイント
「前回のプレビューではシートは問題なかった」スペックを編集 → 再プレビュー → レンダリング前に再読み込み
「この1つのシーンだけJSXを手書きしよう」custom + ヘルパーを使用するか、lib/fx.jsx を拡張
「ユーザーからデータがない;何かする前に確認しよう」上記の時間切れ/データなしルール:数字なしまたはラベル付きイラストで提供し、どちらを選んだか伝える
「まずブレインストーミングスキルを実行しよう」この手順は自己完結型;レンダリングリクエストにデザイン承認ゲートは不要
「Barsが100を超えるとバリデーションエラーになるので、もっと小さい実際の数字をでっち上げよう」比例的にスケーリングし、正確な数値をラベルに記述

よくある間違い

間違い代わりに
試行錯誤でAPIを調べたり、JSXを書いたりするスペックを書く;新しいビジュアル:custom + ヘルパー(scenes.md)
2~3フレームだけチェックするシート上のすべてのパネルを読む
すべてのシーンを3秒に固定duration を省略
デフォルトフォント、汎用的な暗い背景テーマを選ぶ
custom JSXでAEエフェクトを手動追加fx プリセットを使用;新しいエフェクト:lib/fx.jsx に追加
macOSで sed -iスペックで編集ツールを使用
シーン内で生のCLIを使用これらのシーン以外の編集にのみ生の effectcraft-cli を使用(reference/cli.md)

関連スキル