GraySilver/explainloop

explainloop は何をしますか？

提供されたテキストの主張、シーケンス、比較、変化を説明する、読みやすい独自のアニメーションを作成します。ソースの事実状態、ユーザーが選択したセクション、数、スタイル、サイズ、保存先を維持します。ビジュアルリファレンスはデザイン語彙であり、シーンごとにコピーするテンプレートではありません。

入力と選択

1. 提供されたテキスト全体を読み取ります。URLの場合は、利用可能なブラウジングツールを使用します。本文を取得できない場合は、テキストの入力を要求します。ローカルのMarkdown/TXTの場合は、ファイルと隣接するキャプションを読み取ります。scripts/outline.mjs --input /絶対パス/article.md [--section "見出し"] は、見出しの範囲、文字数、拡張内部アウトラインが有用かどうかを報告します。記事の内容をタイトルから推測しないでください。
2. ユーザーが見出し、段落、引用、または範囲を指定した場合は、その箇所のみをGIFトピックとして選択します。周囲のテキストはコンテキストの解決にのみ使用します。それ以外の場合は、アニメーション化する価値のある最大3つの異なる関係を特定します。観察可能なイベント、before/after、原因/結果、比較、数値の変化をスローガンよりも優先します。1～3個のGIFを生成します。弱いトピックで数を埋めないでください。
3. 各GIFに対して、正確なソース箇所（段落の場所）、主張の状態（事実、測定値、報告された結果、提案、意見）、焦点オブジェクト、視覚的に変化するもの、1文の結論を含む、コンパクトな証拠マップを構築します。単位と修飾語は保持します。静止画では不明瞭な変化を教える場合にのみGIFを選択します。データ、製品UI、引用、結果を捏造しないでください。1つのトピックの複数のアスペクト比バージョンは、このマップを維持する必要があります。
4. 選択された本文がマークアップ除去後6000文字を超えるか、5つ以上のトップレベルセクションがある場合は、最も強い1～3個のGIFを選択する前に、拡張内部トピックアウトラインを作成します。自動的に続行します。ソースを読んだ後でも、要求された箇所または重要な主張が不明瞭な場合にのみ質問します。特定の選択されたセクションは、それ自体で測定されます。

トピックの選択や不確実性の処理については、content-planning.md を参照してください。このスキルには、完全なナレーション付きビデオスクリプトやナレーションの承認は必要ありません。

ビジュアルに関する決定

• シーンを構成する前に、scene-recipes.md と visual-quality.md を参照してください。サポートされている関係、焦点オブジェクト、読み取り順序、タイプ階層、ウィジェット状態、モーションビートを確立します。まず完全な結果フレームを設計し、その後のモーションがそれに導くようにします。新しいシーンの場合は、2つの質的に異なるサムネイル構成を内部的に比較し、ソースをより少ない競合する詳細で説明する方を選択します。主題固有のビジュアルファミリーを選択する場合は design-directions.md を、キャンバス処理を選択する場合は backgrounds.md を参照してください。スタイルプリセットはトークンを提供しますが、シーンには独自のレイアウトが必要です。すべての被写体を同じ kit.page のヘッダー/ボディ/フッター配置に入れないでください。
• ユーザーのビジュアル指示から開始します。1つのリクエストで複数のGIFやアスペクト比を生成する場合は、シーンを記述する前に1つのバッチスタイルを選択します。styles.md からの単一のプリセットと、共有の背景、パレット、フォントロール、ライン/半径処理、モーション特性を使用します。そのバッチ内のすべてのシーンは、同じ meta.style と共有のコア styleOverrides を使用します。各トピックを説明するために構成とセマンティックオブジェクトを変更します。GIFごとに新しいプリセットを選択しないでください。ユーザーが明示的に要求した場合にのみ、混合スタイルを使用します。
• タイポグラフィがシーンを伝える場合は、font-catalog.md を参照してください。インストールされている2つのフォントペアリングを箇所と比較し、選択したロールをシーンに記録します。レンダリング前に実際に解決されたCJKフェイスとグリフを確認します。欠落している表示フォントを黙って代用しないでください。カタログには、オプションで個別にインストールされたオープンフォントもリストされています。このスキルはフォントをダウンロードまたはバンドルしません。
• components.md を使用して具体的なオブジェクト（人、メッセージ、ドキュメント、タスク、タイムライン、測定値、およびそれらの関係）を構成します。説明にUIの詳細が必要な場合は、よりリッチなメール、カレンダー、メッセージウィジェットを使用します。実際の製品のインターフェースを発明しないでください。使い慣れた小さなアイコンには、パッケージ化されたLucideサブセットを使用します。外部のアートワークを追加する前に、sources-and-licenses.md を参照してください。
• デフォルトは元のベクターオブジェクトです。具体的な被写体をベクターコンポーネントで明確に説明できない場合にのみ、提供された画像、適切にライセンスされたイラスト、または生成されたビットマップアートを使用します。画像は選択されたスタイルと一貫性を保ち、そのソースを記録します。特定の実際の被写体に対して、一般的なアイコンを黙って代用しないでください。
• すべての可視アクションは、何が変わったか、オブジェクトがどこへ行ったか、または結果がどのように導かれるかを示す必要があります。関連するパーツがユニットとして移動する場合は、1つのモーション進行から一緒に表示します。重要な情報は意図的な順序で落ち着かせ、終了時にはその順序を逆にします。backgrounds.md の10のキャンバス処理から選択するのは、焦点オブジェクトとテキストのための明確な領域を確保した後でのみ行います。そのジオメトリを記事の関係に一致させ、カタログの拒否条件を使用します。記事幅でテキストが読みやすいようにします。ソースデータなしでチャート値を表示しないでください。ループが壊れているように感じさせる、長い静的ホールドや、最初と最後のフレームの突然のジャンプを避けます。同様の欠陥をレビューする場合は、failure-cases.md を参照してください。

シーンソースとレンダリング

デフォルトの成果物は、1600×900、16:9、30 fps、4～7秒の無音GIFです。ユーザー設定がこれらのデフォルトを上書きします。他の組み込み出力プロファイルは、4:3（1200×900）、1:1（1200×1200）、9:16（900×1600）です。カスタムピクセルサイズも受け入れます。要求された比率のみを出力します。指定がない場合は16:9を使用します。ファイルサイズを減らすために、黙って解像度やfpsを下げないでください。

meta と draw(t, kit) をエクスポートする .scene.mjs ファイルを作成します。meta.width/height は論理的なデザインキャンバスであり、--output-size はラスターピクセルを設定します。draw は経過秒数を受け取り、kit.page(...) または kit.svg(...) からの完全なSVGを返します。証拠マップは meta.sourceRefs に置きます。ソースは決定論的でなければなりません。同じシーンと時刻で、同じSVGになります。scene-format.md、assets/examples/message-filter.scene.mjs、assets/examples/multi-ratio/ を参照してください。

1つのリクエストで複数の比率がある場合は、各比率に対して個別の編集可能なシーンを作成し、要求されたすべてのバージョンをレンダリングします。正方形またはポートレートスペース用にレイアウトを再構成します。最終結果として、ランドスケープシーンをストレッチ、クロップ、またはレターボックス化しないでください。同じ証拠、数値、主張ステータス、テイクアウェイを維持しながら、狭いフレーム用に画面コピーを短縮する場合があります。アニメーションの因果シーケンスは、バージョン間で一貫性を保ちます。

ユーザーが別の保存先を選択しない限り、カレントワーキングディレクトリの generate/images/ に <article-slug>-01.gif と <article-slug>-01.scene.mjs（および連続するトピック番号）を、単一の16:9出力として保存します。複数比率のリクエストの場合は、両方の拡張子の前に -16x9、-4x3、-1x1、または -9x16 を追加します。カスタム比率の場合は -WIDTHxHEIGHT を使用します。ワークフレームは一時ディレクトリに保持します。シーンソースが編集可能な成果物です。その横に生成されたPNGフレームを残さないでください。

このスキルのディレクトリを、ロードされたスキルパスから SKILL_ROOT として解決します。

2つ以上のシーンのバッチの場合は、最初に node "$SKILL_ROOT/scripts/check-batch.mjs" --scene /絶対パス/first.scene.mjs --scene /絶対パス/second.scene.mjs を実行します（すべてのシーンに対して --scene を繰り返します）。レンダリング前にプリセットまたは共有トークンの不一致を修正します。これはシーンメタデータをチェックします。画像認識が利用可能な場合は、同じ --scene 引数で scripts/preview-batch.mjs を実行し、実際の結果フレームをシーンローカルの色、フォント、ウィジェット詳細、背景処理について比較します。ユーザーが明示的に混合スタイルを要求した場合にのみ、バッチスタイルチェックをスキップします。

要求された各GIFをレンダリングして検査します:

node "$SKILL_ROOT/scripts/render.mjs" --scene /絶対パス/name.scene.mjs --out /絶対パス/name.gif --output-size 1600x900
node "$SKILL_ROOT/scripts/inspect.mjs" /絶対パス/name.gif

render.mjs はNode、rsvg-convert、ffmpeg、ffprobe を必要とします。利用可能性をチェックし、ツールをインストールする代わりに欠落を報告します。要求された出力サイズは、シーンの論理キャンバスと同じアスペクト比を持ち、各ピクセルディメンションは最大4096である必要があります。静止画プレビューが有用な場合は、--poster /絶対パス/preview.png を使用します。

品質優先の生成の場合は、scene-recipes.md の条件付きプレビューと修正ワークフローに従います。このエージェントが実際に画像のピクセルを見ることができる場合は、node "$SKILL_ROOT/scripts/preview.mjs" --scene /絶対パス/name.scene.mjs --temporal-strip [--display-width 720] を実行し、4つのキーフレームと8つのサンプルフレームを検査し、最終レンダリング前に具体的な視覚的欠陥を修正します。視覚的な修正ラウンドは最大2回までとします。エージェントが画像のピクセルを見ることができない場合は、ビジュアルレビューとプレビューをスキップし、技術的なチェックのみのためにレンダリングして inspect.mjs を実行します。Playwrightは不要です。inspect.mjs は寸法、フレーム数、長さ、完全なデコード、繰り返しフレーム、最長の正確な静的実行をチェックします。視覚的な品質を判断することはできません。

成果物

各GIFとそのシーンソースをリンクします。それが示すソース箇所、重要な推論、選択されたスタイル、実際の寸法/fps/長さ/ファイルサイズを記述します。入力セクションが指定された場合は、すべてのシーンがそのセクションからのものであることを確認します。レンダリングされた出力またはビジュアルレビューが実際に完了していない限り、それらを主張しないでください。ビジュアルレビューが利用できなかった場合は、その旨を明示的に述べてください。

このスキルは短い無音GIF用です。単一の動かないアーキテクチャ画像には静的ダイアグラムワークフローを、ナレーション付きMP4にはビデオワークフローを使用してください。