Communitygithub.com

hyperframes-studio

HyperFrames Studioのプロジェクト構造とタイムラインのコンベンションを定義します。各シーンをサブコンポジションとして配置し、編集可能なタイムラインを実現します。

hyperframes-studio とは?

HyperFrames Studioは、AIエージェントが動画編集プロジェクトを効率的に構築・編集するためのコンベンション(規約)を定義したスキルです。このスキルは主にClaude Codeや同様のAIコーディングエージェント向けに設計されており、プロジェクトのタイムラインが各要素ごとに1行として表示されるようにし、編集者が直感的に操作できる短く読みやすいタイムラインを保証します。 具体的には、すべてのシーンをサブコンポジション(別ファイル)として作成し、ルートコンポジションにはタイムドホストとメディアのみを配置するルールを定めています。また、キャプションは1トラックにまとめ、要素の種類ごとにトラックを分けることで、ユーザーが選択、ミュート、ドラッグ操作を簡単に行えるようにします。これにより、複雑なネスト構造が原因で生じる編集不能な行を防ぎます。 さらに、新しいフィルムの作成手順(ブリーフ、方向性、ストーリーボード、ビルド、ノート)を明確に定義し、AIエージェントが作業を開始する前にユーザーの意図を正確に理解するための会話ガイドラインも含まれています。このスキルはHyperFramesプラグインとしてもスタンドアロンとしても利用可能で、`hyperframes lint`によるチェック機能も備えています。

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

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

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

ドキュメント

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

HyperFrames Studio コンベンション

Studioは、トップレベルの要素ごとに1つのタイムライン行を描画します。以下のルールに従ったプロジェクトは短く読みやすいタイムラインとして開かれます。従わないプロジェクトは、ユーザーが編集できないラベルのない行の壁として開かれます。これらは、何を構築するかに関するコンベンションです。クリップの変更方法については、/hyperframes-core references/creator-editing-recipes.md に従い、同じ編集の異なる形式を決して発明しないでください。

0. 構築する前に話し合う

ファイルを開く前にメッセージを読んでください。それが何を求めているかを判断してください。

人あなた
変更を指定する(丁寧でも「タイトルを大きくして」「3つ目のシーンをカットして」)それを行う。
完成したフィルムに対するフィーリングノートを与える(「イントロがぎこちない」「尺が足りない」)原因を見つけ、測定可能なものを変更し、ノートが意味していたことと何が動いたかを説明し、/hyperframes-creative references/storyboard-recipe.md § 4 に従って記録する。
質問をし、変更を指定しない(「なぜタイトルがジャンプするの?」)それに答える。何も変更しない。
何も変更しない、待つ、「考えている」「話しましょう」と言うファイルを一切変更しない。気づいた修正も含めない。言葉で提案する。
このフィルムに対するアイデアを持ち込むが、具体的な変更はない(「エンディングをもっと大きくしたい」)変更を提案し、それを計画に追加する(下記参照)。コンポジションファイルは変更しない。
新しいフィルムを依頼する計画を立てる(§ 5)。
計画を承認する(「作って」「Go」)承認されたものを構築する。

質問をしつつ変更も指定するメッセージには、回答と変更の両方を行います。何かを求めているかどうか判断できない場合のみ、それは会話です。間違った回答は1メッセージのコストで済みますが、間違った構築は長い実行時間と一連のノートを要します。

会話の返信:

  • 最初に、平易な言葉で、数文で答える。
  • フィルムを変更する答えになる質問のみを、推奨される回答とそのトレードオフとともに尋ねる(「30秒はフィードに適し、60秒はデモの余地を残す」)。
  • 形にすべきアイデアがある場合: 新しいフィルムについては /hyperframes references/pitch-round.md の方向性に従う。このフィルムに関するアイデアについては、指定された部分に対する2つまたは3つのオプションを提示する。1つを推奨する。
  • 次のステップとそれを開始する言葉で終える(「作ってと言えば、始めます」)。

計画をチャットだけでなくプロジェクトに保持する。次のメッセージはこのセッションを見ることができない新しいセッションで始まる可能性がある。計画を /hyperframes-creative references/storyboard-recipe.md § 4 がラウンドを記録する方法で STORYBOARD.md に追加する。ロックされたフレームを上書きしない。もしその人が何も変更しないように頼んだなら、何も書かない。計画を返信に記載し、保存を提案する。

1. すべてのシーンはサブコンポジションである

ルートコンポジションは、タイムドホスト、メディア、オーディオのみを保持します。ネストされた構造(子要素を含むdiv、サブタイトル付きのタイトル、チャート)を持つシーンはすべて、data-composition-src でロードされる独自のファイルであり、配線は references/sub-compositions.md に従います。

ルート内に残されたネストされたマークアップは、それ自体の行になりません。1つの不透明な行の中に隠れ、部分的にトリミングしたり移動したりできなくなります。

あたかも構造リントがすべての違反を拒否するかのように作成してください。

2. 1つのキャプショントラック

  • すべてのキャプションは1つのトラックに配置されます。つまり、すべてのキャプショングループを順に運ぶ、data-track-kind="captions" とマークされた単一のサブコンポジションホスト(1つの data-track-index)です。
  • キャプショングループごとに1行にしたり、キャプションを他の種類のトラックに混在させたりしないでください。
  • ワードタイミングルールは変更ありません。/embedded-captions および caption_* リントルールを参照してください。

3. トラックごとに1つの要素種類

種類ごとにグループ化して、各行がユーザーが選択、ミュート、またはセットとしてドラッグできる1つのものになるようにします。

種類data-track-kind
ベースビデオ / A-ロールvideo(タグから)
シーン、オーバーレイ、グラフィックスgraphics
キャプションcaptions
オーディオ(ナレーション、音楽、効果音)audio(タグから)

data-track-kind をサブコンポジションホストに設定します。ビデオとオーディオの種類はタグから来るため、<video> と <audio> は属性を必要としません。各種類に独自の data-track-index を与えます。番号は表示専用であり、何が上にレンダリングされるかを変更することはありません。レイヤリングにはCSSを使用します。

4. セーフゾーン

定規やセーフボックスオーバーレイはプレビューペインにのみ存在し、コンポジション内には決して配置しないでください。そのため、ガイド要素をHTMLに追加しないでください。 両方のフレーミング(ワイドと縦長)は、Premiereのデフォルトである同じ2つのセーフボックスを使用します。プレビュートグルは、すべてのエッジの中間点にティックを付けてそれらを描画します。ソース: packages/studio/src/utils/previewSafeMargins.ts の ACTION_SAFE_PERCENT と TITLE_SAFE_PERCENT。

ボックスフレームの割合各エッジの内側余白
アクションセーフ90%5%
タイトルセーフ80%10%
  • セーフマージン: 表示されるすべてのものはアクションセーフボックス(90%)内に収め、キャプションと主要コンテンツはタイトルセーフボックス(80%)内に収めます。
  • 2アップおよび50/50レイアウトでは、各半分のコンテンツをタイトルセーフボックス内に収めます。

5. 新しいフィルム: 計画、ストーリーボード、構築

hyperframes-launches のフィルムはこの順序で作成されました。各ステップには所有者がいます。それに従い、ここで再述しないでください。

ステップ所有者
1. ブリーフ/hyperframes references/intent-interview.md。既存のプロジェクト内では、同じフィルムのフォローオン(新しいバージョンやカットダウン)のみが残ります。同じワークフローとアスペクト比です。必須の質問をし、hyperframes init はスキップし、BRIEF.md や STORYBOARD.md を上書きせず、それぞれに新しい日付セクションを追加し、その旨を返信で伝えます。ワークフローまたはアスペクト比が異なるフィルムは新しいプロジェクトを開始し、返信でその旨を伝えます。
2. 方向性/hyperframes references/pitch-round.md
3. ストーリーボード/hyperframes-creative references/storyboard-recipe.md
4. 構築ブリーフがルーティングするワークフロー(/hyperframes § 2)とその独自の参考文献
5. ノート/hyperframes references/review-loop.md

製品ローンチ向けにローンチフィルムが追加するもの。ワークフローの選択されたアークが別のことを言う場合、アークが優先されます。

  • ローンチする製品の実際のフッテージ。 ワークフローがそれ自体でキャプチャしない限り(URLからのサイト)、ブリーフでスクリーンレコーディングを依頼し、ラベル付きプレースホルダーでスロットを確保し、到着するまで保持します。ローンチする製品のUIを近似しないでください。コンテキストとして表示されるサードパーティツール(チャットアプリ、エディタ)は、キャプチャから忠実に再構築します。
  • 一つの世界。 同じウィンドウまたはキャンバスがビート間で継続します。すべてのカットをスクラブします。永続するものはジャンプしてはいけません。
  • カーソルとスクロールされたコンテンツ。 カーソル、またはウィンドウ自体がスクロールアウトするコンテンツは、フレーム内でフェードアウトするのではなく、ウィンドウまたはフレームの端から出ていきます。要素とテキストのスワップは、ワークフローに cut-catalog.md がある場合はそれに従います。
  • コマンドまたはアドレスにクローズし、 まだ動いているフッテージにロゴをランディングさせます。
  • すべてのバージョンでランタイムを明記します。 ターゲットを超えて実行するかどうかは、あなたではなくその人の判断です。

作業の確認

hyperframes lint を実行し、すべての指摘事項を修正します。その後、プロジェクトをStudioで開き、タイムラインにベース行、シーンホストごとに1行、1つのキャプション行、およびオーディオ行が表示されていることを確認します。

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]

関連スキル