1仕組みと動作原理

本 skill は実行可能プログラムではなく、html-anything の「テンプレート」です。loader.ts が実行時にディスクをスキャンして読み込むディレクトリ（SKILL.md + example.html[/example.md]）であり、新しいテンプレートの追加はディレクトリの追加のみで完結し、TypeScript の変更は不要です。

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR はアプリケーション cwd の src/lib/templates/skills に固定されています。listSkills() は第1階層のサブディレクトリを走査して isValidBundledId でフィルタリングし、ディレクトリごとに SKILL.md を読み込んで frontmatter を解析するため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから生成されます。

frontmatter はセレクター/API 向けのメタデータ（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags）であり、fmToMeta() によって SkillMeta にマッピングされます。frontmatter 以降の本文がモデルに渡される実際の仕様となります。

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

id はディレクトリ名から取得されます。example のメタデータ（example_id/name/format/tagline/desc/source_url）は、ディレクトリに example.md/html が存在する場合にのみ SkillExampleMeta を生成し、本文は意図的に一覧取得 API から除外されます（コード内コメント: Body is excluded so we can return the entire registry in one cheap fetch）。

生成時、このテンプレート本文はプロンプトの body として扱われます。/api/convert は assemblePrompt() を使用して「グローバルデザイン指示 + 本テンプレート本文 + ユーザーコンテンツ」を1つのプロンプトに結合し、ホストのローカル agent CLI に渡して、stdout からストリーミングで HTML をキャプチャします。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同一ルートには editFromHtml/editFromContent による「差分最小化編集」ブランチも存在します。このパイプラインにおいてテンプレート本文は単なる文字列であり、評価や実行は一切行われません。

テンプレート本文の前にはグローバル共通指示（SHARED_DESIGN_DIRECTIVES）が付与され、技術的・コンテンツ的な規約がすべてのテンプレートに統一して適用されます。サンプル HTML で一般的に見られる CDN やフォントの外部リンクはこれに由来します（ホストシェルによる注入であり、テンプレート自体の要求ではありません）。

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの必須要件を重複して記述しません。安全性格付けはテンプレート自身のディレクトリのみを対象とし、このエンドポイントはホストシェルの挙動として security.reason に記載されます。

生成物は stdout のテキストとして返却されます。グローバル指示により agent によるファイルシステムへのアクセスは明示的に禁止されており、ディスク書き込みはフロントエンドが担当します。したがって、テンプレートディレクトリにはスクリプトもファイル書き込み能力も存在しません。

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

原文の指示には「HTML をいかなる .html ファイルにも書き込まないでください……フロントエンドが stdout のテキストを直接キャプチャし、ファイルのディスク書き込みはフロントエンドが担当します」と記載されており、最終的に生成物はフロントエンドによってタスク履歴やエクスポート処理に保存されます。

example.html はパッケージに同梱された事前レンダリング済みのサンプルです。/api/templates/<id>/preview は iframe 向けに text/html としてそのまま返却し（セレクター内のインラインプレビュー用）、/api/templates/<id>/example は example.md と example.html をセットで返却します。

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

サンプルはプレビューおよびドキュメント用途に限定され、生成用プロンプトには含まれません（生成には SKILL.md 本文のみが使用されます）。そのため、そこに含まれる外部リンクがテンプレート自身の機能境界に影響を与えることはありません。

本文では「フレーム」を機械可読な連続する <section class="frame">（1920×1080）として定義しており、フレーム数は固定値ではなくコンテンツの密度によって決定されます。短いスクリプトでは 6〜10 フレームから開始し、各フレームには1つのショット/コンセプトのみを配置します。

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定

本文中には「（短いスクリプトは 6〜10 フレームから、長いスクリプトはそれ以上とし、各フレームは1つのショット/コンセプトのみを担う）」と追記されており、グローバル指示の「コンテンツ駆動による数量決定」に準拠しています。

各フレームの末尾には隠しマーカー `` が埋め込まれ、ファイル末尾には後続の Remotion レンダリングスクリプトが読み取るための `` JSON（duration/transition/sceneSummary）が付与されます。

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 每帧底部隐藏标记 `` 供后续 Remotion / Hyperframes 渲染脚本读取。

これら2層の規約は単なる飾りではありません。ホストアプリケーションの next/src/lib/hyperframes.ts は、<section class="frame">、data-duration、および HYPERFRAMES_META の3つのソースから解析を行います（コメント: No-op + isHyperframes:false when the doc has no `<section class="frame">`）。

自動再生はテンプレート本文の必須要件です。最上部の JavaScript が 3 秒ごとにフレームを切り替え、クリックや方向キー操作に対応し、四隅にプログレスバーを表示します。

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。

サンプルでは data-duration を利用して setTimeout で自動フレーム切り替えを行い、前へ/次へ、再生/一時停止の制御および requestAnimationFrame によるプログレスバーを実装しています。

ナラティブ構造がテンプレートに組み込まれています。第1フレームはフック（データ、常識を覆す事実、または問いかけ）、第2〜Nフレームは論証、最終フレームは結論 + CTA となり、特大フォントの1文で簡潔に提示されます。

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。

この構造により、「フレームシーケンス」は長文を単に分割して並べるのではなく、自然な説得力のあるストーリーラインを持つようになります。

アプリケーション側はこの規約を実際に利用しています。export-menu.tsx はフレーム構造を検出すると、追加で Remotion zip のエクスポート機能（parseHyperframes → exportRemotionZip）を提供します。

next/src/components/export-menu.tsx

await exportRemotionZip(hyperframes, hyperframes.title, {

したがって、このテンプレートの生成物は、ホスト側においてスライド系テンプレートの PDF/PPTX エクスポートと並び、「レンダリング可能な動画プロジェクトとしてエクスポート」できる専用パスを備えています。

CLI 側にはキーワード直接マッチングルートが用意されています。skills-matcher.ts がユーザーコンテンツ内のキーワードをこのテンプレート id に直接マッピングし、マッチした場合は confidence ＝マッチ数 × 2 + 3 を付与し、閾値 3 に達した時点でローカルルールが適用され、モデルによるテンプレート選択をスキップします。

cli/src/skills-matcher.ts

[["视频", "video", "帧动画", "hyperframes", "remotion", "mp4", "片头"], "video-hyperframes"],

「動画」「フレームアニメーション」「hyperframes」「remotion」などのキーワードが本テンプレートに直接割り当てられており、CLI 内で remotion/mp4 キーワードを持つ唯一のテンプレートとなっています。

CLI のフォールバックマッチングで使用される閾値定数：コンテンツ長が 60 文字を超えている場合のみ AI 要約マッチングが有効化され、強シグナルの閾値は 3 です。

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

さらに、テンプレートの scenario に基づいてキーワードを重み付けする SCENARIO_SIGNALS や、tags/zhName/description でスコアリングする fallbackMatch があり、これら2層が不一致の場合にのみ agent を呼び出して要約マッチングを実行します。

ホストシェルは sandbox="allow-scripts allow-same-origin" の iframe を使用してサンプルや成果物をレンダリングします（スクリプト許可、同一生成元許可）。これはプロダクトシェルの設計上の選択であり、リスクとして記載されていますが、本 skill 自体の格付けには影響しません。

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

preview-pane.tsx や deck-viewer.tsx でも同様です。サンプル HTML 内のインライン JS はブラウザプレビュー時にのみ実行され、skill 自体がスクリプトを実行することはありません。

2コア機能

01連続フレーム出力（<section class="frame">、1920×1080、コンテンツに応じた数量）

02各フレームの duration/transition 隠しマーカー（レンダリングスクリプト用）

03HYPERFRAMES_META JSON メタデータ（Remotion 変換用）

04自動再生 + クリック/方向キー操作 + プログレスバー

05フック → 論証 → 結論+CTA のナラティブ骨格

06ホスト側での Remotion zip エクスポート

3外部依存関係

Kind	Dependency / Endpoint
network	Tailwind CDN（示例 HTML 引用）
network	Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）
network	上游项目（frontmatter 元数据，非运行依赖）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: スクリプト実行や外部への影響を伴わない、純粋なプロンプト指示およびルールテキスト

監査ノート： 格付け対象＝本 skill ディレクトリ（next/src/lib/templates/skills/video-hyperframes/）。全ファイルを精査した結果、スクリプトの実行、認証情報の読み込み、ディスクへの書き込みはいずれもゼロです。ディレクトリ内に現れる外部エンドポイントは、Tailwind CDN（サンプル HTML の参照）、Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）、アップストリームプロジェクト（frontmatter のメタデータであり実行時依存ではない）のみであり、すべて「成果物サンプル」である example.html 内に閉じています。SKILL.md 本文はレイアウト、スタイル、フォントファミリー名を指定しているだけで、実行時の外部 API は一切指定していないため、純粋な指示テンプレート＝green と判定されます。ホスト側の補足（格付け対象外）：html-anything プロダクトシェルは assemblePrompt() を介して本文をプロンプトに組み込んでローカル agent CLI を起動し、cdn.tailwindcss.com + Google Fonts の要件を注入します（next/src/lib/templates/shared.ts）。またプレビュー用 iframe は sandbox="allow-scripts allow-same-origin" を使用しています（next/src/components/template-picker.tsx）。

5二重目の独立検証

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html + example.md，无 scripts/references。
[ok] 外部端点只出现在示例/元数据 — SKILL.md 正文无 URL；URL 分别位于 frontmatter example_source_url 与示例的 Tailwind CDN / Google Fonts。
[ok] HYPERFRAMES_META 是否真实存在 — example.html 含  共 8 条（i/duration/transition/scene），与示例 8 个 section.frame 一一对应。
[discrepancy] 行内 frame 标记是否在示例中 — grep 'frame:' example.html = 0 命中；SKILL.md 要求的 `` 在示例中未出现，时长改由 data-duration 承载。宿主解析器 parseInlineMarker + 兜底注释表明两条路径都被支持，故为约定演示缺口而非能力缺口。
[ok] 宿主是否真消费该约定 — next/src/lib/hyperframes.ts 存在 FRAME_RE/META_RE/parseInlineMarker 实现（注释「Pull duration / transition out of the inline …marker the skill plants at the bottom of each section」）；export-menu.tsx 提供 hyperframes-remotion-zip 动作；e2e/ui/export-menu.test.ts 以 templateId "video-hyperframes" 造样本。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["视频", "video", "帧动画", "hyperframes", "remotion", "mp4", "片头"], "video-hyperframes"] 行。
[ok] 判级 green 自证 — 目录零脚本文件（示例内联 JS 属产物示例）、零凭证、零写盘；正文只规定 HTML 结构与注释标记，未点名运行时接口 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。

6結論

規約がそのまま契約に：フレームマーカーと META JSON がホストのパーサーおよびエクスポートパイプラインで実際に消費され、動画プロジェクトへ直接変換可能

コンテンツ密度に応じたフレーム数の伸縮が本文に規定されており、長尺スクリプトが固定 6 フレームに圧縮されるのを防止

組み込みのナラティブ構造（フック → 論証 → CTA）により、説得力のあるストーリー展開を標準で実現

ブラウザでの自動再生プレビューと Remotion での利用という、同一ソースからの2つの用途に対応

最適な用途： 新製品発表のオープニング、解説動画スクリプトの可視化、長文コピーを「1フレーム1コンセプト」の動画絵コンテに分割する用途、および Remotion/hyperframes プロジェクトの事前ドラフト作成に最適です。

不向きな用途： 精緻なタイムラインや高度なトランジションを必要とする動画完成品の制作には不向きです（fade レベルの遷移と時間メタデータのみ提供）。情報密度の高いドキュメント型コンテンツには不向きです（1フレーム1文が設計要件）。SEO や長文の可読性が求められるシーンには不向きです。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload video-hyperframes.tar.gz

sha256: f8c23c688123a19b…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.