mcpField
H
hyperframes-registry

hyperframes-registry

github.com/boraoztuncクリエイティブ・メディア434189 回インストール11 週間前に更新
リポジトリ

hyperframes-registry について

再利用可能な HyperFrames のブロックやコンポーネントを検索・インストールし、コンポジションに組み込むためのスキルです。`hyperframes` CLI を使う作業向けに、配置先や接続手順も説明します。

主な機能

  1. 01レジストリ内のブロックとコンポーネントの検索
  2. 02`hyperframes add` による項目のインストール
  3. 03`hyperframes.json` での配置先設定
  4. 04ブロックのホストコンポジションへの組み込み
  5. 05コンポーネントのコードを HTML に追加

活用シーン

  1. 01種類やタグでレジストリ項目を検索
  2. 02HyperFrames プロジェクトにブロックを導入
  3. 03エフェクトコンポーネントをコンポジションに追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/boraoztunc/skills --skill hyperframes-registry

インストール後、Claude Code で/hyperframes-registryを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
add-block.md
add-component.md
references/
demo-html-pattern.md
discovery.md
install-locations.md
wiring-blocks.md
wiring-components.md

詳細

HyperFrames レジストリ

レジストリには、hyperframes add <name> でインストールできる再利用可能なブロックとコンポーネントが用意されています。

  • ブロック — 単独で動作するサブコンポジション（独自のサイズ、再生時間、タイムラインを持ちます）。ホストコンポジションでは data-composition-src を使って読み込みます。
  • コンポーネント — エフェクトのスニペット（独自のサイズはありません）。ホストコンポジションの HTML に直接貼り付けます。

このスキルを使う場面

  • ユーザーが hyperframes add、「block」、「component」、または hyperframes.json に言及した場合
  • hyperframes add の出力（ファイルパス、クリップボード用スニペット）がセッションに表示された場合
  • インストール済みのアイテムを既存のコンポジションに組み込む必要がある場合
  • レジストリで利用可能なアイテムを確認したい場合

クイックリファレンス

hyperframes add data-chart              # install a block
hyperframes add grain-overlay           # install a component
hyperframes add shimmer-sweep --dir .   # target a specific project
hyperframes add data-chart --json       # machine-readable output
hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)

インストール後、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 を参照してください。

検索

利用可能なアイテムを確認します。

# Read the registry manifest
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

各アイテムの registry-item.json には、名前、種類、タイトル、説明、タグ、サイズ（ブロックのみ）、再生時間（ブロックのみ）、ファイル一覧が記載されています。

種類やタグで絞り込む方法については、discovery.md を参照してください。

コメント

Markdown 対応