1仕組みと動作原理
前提条件が明記されています。レンダリングエンジンはHyperFrames、シーンソースはHTML/CSS/JSです。そのため、すべてのルールは一般的なフロントエンド開発ではなく、「コンポジションルート + 一時停止タイムライン + アドレス指定可能性 + 決定性」を中心に展開されます。
skills/hyperframes-scene-builder/SKILL.md
Use this skill when implementing or revising a HyperFrames scene. This skill assumes HyperFrames is the render engine and the scene source is HTML/CSS/JS.
ここでの目的：ルールを提示する前に技術スタックを確定させること。また、ファミリ内で唯一HyperFrames CLIコマンドを直接提供するスキルでもあります。
フレームレンダリングで決定論的なシークを行う必要があるため、タイムラインは必ず一時停止（paused）でなければなりません。これは「同一のソースから同一のフレーム群をレンダリングする」ための前提条件です。
skills/hyperframes-scene-builder/SKILL.md
- Use paused timelines for deterministic seekable animation.
ここでの目的：アドレス指定可能性と決定性を厳格な規約として扱うこと（同族のheygen-comにおけるHF規約でも、paused GSAPタイムラインとtl.seek(0)が要求されます）。
コンポジションルートとスコープの規律：data-composition-id / data-width / data-heightを明示的に宣言し、セレクタはコンポジションルート内に厳格に限定しなければなりません。他のサブコンポジションを汚染するグローバルセレクタは禁止されます。
skills/hyperframes-scene-builder/SKILL.md
- Avoid global selectors that can mutate other sub-compositions.
ここでの目的：複数シーンを同時にマウントする際の分離問題を解決すること（HyperFramesのような「1ページ複数コンポジション」アーキテクチャにおける最も現実的な落とし穴）。
レンダリングサイクルは「低品質ドラフトでの反復 → 最終確定時のみ品質/フレームレート向上」です。ドラフト品質 + --workers 2で迅速に結果を確認し、シーンが承認された場合やフレームレート依存の挙動を検証する場合にのみ品質を引き上げます。
skills/hyperframes-scene-builder/SKILL.md
Use higher FPS or quality only when the scene is approved or when testing frame-rate-specific motion.
ここでの目的：レンダリングコストを制約として管理し（GPUやChromeが不安定な場合はワーカー数を削減）、微小な調整のたびに完全品質で再レンダリングする無駄を避けること。
プルーフフレームはブラウザのスクリーンショットではなく、レンダリングされたMP4から取得する必要があります。スクリーンショットはエンコード/合成パイプラインを経由しないため、実際の差異が隠蔽されてしまいます。
skills/hyperframes-scene-builder/SKILL.md
- Generate proof frames from the rendered MP4, not only browser screenshots.
ここでの目的：「検証は実成果物で行わなければならない」というルールを確立すること（同族のrender-qaでも同一の最終映像からのフレーム抽出が求められます）。
HyperFrames特有のリスクチェックリストを内蔵：タイムラインIDの不一致、ネストされたコンポジション内のスコープ外セレクタ、GSAPによる既存CSS transformの上書き、プレビューとレンダリング間のCDN/フォント読み込み差異、レンダリングワーカー内でのメディアアセット解決失敗、単一ファイル肥大化によるエージェントの検証不能。
skills/hyperframes-scene-builder/SKILL.md
- CDN or font loading differences between preview and render.
ここでの目的：「プレビュー合格 ≠ レンダリング合格」となる6つの既知の原因を列挙し、トラブルシューティング時に順次除外できるようにすること。
キャリーオーバー（継続性）の規律：トランジションで新しいラベルやグラフィックが欠落していた場合、次シーンで複製されている同一フレームも同時に修正しなければなりません。
skills/hyperframes-scene-builder/SKILL.md
- If a scene transition forgets a new label or visual, patch the next scene's carryover frame too.
ここでの目的：scene-continuity-and-transitionsのキャリーオーバー監査を「構築」側で再確認し、二重の安全策を講じること。
2コア機能
01HyperFramesレンダリング基本3コマンド：preview / lint / render（--composition / --output / --fps / --quality draft / --workers を含む）
02コンポジションおよびGSAP作成ルール：明示的なコンポジションルート、同一コンポジションIDへのタイムライン登録、setによる初期化、既存CSS transformがある場合のfromTo使用、純粋な不透明度変化やバウンスの回避、プルーフフレーム抽出に耐えうる安定した最終フレームの確保
03ビジュアルQA：開始フレーム/主要ビート/最終フレームのPNG抽出、参考画像シーンにおける冒頭だけでなく最終フレームとの比較、動画解像度におけるテキストスケーリングの検証、後続シーンに複製された非表示フレームの同期確認、CSS/SVG/インライン全体におけるテーマカラーの整合性チェック
04頻出問題の修正手順：トランジションでのラベル/画像漏れに対する次シーンキャリーオーバーの補正、タイムライン要素の早期表示に関する初期不透明度/パス進捗/ノード可視性の調査、ライン進捗に合わせたパスポイントの順次表示、リングやカードによるテキスト見切れに対するラベル単体ではなくシステム全体のスケール調整、プロダクトUI見切れに対する枠なしまたは動的トリミングへの変更
05再利用可能コンポーネントパターン一覧：GlassPanel、LogoRow、CaptionSafeArea、ChartFrame、PathCurve、PointReveal、CameraSwipe、FinalFrameCarryover、CTAStack（正式なJSクラスである必要はなく、CSSクラス、HTMLスニペット、ヘルパー関数で可）
06ファイル構成の推奨例とアンチパターン：1シーン1HTMLファイル、小粒度のサブコンポジション、ファイル上部に配置されたトークン、共通ビジュアルのコンポーネント化、差し替え容易なアセットパス。アンチパターン：肥大化した単一ファイル、未コメントのマジックナンバー、重複したカラー定義、未コメントの非表示最終フレーム、グローバルに影響するCSS
07プルーフフレーム抽出チェックリスト：開始フレーム、最初の大規模な表示、メインアニメーション中間点、ユーザー指定のタイムスタンプ、最終フレーム、次シーンのキャリーオーバー開始点（該当する場合）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI（npx hyperframes preview / lint / render），Node/npm 生态工具；首次 npx 会从 npm registry 解析该包 |
| package | HyperFrames 渲染器（本地合成与编码，含无头 Chrome/worker 渲染环境） |
| package | GSAP（时间线动画库；由组合页面引入，规则围绕暂停时间线与 set/fromTo 语义） |
| network | 产物期引用面：组合页面若引用 CDN 脚本或网络字体，preview 与 render worker 会各自拉取，行为可能不一致（按范式属产物期引用，不判级，仅记录） |
| cli | ffmpeg（间接：抽帧与证明帧由同族 render-qa skill 的 scripts/extract_proof_frames.py 承担） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （ホストエージェントにより実行）npx hyperframes preview / lint / render —— SKILL.md内のRender項目
- 网络端点: 外部ネットワークアクセスの宣言: registry.npmjs.org（推論）：ローカルにhyperframesがインストールされていない場合、npxがnpmレジストリからパッケージを解決・ダウンロードするため（標準的なツール挙動）
- 本地工作目录: ファイル読み書きおよび成果物出力: compositions/*.html（シーンソース、1シーン1ファイル）および共有トークン/コンポーネント
監査ノート： スキルディレクトリ内にはSKILL.md（純粋な指示書であり、実行スクリプト、エンドポイント、認証情報は皆無）のみが存在します。インターフェースはローカルCLI（npx hyperframes preview/lint/renderによるローカルヘッドレスブラウザレンダリング）およびローカルディスクI/O（compositions/、renders/、snapshots/）に限定されており、青枠基準の「ローカルツール/CLIの呼び出しのみ、またはローカル読み書きのみ」に合致しています。素材の外部送信はありません：スキルディレクトリ全体の完全スキャンにおいて、http(s)://エンドポイント、fetch/requests呼び出し、token/env読み取りは存在しません。ネットワークに関わる2点も素材の外部送信には該当しません：① npxによるCLIパッケージの解決（ツールチェーンのインストールであり、ドキュメントの指示ではなくnpxの動作）；② 成果物HTMLからのCDN/フォント参照（規約上、生成成果物実行時の参照は格付け対象外であり、reasonにのみ記録）。同族の9つのスキルすべてで同一の評価基準が適用されています：ディレクトリ内はSKILL.mdのみ、動作範囲はローカル読み書きとローカルCLIに限定され、エンドポイント、認証情報、外部素材送信は存在しません。
5二重目の独立検証
- [ok] 「无端点无凭证」是否成立 — 目录内正则扫描只命中 npx hyperframes 三条命令；无 http(s):// URL、无 token/env/cookie。父仓库 .gitignore 也把 .env 排除，属仓库层卫生，非本 skill 声明。
- [unlocatable] 渲染命令是否与 HyperFrames CLI 的真实用法相符 — 本仓未 vendored HyperFrames（README 明写 This repo does not vendor HyperFrames），pin 内无法核验 --composition/--output/--quality draft/--workers 这些参数是否与上游 CLI 一致；本次侦查为只读且不得运行渲染，故不验证，登记为待补。
- [ok] 「证明帧从渲染 MP4 抽取」在仓库层是否有落地工具 — scripts/extract_proof_frames.py 用 ffmpeg -ss <time> -i <video> -frames:v 1 -q:v 2 抽单帧，并可用 xstack 拼接触表；与本 skill 的要求（从渲染产物而非浏览器截图抽帧）一致。
- [discrepancy] 是否声明了 HyperFrames 的安装前提 — SKILL.md 直接给 npx hyperframes 命令，但未写 HyperFrames 的版本、安装方式或项目初始化要求（同族 end-to-end-video-playbook 也只把它当引擎名字）。用户需自行确保 CLI 可用，否则三条命令全部失败。
- [ok] 「预览与渲染的 CDN/字体差异」是否属可判级的外发 — 该条描述的是产物页在浏览器端拉取 CDN/字体（产物期引用），按风险范式不判级；本 skill 也把它写成需要注意的渲染风险而非流程中的联网步骤，故只记入 reason 与 risks，不升档。
- [ok] 组件清单是否真是约定而非强制的类 — SKILL.md 原文 These do not need to be formal JS classes. They can be CSS classes, HTML snippets, or helper functions as long as future agents can find and reuse them.——属约定而非 API，不存在「清单里的类未实现」这种缺口。
6結論
最適な用途： 適用場面：レンダリングエンジンとしてHyperFramesの採用が確定しており、HTML/CSS/JSシーンを新規作成または修正する場合——コンポジション骨格の構築、GSAPタイムラインの記述、レンダリングコマンドの決定、ビジュアルQAおよびプルーフフレーム抽出、「プレビューは正常だがレンダリングが崩れる」といったHyperFrames特有の不具合調査、複数シーン同時マウント時のセレクタ分離など。
不向きな用途： 非推奨：① レンダリングエンジンが未定、または一般的なウェブアニメーションが必要な場合（ファミリ内のインテーク・設計層を先に使用するか、汎用フロントエンドスキルを参照）；② ビジュアルデザインシステムや美的判断を要する場合（motion-design-systemsを使用）；③ アセンブリ、字幕、音響ミキシング、納品検収プロセス（audio-sync-assembly / captions-and-music-bed / render-qa-and-surgical-changesを使用）；④ 環境内にHyperFrames CLIをインストールできない場合（本スキルの主要機能であるレンダリングおよびフレーム検証がすべてCLIに依存するため）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload hyperframes-scene-builder.tar.gz
sha256:
Option B · Copy Guide for Agentb8691be00b4eea0e…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit f6b043d9fd.