Communitygithub.com

一般ビデオ

Hyperframesスキルを使用して、ビデオ編集、メディア処理、プロジェクト管理をガイドするワークフローです。

一般ビデオ とは?

一般ビデオスキルは、Hyperframesフレームワーク内でビデオ制作を効率的かつ一貫性のある方法で進めるためのワークフローを提供します。これは、メディアソースのアダプター適用、プロジェクトの状態に基づいた開始、コンパニオンフローと自動化フローの区別、知識の段階的な読み込み、そして正確な編集と構成の実行を重視しています。特に、Figuraやメディア関連のアダプターを介した認証ゲートやソース管理を自動化し、開発者が手動で面倒な設定を行う必要を減らします。このスキルは、`general-video`というワークフローに基づいて動作し、プロジェクトの初期化から、編集、レビュー、最終的なレンダリング承認までの全工程をカバーします。開発者は、ブリーフィングから自動生成されるプロジェクト構造や、Hyperframesのコア、クリエイティブ、アニメーションなどの関連スキルを活用することで、ビデオ制作の生産性を大幅に向上させることができます。

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

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

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

ドキュメント

一般ビデオ は何をしますか?

このワークフローに依存する前に、以下を実行してください:

npx hyperframes skills update general-video

成功したno-opは、スキルが最新であることを意味します。メモリから続行する代わりに、更新エラーを表示してください。

1. クロスカッティングソースアダプターの適用

  • メディア: オーディオ、画像、アイコン、ロゴ、音声、グレーディング、LUT、トリートメント/エフェクト、キャプション、またはメディア操作の必要性がある場合、/media-useをロードし、../media-use/references/resolve.md(解決、採用、再利用)と../media-use/references/setup-providers.md(プロバイダー、認証)に従ってください。あいまいな映像フィードバックや名前付きスタイルには、編集前に../media-use/references/media-treatments.mdを使用してください。CSS/SVG/不透明度でサポートされているメディアエフェクトを即興で作成しないでください。最初の認証済みプロバイダーアクションの前に、npx hyperframes auth statusを実行し、その出力をそのまま中継してください。サインアウトしている場合は、../hyperframes/references/brief-contract.mdのゲートを適用してください:協調フローはサインインまたは明示的なオフライン選択を待ちます。自律フローはステータスを表示し、利用可能なオフラインプロバイダーを通じて続行します。必要な機能を満たせるオフラインプロバイダーがない場合は、ブロッカーを表示してください。ローカルでの採用だけでは認証ゲートは必要ありません。
  • Figma: 入力がfigma.comのURLである場合、最初に/figmaを実行してください。エクスポートされたアセット、トークン、コンポーネント、またはストーリーボードフレームから構築してください。生のFigmaコネクター呼び出しは使用しないでください。SVGサニタイゼーション、メディアの来歴、ブランドトークンのバインディングをスキップするためです。

これらのアダプターは、/hyperframesによって選択されたワークフローを変更しません。

2. プロジェクト状態から開始

最初に一致する行を適用してください。下位の状態行を評価しないでください:

状態アクション
特定の編集編集を行い、既存のプロジェクト決定を保持し、影響を受けるチェックを再実行してください。調査を再開しないでください。
BRIEF.mdが存在するそれを読んでください。workflowが別のワークフローを指定しており、flowがcompanionでない場合、引き継いでください。ブリーフの質問はしないでください。
ブリーフはないが、hyperframes.jsonまたはSTORYBOARD.mdが存在するファイルと記録された設定から再開してください。既知の事実からのみBRIEF.mdをバックフィルしてください。
新規作成/hyperframesとそのインテントレイヤーを実行してください。workflow: general-videoまたはflow: companionの場合のみここに戻ってください。

新しいプロジェクトの場合、ブリーフからkebab-caseのディレクトリ名を選択し、ブリーフを書く前にスキャフォールドしてください:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

その後、../hyperframes/references/brief-format.mdを使用して、プロジェクトルートにBRIEF.mdを書いてください。既存のプロジェクトでは、ルートはhyperframes.jsonを含むディレクトリです。ブリーフ形式で指定された、確認済みの設定に基づくフィールドのみを記録し、node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>を使用してください。推測されたデフォルトは決して記録しないでください。ここで<MEDIA_DIR>はインストールされた/media-useスキルディレクトリであり、<PROJECT_ROOT>はhyperframes.jsonを含むディレクトリです。インテントレイヤーがレシピを採用した場合、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name>を使用してそれを適用し、再度質問しないでください。

3. 実行形状の解釈

../hyperframes/references/brief-contract.mdからの正規の用語のみを使用してください:

フィールド意味効果
flow誰が主導するかautomation:ルートを選択して実行します。companion:会話の中で共創します。
storyboard構築前に計画、スケッチ、レビューするかyes:計画とスケッチレビューを実行します(storyboard.html)。no:それなしで構築します。
派生したmodeチェックポイントゲートの動作方法ブリーフ契約に従ってください。ユーザーにモードの名前を尋ねないでください。

これらの状態の同義語を発明しないでください。進行中の「とにかく構築する」シグナルはインテントレイヤーによって処理され、flow: automation、storyboard: noとして到着します。

  • flow: automationの場合、ルートを選択し、最初の進捗更新で1行でそれを述べてください。
  • 特定の編集の場合、新しいルートを発明せずに編集を行ってください。

既存の映像のハードカット、トリム、スプライス、または並べ替えの場合、同じビデオソースを複数のクリップ要素に複製してください。各コピーで、data-media-startとdata-durationでソース範囲を設定し、次にdata-startで作者が配置/順序を設定します。別々に作成されたオーディオは、一致する<audio>要素で同一のクリップ範囲とタイミングに従います。/hyperframes-coreがこの時間編集を所有します。ズーム、パンチ、パン、クロップ、マスク、または内部ラッパーのclip-pathなどの視覚プロパティアニメーションには/hyperframes-keyframesのみを使用してください。../hyperframes-core/references/creator-editing-recipes.mdから完全な契約をコピーしてください。

コンパニオンフロー

flow: companionの場合:

  • BRIEF.mdを読み、受け入れられた## Assetsと## Customizationsをプロジェクトアーティファクトと調整してください。受け入れられたがまだ保留中の作業を完了してください。完了した作業はそのままにしておいてください。受け入れられた機能を新しいものとして再度提供しないでください。
  • 請負者ではなく、監督として到着してください。 コンパニオンを選択したユーザーは、関与と品質を選択しました。正直な応答は、あなたが防御できる最小のバージョンではなく、あなたがデザインできる最良のバージョンです。最初の計画は天井の処理です:ストーリーアーク(最も近いジャンルのレンズを借用する — メニュー§ ジャンルレンズ)、デザイン仕様、各シーンのモーショントリートメントを名前で引用(§ 5の計画規律)、トランジション、オーディオアイデンティティ — 音楽とサウンドマーク、または意図的な沈黙 — ユーザーの素材の配置、そしてデザインされたオープンとクローズ。各レイヤーが何を追加するかを1行で述べてください。高価なもの(レンダリング時間、サインイン、課金)を名前を挙げるときにフラグを立ててください。ユーザーは処理をトリミングします。承認ごとに組み立てる必要があってはなりません。
  • 天井はコンセプトに属し、ツールボックスに属しません。 すべてのレイヤーはブリーフのメッセージに奉仕しなければなりません — どのビデオにも同じようにドレスアップする処理は装飾です。クラフトは天井に向かって上昇します。コンテンツは要求されたものを超えて成長することはありません(§ 6)。
  • チェックポイント間では、../hyperframes/references/capability-menu.mdは2つの方法で機能します。トリガーリストとして:ユーザーがその入力を言及したとき、またはビルドがそのニーズに達したときに関連する機能を提供してください。各パスのアップグレードチャネルとして:計画、スケッチ、またはビルドのチェックポイントは、ユーザーが見ている素材に向けられた1つまたは2つのトレースされたオファーを運ぶことができます(「シーン3の統計はカウントアップ処理を望んでいます」)。提供する前にそれを読んでください。完全なカタログをダンプしないでください。
  • ユーザーが機能を受け入れた後、そのアーティファクトを生成し、すぐに一致するBRIEF.md本文セクションに決定を記録してください。ユーザーが明示的に変更した場合にのみ、frontmatterフィールドを書き換え、確認済みの設定を記録してください。
  • 同じストーリーボード、検証、最終プレビュー、レンダリング承認ゲートを維持してください。コンパニオンは誰が操縦するかを変更しますが、品質に必要なものを変更するわけではありません。

4. 各段階の前に必要な知識を読み込む

これらの読み込みは、条件が一致する場合に必須です:

条件行動前に読む
任意の構成HTMLまたはシーンレイアウト/hyperframes-core; レイアウト契約にはreferences/determinism-rules.mdを使用
任意の非自明な作成または視覚処理/hyperframes-creative → references/house-style.md および references/video-composition.md
任意のモーション、アニメーション、またはシーントランジション/hyperframes-animation; 一致するルール、アダプター、ブループリント、またはトランジションリファレンスへのルーティングに従ってください
storyboard: yes../hyperframes/references/storyboard-format.md および ../hyperframes/references/review-loop.md
任意のメディアアセットまたは操作(ナレーション、BGM、SFX、キャプション、グレーディング、トランスフォームを含む)/media-use; フレームワークの再生と配置については、/hyperframes-core → references/variables-and-media.mdも読んでください
マルチシーンアセンブリ../hyperframes/references/production-loop.md
flow: companion、最初の計画の前/hyperframes-creative → references/story-spine.md および references/house-style.md; 最も近いジャンルレンズと完全な ../hyperframes/references/capability-menu.md — 天井処理はこれらからデザインされ、記憶から呼び出されるものではありません
コンパニオン機能のオファー、キャプチャ、ビートグリッド、ジェネレーティブビデオ、マップ、公開、またはクロスワークフロー機能../hyperframes/references/capability-menu.md
デザイン仕様が存在する場合、最終承認の前/hyperframes-creative → references/design-adherence.md

これらの読み込みを記憶に置き換えないでください。プログレッシブディスクロージャーは、一致するリファレンスが実際に読み込まれた場合にのみコンテキストを節約します。

5. 構成の実行

この依存関係順序を使用してください。入力がない場合のみ段階をスキップしてください。

  1. 計画。 ビューアーアーク、構造、リズム、および期間のドライバーを述べてください。短い単一シーンには1つのファイルを使用してください。3つ以上のハードシーンカットまたは再利用されるシーンにはサブ構成を使用してください。ナレーションアークには/hyperframes-creative → references/story-spine.md、リズムにはreferences/beat-direction.md、構造には/hyperframes-core → references/composition-patterns.mdを読んでください。オープンエンドのマルチシーンブリーフの場合、/hyperframes-creative → references/prompt-expansion.mdを通じてプロンプトを拡張してください。マルチシーンの計画は、各シーンの形状を引用します:適切なものがあれば/hyperframes-animation → blueprints-index.mdからのブループリントID、または適切なものがない場合に構成する名前付きルールをrules-index.mdから引用します — モーション名はそれらのインデックスからのものであり、発明されたものではありません。ストーリーの真実がどのシーンが存在するかを決定します。引用はそれらをドレスアップします。自分で名前付きのルックを構築する前に、ライブカタログを検索してください:ブリーフが名前を挙げるすべてのルック、エフェクト、処理、トランジション — 「CRTスキャンライン」、「グリッチ」、「フィルムグレイン」、「シャイマースイープ」、「コンフェッティバースト」 — に対して、npx hyperframes catalog --query "<ルックを平易な英語で>" --jsonを実行し、計画がそのルックの構築方法を名前を挙げる前に上位の結果を読んでください。検索には何もインストールする必要はありません:プロジェクトも、事前のaddも、アカウントも不要です。任意のディレクトリからホストされたレジストリ全体(約400のブロックとコンポーネント)をランク付けするため、ビルド中にユーザーが尋ねるルックにも適用されます。計画が名前を挙げるブロックは段階3でインストールされます。検索で適切なものが見つからなかった場合にのみ、ルックを手動で作成してください。マルチシーンの計画は、ディスパッチアーティファクトとしても記録されます:STORYBOARD.mdのシーンごとに1つの## Frame Nブロック — status: outline、宣言されたsrc:、ブループリント/ルールの引用、ビートテキスト — storyboard: noの場合でも同様です。このブロックがディスパッチユニットです。ストーリーボードシートはレビューサーフェスのみです。
  2. 要求された場合に計画をレビューします。 storyboard: yesの場合、これらのブロックに対して共有レビューループを実行してください。storyboard: noの場合、計画の一時停止やスケッチシートなしで続行してください。とにかく計画の一時停止が発生した場合、サブエージェント委任許可(ステップ4のディスパッチのためにcodexが必要とする)をその一時停止に折りたたんで、後で再度停止しないでください。
  3. 依存関係を解決します。 並行作業の前にレジストリブロックをインストールしてください。ユーザーアセットをステージングし、既存のものを採用します。

Individual skills in this repo

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

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

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

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

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

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

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]

heygen-com/hyperframes

name: embedded-captions

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

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

関連スキル