ガイド記事

HTML から動画を作る 7 件|heygen-com/hyperframes の地図

公開元は 2026-10-21 に作り方と領域のスキル 14 件を廃止し、配るのは 7 件になりました。入口の hyperframes が契約と作業の回し方を持ち、道具と素材の 3 件を最初から、発表資料・Figma・移植の 3 件を必要なときに入れます。2026-10-22 に測ると、7 件の本文は合計 39,619 バイトでした。

エージェントスキル研究所編集部

この記事の内容(10 項目)

まず結論

公開元が配っているスキル(2026-10-22 時点)
7 件
最初に入れる中核の組
4 件
7 件の本文の合計
39,619 バイト
2026-10-21 に廃止されたスキル
14 件

HyperFrames は HTML を動画に描き出す仕組みです。7 件はその使い方の文書が分かれたもので、選んで組み合わせるスキル群ではありません。

組スキル役割
入口hyperframes描き出しの契約・作業の回し方・動画の種類ごとの読み先
中核hyperframes-cli検査・撮影・タイムラインの編集・試写・描き出し
中核hyperframes-registry約 450 件の既成の部品を探して入れる
中核media-use音楽・画像・語り・話す人物・色調などの素材と、置いた音のミックス
必要なときslideshowその場で見せる発表資料
必要なときfigmaFigma の素材・色・部品・絵コンテを持ち込む
必要なときremotion-to-hyperframesRemotion などの既存の動画を取り込む

media 分類の全体像は動画・画像を作るスキルの選び方にあります。

2026-10-21 に 14 件を廃止した

何が起きたか

公開元は 2026-10-21 のコミット 68822931 で、作り方ごとのスキル 8 件と領域のスキル 6 件を skills/ から消しました。コミットの題は「知識のスキル 7 件を出し、作り方のスキルを引退させる」という趣旨です。同じコミットで、入口・CLI・部品・素材の 4 件の本文も大きく縮み、細部は references に移りました。

廃止された組スキル
作り方 8 件embedded-captions、faceless-explainer、general-video、motion-graphics、music-to-video、pr-to-video、product-launch-video、talking-head-recut
領域 6 件hyperframes-animation、hyperframes-audio、hyperframes-core、hyperframes-creative、hyperframes-keyframes、hyperframes-studio

当サイトで解説を書いていた 11 件は、配布終了の札を付けて残しています。

入れてあった分は skills update で消える

中身の移り先

以前のスキル今読むところ
作り方 8 件と、構成・動き・キーフレーム・創作の領域入口の hyperframes の references(film.md・captions.md・overlays.md・motion.md・look.md・format.md・story.md)と references/types/
hyperframes-audio(置いた音のミックス)media-use の references/mixing.md

コミットの本文は、作り方のスキルが測った事実はすでに入口の references に入っている、と書いています。CLI の案内も、hyperframes-audio は media-use の mixing.md へ、ほかは入口とその references へ、と知らせます。

入口の hyperframes が持つもの

振り分けをやめ、自分で持つ

以前の入口は、聞き取りをして 10 の作り方へ振り分けるものでした。今は振り分けをせず、どの依頼でも入口の本文と references を読ませる形です。

本文が持つのは 3 つです。

  • 描き出しの契約 12 条時間の属性、ルートの長さ、時刻や乱数の禁止など。破ると描き出しが壊れるか毎回違う映像になる
  • 作業の回し方今の状態を読む → 筋書きを 3 つ → SPEC.md → 検査と見直し → 承認などのときだけ描き出す
  • 種類ごとの読み先宣伝・説明・音楽・グラフ・縦長・3D・人物の 7 種と、サイトや PR から作る映像・字幕・カードの手引き

筋書きを 3 つ出してから作る

15 秒を超えて何かを伝える映像では、作る前に違う映画になる筋書きを 3 つ、言葉だけで出します。人が選び、ファイルが欲しい・止まらずに進めと言われたときだけエージェントが選びます。

同梱の story.md は、弱い映画の多くは物語の無いところに動きを付けたものだ、と書いています。以前の作り方のスキルが受け持っていた設計の部分は、ここに集まっています。

既定の枠組みを主張する

本文は、ほかの枠組みかブラウザの録画を頼まれたとき以外は HyperFrames を使え、と書いています。入れた時点で動画の依頼を取りにくるので、ほかの動画系スキルと併用するなら知っておいてください。

道具と素材の 3 件

hyperframes-cli

CLI のコマンドを仕事ごとの 10 行の表で引かせます。lint → check → snapshot → 試写 → 描き出しの 5 段が決まっていて、検査に通っただけでは描き出さない作りです。解説は hyperframes-cli にあります。

hyperframes-registry

名前の付いた効果を手で書く前に、約 450 件の既成の部品を探させます。検索は手元だけで動き、何も送りません。解説は hyperframes-registry にあります。

media-use

素材を resolve という 1 つの動詞で取らせます。HeyGen を使う道と、登録の要らない手元の道が、必要ごとに 9 行の表で並んでいます。解説は media-use にあります。

必要なときに入れる 3 件

  • slideshow段階表示・分岐・発表者の覚書を持つデッキ。MP4 に描き出すと最初の場面だけ残って切れる
  • figma読み取り専用のトークンで素材・色・部品を取り、絵コンテの枠を状態として動かす
  • remotion-to-hyperframes訳す・コードごと載せる・映像として置くの 3 段で取り込み、元と 1 コマずつ比べる

どれも npx hyperframes skills update <名前> で入れます。発表資料は slideshow、Figma は figma、既存の動画は remotion-to-hyperframes です。

リポジトリの中だけで使う 6 件

skills/ とは別に、リポジトリの .claude/skills/ と .agents/skills/ に 6 件があります。motion-doctrine・cut-the-curve・seam-craft・captions-overlay・oversized-cursor・changelog-video です。

6 件すべてに metadata.internal: true が付いています(2026-10-22 確認)。README は、これらはリポジトリの中の作業用で、npx skills add の既定では入らないと書いています。

前提

  • Node.js 22 以上hyperframes-cli が明記
  • FFmpeg同上。media-use も ffmpeg と ffprobe を必須とする
  • npx hyperframes の実行7 件の本文がコマンドを走らせる
  • HeyGen の CLI へのサインインmedia-use で HeyGen の音楽・画像・声・話す人物を使うとき。クラウドでの描き出しも
  • FIGMA_TOKENfigma を使うとき。読み取り専用の範囲

費用の発生点は HeyGen の道

描き出しは手元で動き、外部の費用は掛かりません。費用が出るのは、media-use の HeyGen の道と、HeyGen のクラウドでの描き出し(cloud render)です。

media-use の本文は、エージェントが自分で選んだ有料の呼び出しは先に確認を取る、と決めています。無料の道は、表の「無料」の列のどれもアカウントが要りません。

確かめる項目はスキルを入れる前に確認することにまとめています。

作り込みの印

7 件の SKILL.md を読みました(2026-10-22)。

印7 件のうち
allowed-tools で確認なしで使える道具を宣言0 件
frontmatter にライセンスを明記0 件
プラグインとして入れたときの決まりを冒頭で指す7 件

確認なしで使える道具の宣言が無い

allowed-tools は、スキルを呼んだ回に確認なしで使える道具を宣言する欄で、道具を絞る欄ではありません。7 件とも無いので、道具を使うたびにふだんどおり確認が出ます。

ライセンスはリポジトリの側にある

frontmatter にライセンスの記載はありませんが、リポジトリのライセンスは Apache-2.0 です。

本文の大きさと同梱ファイル

スキルSKILL.md同梱ファイル
hyperframes7,167 バイト76 件
hyperframes-cli7,131 バイト12 件
figma6,167 バイト1 件
media-use5,120 バイト115 件
slideshow4,924 バイト1 件
remotion-to-hyperframes4,864 バイト76 件
hyperframes-registry4,246 バイト12 件

数値は 2026-10-22 時点です。廃止の直前(2026-10-21)には skills/ の 21 件で本文が合計 487,120 バイトあったので、今の 7 件はその 1 割に満たない大きさです。

入れるときの判断

やりたいこと入れるもの
とりあえず試す中核の 4 件。npx hyperframes skills update がちょうどこの組を入れる
発表資料を作る4 件 + slideshow
Figma のデザインから作る4 件 + figma
Remotion の作品を移す4 件 + remotion-to-hyperframes
動画を作らない1 件も要りません

分類の一覧は動画・画像・音声の分類ページにあります。

よくある質問

何件入れればいいですか

まず中核の 4 件です。npx hyperframes skills update を流すと、ちょうどこの組が入ります。発表資料・Figma・Remotion からの移植が要るときだけ、残りの 3 件を名指しで足します。npx skills add heygen-com/hyperframes --all は 7 件全部を入れます。

前に入れた pr-to-video などはどうなりますか

2026-10-21 に公開元が廃止しました。npx hyperframes skills update を流すと、入れてあった分が取り除かれます。プルリクエスト・字幕・カード・音楽の映像などの知識は、入口の hyperframes の references に移っています。

外部サービスへの費用はかかりますか

手元で描き出す限り掛かりません。費用が出るのは、media-use で HeyGen の音楽・画像・声・話す人物を使うときと、HeyGen のクラウドで描き出すときです。条件は HeyGen で確かめてください。

Remotion から移せますか

remotion-to-hyperframes があります。訳せない書き方を先に検査で止め、移したあとは元と 1 コマずつ比べます。Motion Canvas・Lottie・Three.js や、After Effects などの描き出しも取り込めます。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が、Claude Code へのプラグインの入れ方と Codex へ上げる手順を案内しています(2026-10-22 確認)。README は Cursor や Gemini CLI でも動くと書いていますが、当サイトは入れ方の手順があるものだけを対応として表示しています(指標の意味と限界)。

この数字はどうやって数えましたか

公開元のリポジトリを GitHub から取り、2026-10-22 の最新のコミットで git ls-tree と git cat-file -s を使って測りました。作業用の手元のファイルは改行の変換で大きさが変わるので、使っていません。廃止の前後の比較は、コミット 68822931 の直前の版で同じように測った値です。

あわせて読む

← ガイド記事の一覧/ 導入ガイド/ スキル一覧