Communitygithub.com

hyperframes-registry

HyperFramesレジストリにアクセスし、ブロックやコンポーネントをインストール、検出、配線します。

hyperframes-registry とは?

このスキルは、HyperFramesのブロックとコンポーネントのレジストリを操作するためのものです。`hyperframes add` コマンドでアイテムをインストールしたり、`hyperframes catalog` でカタログを検索したりできます。ブロックは独立したサブコンポジションであり、ホストコンポジションに `data-composition-src` 属性で含めます。コンポーネントはエフェクトスニペットで、ホストコンポジションのHTMLに直接貼り付けます。このスキルは、インストール場所の設定、ブロックとコンポーネントの配線、カタログのインテントベース検索、不足アイテムの報告、そして新しいブロックやコンポーネントの作成と上流へのコントリビュート(アイデア→スキャフォールド→検証→PR)をサポートします。CLI、CI、エージェントワークフローでの使用に適しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-registry

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

HyperFrames レジストリ

レジストリは、hyperframes add <name> でインストール可能な再利用可能なブロックとコンポーネントを提供します。

  • ブロック — 独立したサブコンポジション(独自の寸法、再生時間、タイムラインを持ちます)。ホストコンポジションに data-composition-src で含めます。
  • コンポーネント — エフェクトスニペット(独自の寸法はありません)。ホストコンポジションのHTMLに直接貼り付けます。

クイックリファレンス

hyperframes add data-chart              # ブロックをインストール
hyperframes add grain-overlay           # コンポーネントをインストール
hyperframes add captions                # captions タグが付いたすべてのブロックをインストール
hyperframes add shimmer-sweep --dir .   # 特定のプロジェクトをターゲット
hyperframes add data-chart --json       # 機械可読な出力
hyperframes add data-chart --no-clipboard  # クリップボードをスキップ(CI/ヘッドレス)

インストール後、CLIは書き込まれたファイルと、ホストコンポジションに貼り付けるスニペットを出力します。スニペットは開始点です。ブロックを配線する際には、data-composition-id(ブロックの内部コンポジションIDと一致する必要があります)、data-start、data-track-index 属性を追加する必要があります。

位置引数は最初に正確なアイテム名として解決されます。アイテムが一致せず、値がタグの場合は、コマンドはそのタグが付いたすべてのブロックをインストールします。レジストリの依存関係は、要求されたアイテムの前にインストールされます。hyperframes add はブロックとコンポーネントにのみ機能します。サンプルを使用するには、代わりに hyperframes init <dir> --example <name> を使用してください。

インストール場所

デフォルトでは、ブロックは compositions/<name>.html にインストールされ、コンポーネントは compositions/components/<name>.html にインストールされます。

これらのパスは hyperframes.json で設定可能です:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

詳細は install-locations.md を参照してください。

ブロックの配線

ブロックは独立したコンポジションです。ホストの index.html で data-composition-src を使用して含めます:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

主要な属性:

  • data-composition-src — ブロックHTMLファイルへのパス
  • data-composition-id — ブロックの内部IDと一致する必要があります
  • data-start — ブロックがホストタイムラインに表示されるタイミング(秒)
  • data-duration — ブロックの再生時間
  • data-width / data-height — ブロックのキャンバスサイズ
  • data-track-index — レイヤーの順序(大きいほど前面)

詳細は wiring-blocks.md を参照してください。

コンポーネントの配線

コンポーネントはスニペットです。そのHTMLをコンポジションのマークアップに、CSSをスタイルブロックに、JSをスクリプト(ある場合)に貼り付けます:

  1. インストールされたファイルを読み取る(例:compositions/components/grain-overlay.html)
  2. HTML要素をコンポジションの <div data-composition-id="..."> にコピーする
  3. <style> ブロックをコンポジションのスタイルにコピーする
  4. <script> の内容をコンポジションのスクリプト(タイムラインコードの前)にコピーする
  5. コンポーネントがGSAPタイムライン統合を公開している場合(スニペット内のコメントブロックを参照)、それらの呼び出しをタイムラインに追加する

詳細は wiring-components.md を参照してください。

ディスカバリ

主なディスカバリ手段としてCLIを使用してください。ブラウズする前に意図で検索してください: レジストリには目でスキャンできる以上のアイテムが含まれているため、リストアップして名前やタグでマッチさせるのは遅い方法であり、作成者の表現があなたの表現と異なる場合に失敗します。

# カタログ全体を、ビートが何をすべきかに基づいてランク付け
npx hyperframes catalog --query "見出しを一行ずつ表示する"
npx hyperframes add caption-clip-wipe

検索はローカルで実行され、何も送信しません。デフォルトでは、アイテムの名前、タイトル、説明と共有される語彙に基づいてランク付けされるため、入力した単語を再利用するアイテムのみが見つかります。--on-device は、1回限りのモデルダウンロード後に、意味に基づいてランク付けします。--json を使用すると、エンベロープにはどの層が応答したかが示されるため、ランク付けが行われたと仮定するのではなく、それを確認してください。

ビデオの言語に関係なく、常に英語でクエリを実行してください。 カタログは英語で書かれており、両方の層がそのようにインデックスを作成します(オンデバイスモデルも英語のみです)。他のスクリプトでのクエリは検索可能な用語を生成せず、何も返しません。これは、日本語や中国語のプロジェクトでは間違えやすいです。ブリーフ、キャプション、ナレーションがすべてその言語であり、クエリが自然にそれに従うためです。_動き_を英語で説明し、画面上のコピーはビデオが必要とする任意の言語で記述してください。クエリが「クエリに検索可能な単語がありません」と返ってきた場合、これはこのルールによるものであり、コンポーネントが欠落しているわけではなく、ギャップレポートの対象にはなりません。

インストール可能性はランク付けの前ではなく、後で適用されます。ベクターが運ぶがこのレジストリが提供できない名前は結果から削除され、dropped にカウントされます。したがって、dropped がゼロでない場合、それらは異なる世代であることを意味します。オフライン層、同意ゲート、および古いインデックスの更新方法については /hyperframes-cli を参照してください。

検索ではなくブラウズまたはフィルタリングするには:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

通常のテーブルモードと --json モードは一致するもののみをリストします。hyperframes add <name> で選択した名前をインストールします。--human-friendly はインタラクティブなピッカーを開き、選択したアイテムをすぐにインストールします。CIやエージェントのワークフローでは、--json の後に明示的な add を使用することをお勧めします。

カタログにないものを報告する

検索結果に該当するものがなく、どの結果も役に立たない場合は、手動でモーションを作成する前にその旨を報告してください:

npx hyperframes feedback --search-miss "<実行したクエリ>" --wanted "<必要だった動き>" --tier on-device

catalog --query はこの行を事前に入力して出力し、--json はそれを report_gap として保持します。つまり、何も合わないと判断した時点で、その情報はすでに手元にあります。

どちらの層でも、結果に該当するものがない場合は常に報告してください。 オンデバイス層が応答するのを待ってはいけません。同意が必要な33MBのダウンロードが必要なため、明示的にオプトインしない限り、エージェントの実行は words 層に依存しており、on-device を条件にするとほとんどすべての報告が抑制されます。--tier の値が一緒に送られるため、語彙のミスと意味のミスを読み取り時に区別できます。想像したアイテム名ではなく、実現したい効果を説明してください。返ってくるのは構築する価値のある動きのリストであり、存在しないアイテムを指定した報告は何も教えてくれません。これが唯一クエリをどこかに送信するパスであり、検索が自動的に行うのではなく、別個の意図的なコマンドとして存在する理由です。これは評価を含まず、評価指標に含まれることはありません。

これがカタログに対する需要シグナルの全体です。これをスキップすると、あなたが遭遇したギャップは代わりにインストール数から推測されることになり、誰もインストールできない動きを見つけることはできません。

CLIが設定されたレジストリに到達できない場合は、フォールバックとして生のマニフェストを確認してください:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

CLIが到達できないレジストリは、ディスカバリのためのカタログを空にしません。以前にフェッチされたマニフェストは、再検証に失敗した場合でも、24時間の更新ウィンドウを超えて提供され続けるため、catalog と catalog --query はディスク上の最後のコピーに対してリスト表示とランク付けを引き続き行います。

add は、昨日インストールしたアイテムであっても、ネットワークを必要とします。 キャッシュされるのはマニフェストのみで、アイテムの実際のファイルはインストールのたびにフェッチされます。したがって、オフラインでは検索でき、アイテムが何かを確認できますが、インストールはファイルフェッチで失敗します。ユーザーにオフラインインストールを約束しないでください。

各アイテムの registry-item.json には、名前、タイプ、タイトル、説明、タグ、寸法(ブロックのみ)、再生時間(ブロックのみ)、ファイルリストが含まれています。

タイプとタグによるフィルタリングの詳細は discovery.md を参照してください。

新しいブロックまたはコンポーネントのコントリビュート

新しいレジストリアイテム(キャプションスタイル、VFXブロック、トランジション、ローワーサード、または再利用可能なコンポーネント)を作成し、上流へのPRとして送信するには(既存のものをインストールするのではなく)、contributing.md の完全なアイデア→スキャフォールド→構築→検証→プレビュー→出荷のワークフローに従ってください。スターターテンプレート(キャプション/VFX/コンポーネント/registry-item.json)は templates.md にあります。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

関連スキル