Communitygithub.com

AntlersSam/saas-launch-video-kit

専用ワークフローがない場合やBRIEF.mdで`flow: companion`と指定された場合に、カスタムHyperFramesコンポジションを作成・編集します。

saas-launch-video-kit とは?

このスキルは、HyperFramesエコシステム内で「汎用ビデオ」ワークフローとして機能し、長尺・マルチシーン作品、ブランドリール、サイズルリール、モンタージュ、静的ループ、タイトルカード、フッテージリミックス、自由形式のビルドを処理します。動きの多い短いアニメーションユニット(タイトルアニメーションを含む)にはモーショングラフィックスワークフローを使用し、新規作成ルーティングはまずhyperframesスキルを通して行います。このスキルは、メディアアセット処理のための/media-use、Figma統合用の/figma、およびコンポジションルール用の/hyperframes-coreなど、プラグイン実行ルールに従い、複数の必須アダプターをロードします。initコマンドでプロジェクトをスキャフォールディングし、BRIEF.mdに沿ったディレクトリ構造を作成し、状態ベースのアクション(特定編集、既存プロジェクトからの再開、新規作成)を処理し、明確に定義されたパラメータ(フロー、ストーリーボード、モード)に基づくアクションを自動化または共同作業で実行します。主にClaude Code(コードエージェント)で使用されることを想定しており、計画、検証、プレビュー、レンダリング承認の各ゲートを通じて品質を保証し、capability-menu.mdを使用してユーザーのニーズに基づいて関連機能を提供します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/AntlersSam/saas-launch-video-kit/tree/HEAD/skills/general-video

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

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

ドキュメント

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

汎用ビデオ

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

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サニタイゼーション、メディアプロvenance、およびブランドトークンバインディングをスキップするためです。

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

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

最初に一致する行を適用し、それより下の状態行は評価しないでください:

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

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

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は双方向に機能します。トリガーリストとして: ユーザーがその入力を言及したとき、またはビルドがそのニーズに達したときに、関連する機能を提供してください。各パスのアップグレードチャネルとして: 計画、スケッチ、またはビルドのチェックポイントは、ユーザーが見ている素材に向けられた1つまたは2つのトレースされたオファーを運ぶことができます(「シーン3の統計にはカウントアップトリートメントが必要です」)。提供する前にそれを読んでください。完全なカタログをダンプしないでください。
  • ユーザーが機能を受け入れた後、その成果物を作成し、決定を即座に一致するBRIEF.md本文セクションに記録してください。フロントマターのフィールドを書き換え、ユーザーが明示的に変更した場合のみ、確認済みの設定を記録してください。
  • 同じストーリーボード、検証、最終プレビュー、およびレンダリング承認ゲートを維持してください。共同作業は、誰が操縦するかを変更します。品質に必要なものを変更するものではありません。

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の場合、計画一時停止やスケッチシートなしで続行してください。

...

[上記ルールに従い、翻訳対象とされた部分までを翻訳。以降の原文がtruncatedのため、ここで切ります。]

Individual skills in this repo

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

AntlersSam/saas-launch-video-kit

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AntlersSam/saas-launch-video-kit

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

AntlersSam/saas-launch-video-kit

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

AntlersSam/saas-launch-video-kit

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

関連スキル