Communitygithub.com

heygen-com/hyperframes

HyperFramesプロジェクト向けのメディアOS。BGM、SFX、画像、アイコン、ブランドロゴ、音声、カラーグレード、LUTをローカルファイルまたは貼り付け可能なブロック+台帳レコードに解決(1つの動詞「resolve」);カタログにない場合はTTS/音楽/画像モデルで生成;共有オーディオエンジンによるナレーション、文字起こし、キャプション、背景除去;メディア操作(カット/リフレーム/変換);アセットをプロジェクト間で再利用。暗い、平坦、退屈、レトロ/カムコーダー/印刷/ASCII風にしたい、プライバシーが必要、メディア表示が必要といった曖昧なフィードバックにも対応。

hyperframes とは?

heygen-com/hyperframesスキルは、HyperFramesプロジェクト向けの統合メディアオペレーティングシステムであり、メディアの解決、生成、操作、記憶を1つのスキルで行います。主な動詞は「resolve」で、BGM、SFX、画像、アイコン、ロゴ、音声、カラーグレード、LUTなど、あらゆるメディアタイプをローカルファイルに解決します。HeyGenのカタログ(10,000以上のBGMトラック、75,000以上のベクター画像)を検索し、見つからない場合はTTS、音楽、画像生成モデルを使用して新しいメディアを生成します。共有オーディオエンジンにより、ナレーション、文字起こし、キャプション生成、背景除去が可能です。また、既存メディアのカット、リフレーム、トランスフォームなどの操作もサポートしています。視覚的なフィードバック(暗い、平坦、レトロ調など)に対しては、カラーグレーディングやメディアトリートメント(特殊効果、フィルター)を提案し、ユーザーの意図に合った調整を行います。このスキルは、Claude Code、Cursor、CodexなどのAIエージェント向けに設計されており、メディア関連のタスクを効率的に処理し、プロジェクトのコンテキストノイズを削減します。

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

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

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

ドキュメント

プラグインのインストール: セットアップまたはフレッシュネスコマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持します。

media-use

HyperFramesのメディアOS:解決・生成・操作・記憶 — すべてのメディアタイプ、1つのスキル、コンテキストノイズゼロ。

初回実行:heygen CLIをインストールしてサインイン(無料利用パス)、次にnpx hyperframes media-use resolve --doctorで確認します。セットアップとプロバイダー:references/setup-providers.md。

Resolve — たった1つの動詞

npx hyperframes media-use resolve --type <type> --intent "<description>" --project <dir>

1行を返します:resolved <id> → <path> (<type>, <metadata>)。すべての検索ノイズはディスク上に残ります。

タイプ1行の意図
bgm背景音楽(HeyGenカタログ、10,000以上 トラック)
sfx効果音(19ファイルバンドル+カタログ)
image写真、背景(HeyGenアセット検索、75,000以上 ベクター)
iconアイコン、記号(透過)
logo公式ブランドマーク(theSVG → GitHubアバター → ファビコン;再描画しない)
voiceTTSナレーション(HeyGen無料利用パス;オプションでローカルKokoro)
grade測定された補正候補;広範な研磨/スタイライゼーションはMedia Treatmentsに従う
lutユーザー提供または明示的に選択された再利用可能な検証済み .cube ファイル

新しく解決する前に、--candidatesを使用して再利用可能な候補を一覧表示し、適切かどうかを自分で判断します。再利用ルール、すべてのフラグ、取り込み(--from)、採用については、references/resolve.mdを参照してください。

広範な視覚的フィードバックをメディア意図として扱う

ユーザーが写真メディアの修正、研磨、スタイライゼーション、不明瞭化、強調、表示を明示的に依頼した場合、カラーグレーディングやエフェクトを指定しなくても、references/media-treatments.mdを読んでください。実際の <img>/<video> を検査し、1つの主要な意図を選択し、決定論的な永続化と検証を使用します。オプションのテスト済みシードとして一致するレシピを使用するか、hyperframes media-treatment --capabilities --jsonを検査して1つの関連するファミリー/エフェクトを --capability <id> で要求し、標準的なコントロールからカスタムトリートメントを組み立てます。通常のオーサリングのために --all をロードしないでください。トリートメントは、補正、プリセット、仕上げ、互換性のあるシェーダーエフェクト、サポートされているキーフレーム、オプションのレジストリオーバーレイを構成できます。ソースで正当化された範囲のチューニングと互換性のあるパーツのみを追加し、結果をより洗練されたものに見せるためだけのエフェクトは追加しないでください。最終的な結合ペイロードを hyperframes media-treatment で永続化します。

段階的にエスカレーションするワークフローを1つ使用します。ビデオの場合は、フレームを個別に読み取るのではなく、ラベル付けされた初期/中間/後期のコンタクトシートを1つ検査します。通常の補正または研磨の場合は、1つの候補を適用し、1つのアフターシートを検査します。結果が不明瞭、時間的、スタイライズド、LUTベース、HDR/LOG依存、プライベート、またはブランドクリティカルな場合にのみ、個々のフレームまたは動的なドラフトエビデンスにエスカレーションします。

通常の補正または研磨の場合は、最終的なトリートメントのプリセット/調整JSONを永続化します。 露出、シャドウ、コントラスト、暖かさをエンコードするためだけに .cube LUT を生成しないでください。LUT は、ユーザーが提供した場合、または選択したトリートメントが明示的に所有している場合にのみ使用します。resolve --type grade --for ... --analyze は測定エビデンスであり、選択したトリートメントを生成された LUT で置き換える許可ではありません。サポートされているビネット、グレイン、ブラー、ピクセレーション、カラー、トリートメントエフェクトを CSS/SVG オーバーレイで再作成しないでください。これにより、スタジオコントロールと標準のプレビュー/レンダリングシェーダーパスがバイパスされます。

プロアクティブになる — メディア機会パスを実行する

人間は通常、どのメディアが作品を引き上げるかを判断できません。あなたはできます。コンポジションを作成またはレビューするときは、1回の根拠のあるスキャンを実行し、1回だけ尋ねます — 黙って追加したり、アセットごとにしつこく尋ねたりしないでください。

具体的なシグナルが存在する場合にのみ、機会を提示します。

検出されたシグナル提案
画面上のテキスト / スクリプトでナレーションなしTTSナレーション(オーディオエンジン)
絵文字またはアイコンとしてスタイル設定された <div>実際の icon を解決
プレースホルダー、小さい、またはアップスケールのように見える画像より良い image(および/またはアップスケール — references/operations.md を参照)
ハードなシーンカット/トランジションで音なしトランジション sfx
音楽のない約10秒以上のピースbgm
露出不足/露出超過または色かぶりに見えるフッテージ補正グレード(hyperframes media-treatment --selector '#hero' --analyze --json で検査)
視覚的に平坦またはトピック外に感じられる写真メディア意図されたターゲットを指定した、ソースに適した1つの特定のプリセットまたはカスタムトリートメント
静的で意味のあるメディアエントランス/リビール1つのサポートされたシークセーフトリートメントアニメーション;リクエストがプリセットも正当化する場合を除き、色を保持

これをヘルプにし、ナグウェアにしないためのルール:根拠があり、一般的ではない(シグナルなし → 提案なし);意見があり、具体的(デフォルトを選択した特定の修正を提案 — 人間が すべて/一部/なし を承認);プロジェクトごとに1回(1つの統合された依頼;「そのままにしておいて」を尊重);表面化し、決して黙って変更しない(特にカラーグレード:提案してプレビュー — グレーワールドの「補正」は意図的な夕日やネオンルックを台無しにします)。

参照先 — タスクに必要なファイルのみを読む

タスク参照先
解決 / 再利用 / 採用 / 取り込み、フラグ、カスケード、在庫references/resolve.md
カラーグレーディング、LUT、スマートグレード(--for)、グレード比較references/grading.md
ナレーション / TTS、音楽、SFX、キャプション、文字起こし(オーディオエンジン)references/audio.md
既存メディアのカット / リフレーム / 変換、正確なエラー拡散、HEVCreferences/operations.md
ソースを考慮したクリエイティブトリートメント、リアルタイムエフェクト、オーバーレイ、リビールreferences/media-treatments.md
インストール + 認証、プロバイダーテーブル、RAMラダー、--local-only、--providerreferences/setup-providers.md
記憶された環境設定 + 凍結されたレシピ(ユーザーメモリ)references/memory.md
所有権マトリックス、使用統計、テレメトリー、プライバシー(メンテナー向け)references/meta.md

Individual skills in this repo

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

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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.

heygen-com/hyperframes

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.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

関連スキル