hyperframes

hyperframes

カタログ用の概要 — 完全版パッケージ：heygen-com/hyperframes

判断ツリー

1. 完全版スキルはすでにインストールされていますか？ このパッケージは4つのスキル（hyperframes、hyperframes-cli、hyperframes-registry、media-use）をインストールします。ここでは最初のスキルを確認します。

   • グローバル：f=~/.agents/skills/hyperframes/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/hyperframes/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは hyperframes としてインストールされています。これを呼び出して続行します
   • pointer → ステップ2に進みます

2. インストール（skills CLIではこのスキルをインストールできません）：

   リポジトリのサイズは約500 MB（ショーケース用メディアとテスト用ベースライン）あるため、skills CLIで完全にクローンすると、300秒の制限を超えることがあります。スキルのフォルダーだけをスパースクローンし、ローカルクローンからエントリースキルとコアセットをインストールしてください。エントリースキルは、必要に応じて他のワークフロースキルをインストールします。

   以前の試行で /tmp/hyperframes-skills が残っている場合は、先に削除してください（rm -rf /tmp/hyperframes-skills）。git clone は空でないディレクトリがあると失敗します。

   [ -e ~/.agents/skills/hyperframes ] && echo "global" || echo "project"
   

   グローバル：

   git clone --depth=1 --filter=blob:none --sparse https://github.com/heygen-com/hyperframes.git /tmp/hyperframes-skills
   git -C /tmp/hyperframes-skills sparse-checkout set skills
   npx skills add /tmp/hyperframes-skills --skill hyperframes hyperframes-cli hyperframes-registry media-use -g -y
   rm -rf /tmp/hyperframes-skills
   

   プロジェクト：

   git clone --depth=1 --filter=blob:none --sparse https://github.com/heygen-com/hyperframes.git /tmp/hyperframes-skills
   git -C /tmp/hyperframes-skills sparse-checkout set skills
   npx skills add /tmp/hyperframes-skills --skill hyperframes hyperframes-cli hyperframes-registry media-use -y
   rm -rf /tmp/hyperframes-skills
   

Claude Code プラグインを使う方法：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

注意事項

• 必要要件： Node.js 22以降とFFmpeg（上流の要件）。使用時にネットワークアクセスが必要です。エントリースキルは、必要に応じて、実行先のワークフロースキル（スライドショー、一般的な動画、製品ローンチ動画など）を npx hyperframes skills update <workflow> でインストールします。バックグラウンド音楽、TTS音声ナレーション、アバター動画には、HeyGen CLIへのサインイン（無料のOAuth利用枠）が必要です。効果音とアニメーションの作成にはアカウントは不要です
• ライセンス： Apache-2.0

インストール後の呼び出し

• スキル名：hyperframes — エントリーポイントです。動画やモーショングラフィックの作成、編集、アニメーション化、レンダリングを依頼する際は、まずこれを読み込んでください。プロジェクトの状態を復元し、適切なワークフローに振り分け、そのワークフローを必要に応じてインストールします。
• 必要に応じて読み込まれるドメインスキル：hyperframes-core（コンポジションの構造とタイミング）、hyperframes-animation、hyperframes-keyframes、hyperframes-creative、hyperframes-audio、hyperframes-cli（初期化、リント、レンダリング、公開）、hyperframes-studio、hyperframes-registry、media-use（画像、アイコン、音声、字幕、カラーグレーディング）
• トリガーフレーズ：「hyperframes」、「HTML to video」、「HTMLから動画をレンダリング」、「Anime.js」

できること

「HTMLを書く。動画をレンダリングする。」— HTMLコンポジションから動画を生成する必要があるAIコーディングエージェント向けのスキル群です。コンポジションは、data-* 属性でタイミングを指定し、シーク可能なアニメーションランタイムを持つHTMLファイルです。そのため、フレームワークはフレーム単位でレンダリングできます。コアセットは、コンポジションの作成、モーションルールとランタイムアダプター（GSAP、Anime.js、CSS、Lottie、Three.js、WAAPI）、クリエイティブディレクション、音声と字幕、CLIによる初期化／リント／レンダリングのワークフロー、再利用可能なメディアレジストリをカバーします。

このポインターがインストールするのは、上流で先行インストールされるコアセットです。作成ワークフロー（スライドショーまたはデック、製品ローンチ動画、PRから動画への変換、トーキングヘッドのオーバーレイ、音楽から動画への変換、モーショングラフィック、顔出しなしの解説動画、一般的な動画、Remotionの移行）は hyperframes スキルが必要に応じて取得するため、ここではインストールされません。すべてを一度に入手するには、上記のClaude Codeプラグインを使う方法を利用してください。

使用しない場合

• 動画を出力しない静的アニメーション → gsap-skills、framer-motion-skills、または animate-css-skill を使用してください
• Reactによるプログラム生成動画 → remotion を使用してください
• HeyGen CLIにサインインせずにバックグラウンド音楽、TTS、アバター機能を使うことはできません。アニメーションの作成と効果音にはアカウントは不要です