Communitygithub.com

pr-to-video

GitHubのプルリクエスト(PR URL、owner/repo#N、またはチェックアウト済みリポジトリにおける「this PR」)を、コード変更を説明するHyperFrames動画に変換します。

pr-to-video とは?

このスキルは、GitHubのプルリクエスト(PR)を詳細なコード変更説明動画に変換します。PRのURL、`owner/repo#N`形式、またはチェックアウト済みリポジトリ内の「this PR」を入力として受け付けます。動画のスタイルは「コードエディトリアル(code-editorial)」に固定されており、変更内容の解説に特化したプロフェッショナルな雰囲気を提供します。 ワークフローは6つのステップで構成されています:Setup(初期設定)、Ingest PR(PR取り込み)、Design System(デザインシステム)、Storyboard & Script(ストーリーボードとスクリプト)、Frames(フレーム)、Final Render(最終レンダリング)。各ステップにはゲート(承認ポイント)があり、ユーザーはStep 0、Step 3、Step 6でレビューと承認を行います。 このスキルはHyperFramesプラットフォーム上で動作し、`gh` CLIを使ってPRデータを取得します。動画にはPRの差分、コントリビューターのアバター、ナレーション(HeyGenまたはローカルのKokoro TTSを使用)、BGMが含まれます。最終出力は`renders/video.mp4`として保存されます。 主な利点は、コードレビューのプロセスを視覚的に補完し、複雑な変更をチームや関係者にわかりやすく伝えられることです。また、recipe機能を使えば、既存の設定を再利用して効率的に動画を作成することも可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/pr-to-video

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

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

ドキュメント

まず、このスキルを最新に保つ — サイレントで実行し、質問しないでください: npx hyperframes skills update pr-to-video。全てが最新の場合は高速で何も起こりません。そうでない場合は、このスキルとそれに依存するコアドメインスキルを、それらに依存する前に更新します。

media-use: オーディオ/画像/ロゴを入手する前に、/media-useを呼び出して、HeyGenカタログからBGM/SFX/画像を、公式ソースからブランドロゴを解決してください。まず--adoptを実行して既存のアセットを登録します。 /media-useスキルを参照してください。

PR to HyperFrames

このスキルを使用して、GitHubのプルリクエストを取り込み、変更を理解し、コード変更説明動画を計画し、HyperFramesでフレームごとに構築します。入力はコード変更(ghで読み取り)であり、ウェブサイトではありません — キャプチャステップはなく、コントリビューターのアバター以外の実際のアセットもありません。

正面玄関は/hyperframesです。 あなたはオーケストレーターです。各ステップを実行し、そのゲートを確認してからのみ続行してください。このスキルはGitHubのプルリクエスト(コード変更)用です。その他の意図、単なる「動画作成」、または不確かな場合は、まず/hyperframesを読んでください — インテントレイヤーがすべてのルート決定を所有しており、ここにBRIEF.mdなしで新規作成が到着した場合も、それを経由します(Setupの開始ルール)。

あなたはオーケストレーターです。解決済みの外部PROJECT_DIRで作業し、デフォルトでは呼び出し元リポジトリでは作業しないでください。ステップを順番に実行し、各ゲートを通過してから続行してください。ユーザーゲートステップはStep 0、Step 3、Step 6です。Step 0の前に../hyperframes-core/references/brief-contract.mdを読んでください — ゲートタイプと、BRIEF.mdのflow/storyboardがStep 3/4/6のゲートを管理するモードをどのように導出するかを定義しています。Step 5を除き、すべてのステップを自分で実行してください。Step 5では、制限されたフレームワーカープールを派遣します。設計ルールやモーションルールをここに配置しないでください。これらはフレームワーカーサブエージェント、このスキルのローカル../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/、およびhyperframes-creativeに存在します。

ワークフロー: Step 0 セットアップ → hyperframes.json; Step 1 取り込み → capture/extracted/ + assets/<login>.png; Step 2 デザインシステム → frame.md; Step 3 ストーリーボード/スクリプト → STORYBOARD.md および SCRIPT.md; Step 3.1 オーディオ → audio_meta.json; Step 4 ビジュアルデザイン → 拡張された STORYBOARD.md; Step 5 フレーム → compositions/frames/NN-*.html および index.html; Step 6 最終レンダリング → renders/video.mp4。


Step 0: セットアップ

目標: 確認済みのブリーフ(PR参照を含む — 完全なURL、<owner>/<repo>#<N>参照、またはチェックアウト済みリポジトリ内の「this PR」)を持って開始し、HyperFramesプロジェクトを作成し、ブリーフを永続化します。スタイルは常にコードエディトリアル(Step 2で固定、決して尋ねられません)。

ブリーフはインテントレイヤーによって確認され、ここでの質問によって確認されるものではありません。 開始ルール、順番: (1) BRIEF.mdが存在する → それを読み、何も質問しない — ブリーフは確定しており、そのflow/storyboardがモードを導出します(ブリーフ契約 § 1)。 (2) BRIEF.mdはないがプロジェクトが存在する(ディスク上にhyperframes.json / STORYBOARD.mdがある) → ストーリーボードのフロントマターと記録された設定から再開します。構築途中のプロジェクトに再び問い合わせることは決してしません。 (3) どちらもない — ここに直接到着した新規作成リクエスト → /hyperframesを読み、そのインテントレイヤー(references/intent-interview.md)を実行します。レシピと記憶されたデフォルトを確認し、このルートの質問を行います — PRサイズ→長さのドクトリンを含みます(これは../hyperframes/references/routes/pr-to-video.mdに完全に存在します) — その後、ロックされたブリーフを返します。編集リクエストはこれらすべてをスキップします — 編集を実行してください。

他の作業を行う前に、プロジェクトディレクトリを解決してください。ユーザー提供のプロジェクトディレクトリを保持します。それ以外の場合は、リゾルバーが出力する永続的な外部キャッシュ場所を使用します。呼び出し元リポジトリにvideos/を作成しないでください:

PR="<url | owner/repo#N>"
if [ -n "${EXPLICIT_PROJECT_DIR:-}" ]; then
  PROJECT_DIR="$(node <SKILL_DIR>/scripts/project-dir.mjs --pr "$PR" --project-dir "$EXPLICIT_PROJECT_DIR")"
else
  PROJECT_DIR="$(node <SKILL_DIR>/scripts/project-dir.mjs --pr "$PR")"
fi
echo "PR-to-video project: $PROJECT_DIR"
node <SKILL_DIR>/scripts/preflight.mjs

機能の事前チェックは、フェッチ、ストーリー作業、オーディオ、またはフレームディスパッチの前に実行されます。インストールされたCLIがこのスキルに必要なバリデーションコマンドを実行できない場合は、まずそのアップグレード手順を表示して停止し、実行のコンテキストを消費しないようにします。

$PROJECT_DIR/hyperframes.jsonがない場合のみ初期化します。そのベース名はPRから取得されます(例: acme-sdk-pr-1842)。ワークスペース名やタイムスタンプは決して使用しないでください。

npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=pr-to-video — initはインストールされたスキルをGitHub上の最新版と比較し、古いものがあればグローバルセットを更新します。

以下のすべての相対パスコマンドは、$PROJECT_DIRを作業ディレクトリとして実行されます。明示的なサブシェルのない例は(cd "$PROJECT_DIR" && …)を意味します。呼び出し元リポジトリのワーキングツリーは決して変更しないでください。

initの直後にBRIEF.mdを書き込みます(決して前には書き込みません — initは空でないディレクトリを拒否します): インテントレイヤーのロックされたブリーフ、形式は../hyperframes-core/references/brief-format.mdに従います。<MEDIA_DIR>をインストールされた/media-useスキルディレクトリとして解決します。次に、各設定に基づく回答をnode <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .で記録します(brief-format.mdがサブセットを指定します)。インテントレイヤーがレシピを採用した場合、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>を実行します。これにより、そのframe.mdがプロジェクトにコピーされます(Step 2はスキップされます)そして、Step 3のドラフトを作成するためのスケルトンを返します。レシピは回答を入力しますが、承認は入力しません。レビューゲートは引き続き実行されます。

Setupを通過する前にサインインステータスを表示します — npx hyperframes auth statusを実行し、その出力をそのまま中継します。ボイス/BGMがHeyGenを使用するかローカルエンジンを使用するか、およびサインアウトしている場合のサインイン方法を報告します。以下のいずれかのブランチを適用します:

  • コラボレーティブ: ユーザーがサインインするか、明示的にoffline / goを選択するのを待ちます。
  • 自律: ステータスを述べ、利用可能なローカルエンジンで続行します。

オフラインプロバイダーが存在しない場合に、必要な機能を静かに省略しないでください。ブロッカーを表面化させてください。この決定を別の質問に折り込んだり、リポジトリごとの.envにキーを書き込んだりしないでください。認証の所有権とオフラインフォールバック: /media-use references/setup-providers.md § プロバイダー。

ゲート: hyperframes.jsonとBRIEF.mdが存在する; PR参照がブリーフにキャプチャされている; 設定に基づく回答が記録されている(ブリーフ契約 § 2); サインインステータスが表示されている(サインイン済み、またはオフラインで続行)。


Step 1: PRを取り込む(キャプチャなし)

目標: PRの事実を取得し、情報源としてプロジェクトに取り込みます。ウェブサイトのキャプチャはありません。fetch-pr.mjsはghを決定論的に実行します — ページネーションされたgh apiを介してファイルリストを完了するため、大きなPRでも約100ファイルで切り捨てられることはなく、capture/pr.json + capture/diff.patchのみを書き込みます(スクラッチディレクトリはなし)。MERGEDされたPRの場合は、ベストエフォートのshipped_version(+ version_source)もpr.jsonに解決されるため、エンドカードで実際のバージョンを引用でき、発明する必要がありません。次にingest.mjsがそれをオフラインで合成キャプチャパッケージに取り込みます。

PR="<url | owner/repo#N | N>"

# PRを決定論的にフェッチ: ghを実行し、ページネーションされたgh apiを介してファイルリストを完了します
# (大きなPRでも約100ファイルで切り捨てられません)、capture/pr.json +
# capture/diff.patchのみを書き込みます — スクラッチディレクトリはなし。gh auth / not-found / private エラーはここで終了コード1で終了します。
(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/fetch-pr.mjs --pr "$PR" --out-dir ./capture)

# オフライン変換 → capture/extracted/{tokens.json (colors:[] → code-editorialパレット),
# visible-text.txt (ブリーフ), people.json (コントリビューター、ボットフィルター済み、name+login,
# avatarFile=assets/<login>.png)}。
(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/ingest.mjs \
  --pr-json ./capture/pr.json --diff ./capture/diff.patch --out-dir ./capture/extracted)

# 人物側の1つのネットワークステップ — 各コントリビューターのGitHubアバターを
# assets/<login>.pngにダウンロードします(クレジットクローズ用)。ベストエフォート、常に終了コード0で終了します。
(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/fetch-people-avatars.mjs \
  --people ./capture/extracted/people.json)

fetch-pr.mjsが終了コード1で終了した場合(gh auth / not found / private)、そのstderrを報告して停止します — PRの内容をでっち上げないでください。ingest.mjsが終了コード1で終了した場合、そのstderrを読み(通常は不正な形式のpr.json)、修正して再実行します(決定論的)。fetch-people-avatars.mjsは常に終了コード0で終了します。アバターがない場合は、単に作者へのクレジットクローズがないことを意味します。

people.jsonは、ghが既に名前を付けているコントリビューター(PR作成者、コミット作成者、mergedBy)のnameを保持します。残り(レビュワー/コメンター/アサイニー、gh pr viewは常にログインのみを返す)はnullです。Step 3でクレジットクローズを書き込む前に、実際にそのフレームに表示される1〜6人の人物について、自分でnull名を解決します: gh api users/<login> --jq .name(ghは既にあります — スクリプト化する必要はありません)。GitHubにもそのユーザーの公開名がない場合は、画面上でログインにフォールバックし、その人を読み上げ行から削除します(story-design.mdのクレジットセクションを参照 — ナレーションは名前を言う必要があり、生のハンドルは決して使用しません)。

ゲート: capture/pr.json、capture/diff.patch、capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/people.jsonが存在する。PRの変更を1つの明確な文で説明できる。assets/<login>.pngはベストエフォート — その欠如は失敗ではありません。


Step 2: デザインシステム

目標: コードエディトリアルフレームプリセットを採用します。スクリプトがこれをこの動画のframe.md + キャプションスキンに変換します。

スタイルは固定されています — コードエディトリアル(ウォームなエディトリアル; 差分用に構築されたネイビーのコードサーフェス)。実行:

node <SKILL_DIR>/scripts/build-frame.mjs --preset code-editorial --hyperframes .

このスクリプトは、code-editorialプリセットのFRAME.md → frame.mdにコピーし、capture/extracted/tokens.json内の任意のブランドトークンにリミックスします(PRにはありません → colors:[]/fonts:[]はcode-editorial独自のパレット、完全なデザインを保持します)。プリセットのキャプションスキンを.hyperframes/caption-skin.htmlにコピーし、自己検証します(マッピングが壊れていると終了コード1で終了)。終了コード0で終了したらすぐに進みます — 手動編集は行いません。

ゲート: build-frame.mjsが終了コード0で終了した — frame.mdがcode-editorialプリセットから存在し、.hyperframes/caption-skin.htmlがキャプションスキンソースとして存在する。


Step 3: ストーリーボードとスクリプト

目標: PRを承認されたフレームごとの説明計画に変換します。

../hyperframes-creative/references/story-spine.md(フック言語、証拠より先に価値、提案としてのストーリーボード、ソーストレーサブルなビジュアル)、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes-core/references/storyboard-format.md、および../hyperframes-core/references/script-format.mdを読んでください。これらを使用してSTORYBOARD.mdを書き、ナレーションが必要な場合はSCRIPT.mdを書きます。フロントマターのduration:をブリーフのlengthから設定します — 大まかな期待値です。アセンブリは、実際の尺がそれに対してどこにあるかを報告します。

PRのアーキタイプ(changelog / feature-reveal / fix-explainer / refactor-walkthrough)、PRネイティブのフレームタイプ、フック、説得、ビート、フレームごとの単語予算、およびクレジットクローズにはstory-design.mdを使用します。シーケンスはナラティブデザインから来ており、diffのファイル順序からではありません — 変更を説明し、diffを読み上げないでください。ソフトガイドとして、../hyperframes-animation/blueprints-index.mdの役割→ブループリントメニューを参照してください: 各ビートについて、その候補ブループリントが暗示する形状でナレーションを書き、1つが適合する場合はその候補blueprint: idをタグ付けします(ストーリーの真実が依然としてどのビートが存在するかを決定します — 形状に合わせてビートを無理やり当てはめないでください)。capture/diff.patchからの実際のdiffハンクを2〜4つ取り上げ、それぞれ小さく読みやすいスニペットにします。各フレームのsceneで必要なcode-*ブロックに名前を付けます。フレームには、creditsクローズ(1〜6個のassets/<login>.pngアバター)を除いて、asset_candidatesはありません。ストーリーボードとスクリプトのリファレンスから必要な正確なフィールドを使用します。

ドラフト後、レビューループの計画パスを実行します — ../hyperframes-core/references/review-loop.md § 1: ボードを開きます(尋ねる必要はありません — PROJECT_DIRからプレビューをバックグラウンドで実行します)、計画を提案として提示し、2つの質問をします — 承認するか変更するか、そしてスケッチを先に(推奨)またはスキップします。フィードバックは、承認されるまでチャットまたはボードのコメントファイルを通じてループします。これはチェックポイントゲートです(ブリーフ契約 § 1): 自律モードではボードはなく、質問するものもありません — 同じサマリーをヘッズアップとして投稿して続行します。スケッチはビルドに折り込まれ、1つのプレビュー質問はStep 6になります。

ゲート: STORYBOARD.mdが存在する、すべてのフレームに必要なナラティブフィールドがある、ナレーションが必要な場合はSCRIPT.mdが存在する、ユーザーが計画を承認した(自律モード: サマリーがヘッズアップとして投稿された)。


Step 3.1: オーディオ

目標: 承認されたスクリプトからナレーション、ワードタイミング、音楽、オーディオメタデータを生成します。

Step 3の承認後にオーディオを開始します。バックグラウンドで実行し、その後Step 4に進みます。

呼び出す前に、ユーザーの要求からナレーションボイスを選択します。 リクエストでボイス、性別、トーンが指定された場合は、一致するボイスIDを選び、--voice <id>で渡します。パイプラインのデフォルトはそれ以外の場合Marcia(女性、HeyGen)/ am_michael(Kokoro)です — したがって、「男性の声」のようなリクエストは、フラグを渡さない限り黙って無視されます。ボイスIDはプロバイダー固有です。Step 0のサインインステータスで選択されたプロバイダーに対して解決します: HeyGen(サインイン済み)はnode <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list(またはGET /v3/voices?engine=starfish)経由。Kokoro(オフライン)は<MEDIA_DIR>/audio/references/tts.mdのボイステーブル(プレフィックスam_/bm_が男性、af_/bf_が女性)経由。ユーザーが好みを表明しなかった場合、パイプラインのデフォルトの前に記憶されたボイス(ブリーフ契約 § 2)にフォールバックし、使用したものを伝えます。ユーザーが明示的に選択した場合...

[truncated for translation]

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

general-video

>

hyperframes

>

hyperframes-animation

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

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

関連スキル