duo

Duo

固定の1448×1086、30fpsのコンポジションです。開いた折りたたみ式端末を両手で持ち、両方の画面を空白にした写真を使用します。2つの画面スロットにHTML（ライブ動画、チャットのモック、スクロールするフィードなど、HyperFramesでレンダリングできるものなら何でも）を入れると、リグが端末本来の角丸形状に合わせてマスクします。

端末と手は写真であり、作成するものではありません。 assets/plate.pngが端末そのものです。折りたたみ式端末や、そのベゼル、ヒンジ、手を再現、描画、CSSでモデル化したり、別の画像に差し替えたりしないでください。build.mjsはすべてのプロジェクトにプレートをコピーします。見つからない場合は、端末を独自に作ろうとせず、作業を止めてスキルを再インストールしてください。

リグは編集しないでください。 2つの.screen矩形、その角丸半径、ヒンジの仕切り線は、この写真をピクセル単位で測定したものです。加えるビジュアル変更はすべて、#screen-left .contentと#screen-right .contentの内側、および共有のGSAPタイムライン1つに限られます。

使用する場合／使用しない場合

• 「スマートフォンで2つのものを並べて見せる」演出には、アプリ対アプリ、フィード対フィード、同じプロンプトに答える2つのチャット、製品の2つのバージョンなど、どのようなものにも使用できます。
• ユーザーが単一のスマートフォン、ノートパソコン、または提供した実機のベゼルを希望する場合は使用しないでください。このスキルは特定の写真を使います。別の端末プレートを使う場合は、これを引き伸ばすのではなく、同じ方法でジオメトリを測定し直します（references/screen-geometry.mdを参照）。

要件

• Node 18以上、およびnpx hyperframes@latest経由のHyperFrames CLI（@latestは変動するため、バイト単位で同一の再レンダリングが必要な場合はバージョンを固定してください）。
• ワークスペースにモーションドクトリンがある場合は、まず読み込んでください。リグに組み込まれているモーションは、ゆっくりしたカメラプッシュ1つだけです。画面内の要素はすべて動きを伴う必要があり（スクロール、スワイプ、文字入力、タップなど）、待機中に揺らすだけにしてはいけません。

ネットワークと副作用（全項目）

• registry.npmjs.org — npx経由でHyperFrames CLI自体を取得します。
• cdn.jsdelivr.net — コンポジションはプレビュー／レンダリング時にGSAP（バージョン3.14.2に固定）を読み込みます。レンダリングは完全なオフラインでは行えません。
• 画面に追加するもの（動画クリップ、アバター、フォントなど）は、すべてあなた自身が発生させる副作用です。サイトへのアクセス、メディアのダウンロード、UIのスクレイピングは、ユーザーの依頼に実際のコンテンツが必要な場合に限り、かつ使用権を持つソースからのみ行ってください。その方法と権利に関する注意事項はreferences/sourcing-real-ui.mdに記載されています。

認証情報、有料操作、テレメトリーはありません。build.mjsは--out内にのみ書き込み、シンボリックリンクを経由した書き込みを拒否します。

フロー

<SKILL_DIR> は、このスキルのインストール先ディレクトリです（例： ~/.claude/skills/duo）。

1. プロジェクトをスキャフォールドします。

node <SKILL_DIR>/scripts/build.mjs --out ./foldable-meme --duration 10 --icons tiktok,instagram

--icons は省略可能です。実際の TikTok／Instagram のグリフシート （公開中のモバイルサイトから抽出した assets/icons-*.svg）をプロジェクトにコピーします。

2. HTML に触れる前に、クリップの長さに合わせて各画面で何が起きるかを文章で 決めます。ポーズテスト：どの秒で一時停止しても、少なくとも 1 つの画面内で 何かが動いている必要があります（スワイプが着地する、動画が再生される、テキストが 表示されるなど）。静止したスクリーンショットが 2 枚あるだけでは動画とはいえません。

3. 画面を作成します。 各 .content 内には、通常の DOM ビューポートがあります。 左は 495×849、右は 498×849 です。ルートではなく、これらを基準に配置してください。 パターン（全画面スナップフィード、ドラッグ→フリングのスワイプ、「いいね」のタップ、 チャットの入力アニメーション）は references/feed-recipes.md にあります。ルール：

   • すべてのクリップに <video class="clip" data-start data-duration muted playsinline> を使用します。再生は HyperFrames が管理します。スワイプ中に両方の動画がデコードされるよう、終了するクリップと開始するクリップの表示時間を重ねてください。
   • タイムラインは 1 つだけです。マークされたフック内で tl にトゥイーンを追加してください。2 つ目の gsap.timeline を作成したり、別の window.__timelines キーを登録したりしないでください。
   • repeat: -1、Math.random、時計は使わないでください。レンダリングではシークが行われます。
   • ステータスバー：写真の元の画面では、左画面の左上に 9:41、右画面の右上に Wi-Fi／バッテリーが表示されていました。アプリにステータスバーを表示する場合は、この分割を再現してください。「1 台のデバイス」という印象が強まります。

4. チェックしてスナップショットを作成します。

npx hyperframes@latest check ./foldable-meme
npx hyperframes@latest snapshot ./foldable-meme --at 1,4,7 --no-end

リントのエラーは 0 件である必要があります。固定ヘッダーの下にテキストが隠れる場合や、動画の上に白い UI テキストが重なる場合のレイアウト／コントラストの警告は、アプリ UI では想定内です。警告ではなくフレームを確認し、次の点を確かめてください。（a）隙間なく、コンテンツがすべての角丸部分まで届いている。（b）画面間にグレーのヒンジ区切りが見える。（c）一方の画面の要素がヒンジを越えてもう一方に入り込んでいない。

5. レンダリングはユーザーから依頼された場合のみ行います（ハーネスでレンダリングが制限されている場合は、先に確認してください）。

npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4

成功の確認

check ではエラー 0 件でリントが通り、snapshot のフレームでは、区切りを保ったまま、両画面がスマートフォン内で端から端まで埋まっている必要があります。MP4 は指定された長さで 1448×1086 であり、どの秒で一時停止しても、画面内の何かが動いている必要があります。最終 QC では、プレビューではなく、レンダリングした MP4 からフレームを取り出してください。

ルール

• コンテンツに合わせるために、画面のサイズ、位置、角丸を変更してはいけません。スロットに合わせてコンテンツを調整してください。モックアプリが大きすぎる場合は、画面ではなくアプリ内の文字サイズを小さくしてください。
• 実際のコンテンツを使ってください。ユーザーが TikTok や Instagram を求めた場合は、公開中のサイトから実際の UI グリフとレイアウトの寸法を取得し、実際の投稿（実際のユーザー名と数を含む）を使用してください。架空のハンドル名を使えるのは、ユーザーが明示的に求めたフィクション／パロディ画面のみです。
• リグのモーションはカメラのプッシュだけにしてください。ドリフト、呼吸するような動き、グローのループは追加せず、画面内のストーリーで時間を埋めてください。
• 出力はプレート本来の 4:3 サイズである 1448×1086 のままにしてください。リグのサイズを変更するのではなく、必要に応じて 16:9 または 1:1 のクロップを追加でレンダリングする方法を提案してください。

ファイル

• assets/plate.png — 画面がニュートラルな色で塗りつぶされたクリーンプレート（1448×1086）。
• assets/screen-spec.json — 測定済みの矩形、角丸、ヒンジ、ステータスバーの分割位置。
• assets/icons-tiktok.svg、assets/icons-instagram.svg — 実際のモバイルウェブ用グリフの <symbol> シート（「いいね」、コメント、共有、ナビゲーションバーなど）。
• template/index.template.html — 空のスロットが 2 つある、ロック済みのリグ。
• scripts/build.mjs — スキャフォールド用スクリプト。
• references/screen-geometry.md — ジオメトリの測定方法と、新しいプレートで再測定する方法。
• references/feed-recipes.md — スナップフィード、スワイプの物理挙動、「いいね」のタップ、チャットの入力アニメーション。
• references/sourcing-real-ui.md — 実際のアプリ UI とクリップの取得方法、および権利に関する注意点。

出典とライセンス

• このプレートは、@A_Kapustin が X で公開した写真（ステータス 2097769962936868872。折りたたみ式端末に ChatGPT と Claude が並んで表示されています）を元にしています。どのようなコンテンツにも使えるよう、2 つの画面は空白にしてあります。ここではミームテンプレートとして再配布しています。このスキルのユーザーは自身の判断で成果物を公開し、適切な場合は出典を明記してください。
• アイコンシートには、モック画面を実際のアプリのように見せるため、TikTok と Instagram 独自の UI グリフ（公開されているモバイル Web の DOM から抽出）を収録しています。これらは各社の商標であり、パロディ／論評目的でのみ使用しています。
• GSAP は標準ライセンスに基づき jsDelivr から読み込んでおり、同梱していません。