tellmotion

TellMotion — アイデア → テーマ → アニメーション

1回で完結する反復可能なフローで、トークン消費も少なめです。2Dで表現可能なあらゆるトピック（図解、プロセス、アーキテクチャ、アルゴリズム、タイムライン、概念）に使えます。（3Dや実写動画には非対応）

このスキルの構成: themes/ (theme.json カタログ) · tools/ (Node, ゼロ依存) · assets/base (Motion Canvas テンプレート、シーンレシピ付き) · assets/packs/ (オプションのコンポーネントパック) · scripts/new-project.sh · references/.

1. ブリーフィング（1ラウンド、不足しているものだけを質問）

ユーザーが既に内容や構成を提示している場合は、再度質問しないでください。不足しているものについてのみ AskUserQuestion（最大4質問）を使って質問します。

1. トピックと内容（なければ、こちらで仮のものを提案し、その旨を伝える）。
2. 長さ / ペース（デフォルト: 落ち着いたペース、シーンあたり20〜60秒）とfps（デフォルト 30 プレビュー / 60 レンダリング）。
3. デザイン — 常に以下の3つの選択肢を提示します。
   • テンプレート: カタログからテーマを使用。node tools/list-themes.mjs（コンパクトな一覧）を実行しIDを尋ねる。ビジュアルブラウズするには node tools/build-catalog.mjs <tmpdir> を実行し、gallery.html を開く（node tools/serve.mjs <tmpdir> でサーブ）。
   • カスタムデザイン: 3つの対照的な theme.json の提案を作成（references/theme-format.md 参照）、プレビューをレンダリングしユーザーに選んでもらう（ステップ2）。
   • 既存デザイン持込: ユーザーがブランドカラー/フォントまたはFigmaファイルを提供 → そこから theme.json を生成。
4. パック: トピックから推測し、不明な場合以外は質問しない。カスタムシーンで使用するものだけ追加する: cloud（アーキテクチャ）、algorithms（ソート、木構造）、charts（データ）、flowchart（プロセス）、timeline（歴史/ロードマップ）、code（プログラミング、CLI）、typography（イントロ、引用、A vs B）、science（サイクル、層、波）、math（数式、関数）、ui（プロダクトデモ、ユーザーフロー）、maps（場所、旅）。自由に組み合わせ可能。references/packs.md に全コンポーネントのリストあり。

2. カスタムデザイン（テンプレートを選択した場合はスキップ）

1. 一時フォルダに3つの提案を theme.json ファイルとして作成（最も近いカタログテーマをコピーしトークンを変更。異なる系統、例: 技術系 / 遊び心系 / エディトリアル系）。
2. 各ファイルに対して node tools/validate.mjs <file> を実行し、次に node tools/build-catalog.mjs <out> --themes <folder> を実行。
3. プレビューを表示: ブラウザペインで <out>/gallery.html を開くか（serve.mjs）、SVGを送信。ユーザーの選択を待つ。
4. オプションでFigmaを使った高忠実度ルート（ユーザーが希望し、Figmaコネクタが存在する場合のみ）: references/figma.md。
5. 選択されたテーマを <project>/theme.custom.json として保存（カタログへのコントリビュートを提案）。

3. ストーリーボード（アニメーション化の前にユーザーが承認）

アニメーションの書き直しは高コストですが、シーンのリストの書き直しは低コストです。このステップは、単一シーンまたはユーザーが明示的にスキップを求めた場合のみスキップします。

1. references/storyboard.md と references/recipes.md を読み、storyboard.json を書く: シーンごとに1エントリ、レシピ（または custom）、表示内容、秒数、実際のテキストを含む。
2. node tools/storyboard.mjs validate <file>、次に node tools/storyboard.mjs preview <file> --theme <id|file> --out <tmpdir> を実行。ブラウザペイン（serve.mjs）でページを表示し、チャットでもシーンをリストアップ。
3. ユーザーの承認を待つ。ユーザーが同意するまではコードではなくストーリーボードを変更。その後プレビューサーバーを停止。

承認後は納品まで自律的に作業します。

4. プロジェクト

bash <skill>/scripts/new-project.sh <name> --theme <id|path.json> [--pack a,b|all] [--demos]

（--demos は各パックのデモシーンをコピー: API学習に便利、後でデモは削除。） プロジェクトを配置するフォルダから実行します。トピックごとに1プロジェクト。新しい動画用にシーンを追加します。テンプレートをコピーし、テーマを適用し（src/theme.ts、src/fonts.ts）、依存関係をインストールし、.claude/launch.json にプロジェクトを登録します。後でテーマを変更する場合: node <skill>/tools/apply-theme.mjs <theme> <project> を実行し、その後 npm install。

5. シーン

node tools/storyboard.mjs generate <file> <project> は全シーンと src/project.ts を書き出します。レシピシーンは完成した状態で出力されます。各 custom シーンは、タイトル、キャプション、長さを持つ実行可能なプレースホルダーとして生成されるので、アニメーションを記述して完成させます。これらについては references/motion-guide.md（コアAPI、レイアウトレシピ、注意点）と references/packs.md（パックコンポーネント）を参照してください。generate を再実行しても編集済みのシーンは保持されます。固定ルール:

• シーンごとに1ブロックを src/scenes/ に置き、src/project.ts に登録（シーンごとに .meta ファイルも）。
• prepareScene(view, title) を使用。最初に enter() を呼び、最後に leave() を呼ぶ。キャプションは sub.say(text) で。
• テキストは1920x1080で28px以上。キャプションは85文字以内。要素タイプごとに1つのカテゴリカラーと src/config.ts の凡例（LEGEND）。
• 各シーンで必要なものだけを表示。アクティブな要素には glow() を、残りには dim() を適用。
• 編集可能なテキスト、タイミング、色は各シーンの先頭に定数として記述（EDITABLE TEXT コメント）。全体の速度は PACE で管理。
• 部品は connect(root, a, b) で結合。リクエストとイベントは send(root, arrow.points, {shape: 'dot' | 'diamond', to: piece}) で移動。形状で区別し、到着時にピースが反応する。
• シーン内で色やフォントをハードコードしない。config.ts の C、S、FONT、fs() を使用することでテーマの差し替えが可能。

6. 検証（低コスト）

1. プロジェクトで npm run typecheck を実行し、次に node tools/storyboard.mjs duration <project> を実行。承認計画から大きく外れているシーンがあれば修正するかユーザーに伝える。
2. preview_start（.claude/launch.json からプロジェクト名）、resize_window 1700x950、タイムラインをクリックし zoom を [215,0,800,330] に。複数のクリック＋ズームを1回の browser_batch で実行。タイムラインを scroll right して後のシーンに移動。
3. 完了時: resize_window プリセット desktop、preview_stop。依頼がない限りmp4はレンダリングしない。

7. レンダリング（依頼時）

プロジェクトで npm run render を実行すると、エディタを開かずに output/<name>/<name>.mp4 と render.json（シーンごとの時間、ファイルサイズ）が書き出されます。オプション（npm run render -- の後に）:

• --format mp4,webm,gif · --thumb または --thumb-at <秒> · --fps <n> · --scale <n>。WebMエンコードは遅い（数分）ので、必要な場合のみリクエスト。
• --aspect 9:16,1:1: テーマ背景のバー内に動画を収めます（--pad-color で上書き可能）。シーンのレイアウトは再配置されないため、テキストは約56%に縮小されます。その旨をユーザーに伝える。
• --draft: 30fps、半分のサイズで output/<name>-draft/ に出力。レビュー用。
• --info: 各シーンの時間を表示、レンダリングはなし。低コスト。ペース確認のためにレンダリングより優先。
• --dry-run: レンダリングサンプルからファイルサイズの範囲を表示、保存はなし。大規模レンダリング前やユーザーがサイズを気にしている場合に使用。

Chrome、Edge、またはChromiumが必要（CHROME でパスを上書き）。このスクリプトより前に作成されたプロジェクト: node <skill>/tools/render.mjs <project>。ソースは tools/render.mjs。

8. 納品

シーン一覧（名前 → 表示内容）、実行方法（npm start）、レンダリング方法（npm run render）、ペース変更方法（PACE）、テキスト（シーンごとの定数）、テーマ（apply-theme.mjs）をリストアップ。検証していない事項を明記。ワークスペースに CLAUDE.md がある場合は、新しいプロジェクトを追加。

トークン節約のヒント

• 書き込んだばかりのファイルは再読み込みせず、Edit を使用。
• テーマJSONファイルを直接読む代わりに list-themes.mjs を使用。カスタマイズ時のみ単一テーマを読む。
• スクリーンショット/ズームはバッチ処理。全ページキャプチャは避ける。
• コンポーネントを再生成せず assets/ を再利用。