hyperframes-registry

映像に名前の付いた見た目を入れたいときに引くスキルです。CRT の走査線、グリッチ、フィルムの粒子、グラフ、コードの差分、地図の上の印、カメラの動き。こういうものを手で書く前に、既成の部品を探させます。

本文の言い分は単純です。部品から始めるほうが速く、たいてい出来も良い。入れた部品は自分のプロジェクトのただのソースなので、変えても削っても色を替えてもよい。

既成のブロックとコンポーネント（説明文の記載）

約 450 件

本文の表に並ぶ部品の分類

11 種

同梱ファイル（2026-10-22 時点）

12 件

SKILL.md の大きさ（2026-10-22 時点）

4,246 バイト

何も入れずに検索できる

検索は CLI の npx hyperframes catalog --query で、手元だけで完結し、何も送りません。プロジェクトもアカウントも要りません。

この分類のスキルは大半が外部サービスの契約を前提にしますが（動画・画像を作るスキルの選び方）、探す段階では契約が要りません。

検索の言葉は英語で書く

一覧は英語で書かれ、索引も英語です。ほかの文字で問い合わせると No searchable words in query が返りますが、部品が無いという意味ではありません。

既定の検索は言葉の一致で、名前や説明と同じ語を使った部品しか見つかりません。--on-device を付けると意味で探せますが、初回に約 33 MB を取ってきます。本文は、取ってくるかを人に決めさせ、黙って有効にするなと書いています。

ブロックとコンポーネント

ブロックは親の構成に data-composition-src で取り込みます。コンポーネントは、印と <style> とスクリプトを自分の場面に写します。

入れ方は 1 コマンド

npx hyperframes add <名前> --json で入れると、書いたファイルと組み込み用の断片が出ます。名前の代わりにタグを渡すと、そのタグの付いたブロックが全部入り、依存する部品が先に入ります。

本文は、合う中でいちばん大きな単位を取ってから直せ、と勧めています。入れた部品の id の接頭辞は変えない決まりです。2 つの部品がぶつからないようにするためです。

組み込みに要る属性

ブロックを親に載せるには、次の属性を書きます（references/wiring-blocks.md）。

add が出す断片は出発点で、要る長さや開始は自分で決めます。部品が持つ変数は、載せた場所ごとに data-variable-values で決められ、色と書体の変数はブランドのものに向けよ、とあります。

拍に合わせる部品

拍に合わせて動くブロックは、npx hyperframes beats --json の拍の時刻から、載せた場所の data-start を引いた値を受け取ります。

置き場所は設定で変えられる

入れる場所は hyperframes.json の paths で決まります（references/install-locations.md）。同じファイルの registry が部品の取り先の URL で、既定は GitHub 上の HyperFrames のリポジトリです。

HyperFrames を使っていない

ここで配るのは HyperFrames の合成物に組み込む部品です。ほかの映像の仕組みには使えません。

React で映像を組みたい

React で書くなら Remotion の系統で、remotion-best-practices から始まります。HyperFrames は HTML と CSS の側です。

生成モデルで映像を作りたい

これは既成の部品の置き場で、画像や動画を生成するものではありません。素材を取る・作るのは media-use の担当です。

合うものが無かったとき

手で作る前に、無かったことを報告する決まりです。catalog --query が npx hyperframes feedback --search-miss の行を埋めて出すので、欲しかった動きを書いて送ります。

部品の名前を想像して書くのではなく、効果そのものを書け、とあります。送りたくないなら依頼文でそう伝えてください。

部品を自分で作って上流に出したい

本文の最後が、上流へのプルリクエスト用の手引き（references/contributing.md）と雛形、品質の基準を指しています。そこまでやるなら、このスキルの本文だけでは足りません。

GitHub から部品を取ってくる

入れるときは毎回ネットが要る

検索は取っておいた一覧でオフラインでも動きます。ただし add は、前に入れたことのある部品でもネットに繋ぎます。

ファイルが書き込まれる

add は compositions/ の下にファイルを作ります。hyperframes.json が無ければ既定の値で作ります。git の管理下で試してください。

依存する部品やタグでまとめて入る

1 つ指定したつもりでも、依存する部品が一緒に入ります。タグで入れるとさらに増えるので、先に catalog --tag <タグ> --json で何が入るかを見せてください。

catalog --human-friendly は対話の選択画面で、選んだ時点で入れます（references/search.md）。エージェントでは --json で一覧を出してから add を明示する決まりです。

「約 450 件」は公開元の記述

当サイトでは件数を数えていません。部品の置き場は更新されるので、実際の数は変わります。

allowed-tools の指定が無い

allowed-tools の指定はありません。確認なしで走る道具は宣言されておらず、どの道具も利用者の権限の設定どおりに確認されます。

ライセンス

リポジトリは Apache-2.0 です。配られる部品ごとの条件までは確かめていないので、商用で使うなら原本で確認してください。

アカウントは要りますか

検索には要りません。catalog --query は手元だけで動き、何も送りません。入れて動かす段階では HyperFrames の CLI と、その前提の Node.js 22 以上と FFmpeg が要ります。詳しくは hyperframes-cli にあります。

入れたのに映像に出てきません

組み込みの属性が足りていないことが多いです。data-composition-id がブロックの中の ID と一致しているか、data-start と data-duration があるかを確かめてください。add が出す断片は出発点で、そのままでは足りないことがあります。

日本語で検索しても何も出ません

一覧も索引も英語なので、ほかの文字の問い合わせは検索できる語が無いと扱われます。動画が日本語でも、問い合わせは英語で書く決まりです。画面に出す文字は動画の言語のままで構いません。

社内の部品集を使えますか

hyperframes.json の registry が URL の設定になっているので、差し替えられる作りです。ただし本文は社内の置き場の立て方までは書いていません。配布の考え方は社内でスキルを配布する方法が参考になります。

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

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