Communitygithub.com

PR 轉影片

將 GitHub 拉取請求(PR)轉換為解釋程式碼變更的 HyperFrames 影片。

PR 轉影片 是什麼?

此技能可將 GitHub 拉取請求 (PR) 轉換為 HyperFrames 專案中的程式碼編輯說明影片。它會擷取 PR 的詳細資訊(包括 diff、貢獻者頭像和中繼資料),無需實際螢幕錄製。系統會根據 PR 的性質(例如變更日誌、功能展示、錯誤修正)自動選擇敘事結構,並產生腳本和分鏡。此技能支援 HeyGen 或本機 Kokoro 引擎的語音旁白和背景音樂(BGM),並允許使用者透過簡短提問來核准或修改最終輸出。其工作流程包括設定專案目錄、提取 PR 資料、套用程式碼編輯設計系統、建立分鏡和腳本、產生音訊以及渲染最終影片。關鍵限制是輸入必須是程式碼變更,而非網站,且影片中不會使用第三方資產(貢獻者頭像除外)。使用者需透過簡短的審核關卡來核准草稿和最終渲染。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/pr-to-video

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

首先,讓這項技能保持最新狀態 — 請靜默執行,無需詢問: npx hyperframes skills update pr-to-video。如果一切已是最新,它將快速且無操作;否則,在您依賴它們之前,它會更新此技能及其所依賴的核心領域技能。

media-use:在取得音訊/圖片/標誌之前,請先呼叫 /media-use 從 HeyGen 目錄解析 BGM/SFX/圖片,並從其官方來源取得品牌標誌。先執行 --adopt 註冊現有資產。請參閱 /media-use 技能。

PR 轉 HyperFrames

使用此技能來擷取 GitHub 拉取請求、理解變更、規劃程式碼變更說明,並在 HyperFrames 中逐幀建置。輸入是一個程式碼變更(透過 gh 讀取),而非網站 — 除了貢獻者的頭像外,沒有擷取步驟也沒有真實資產。

入口是 /hyperframes。 您是協調者。依序執行每個步驟,驗證其關卡,然後才繼續。此技能用於GitHub 拉取請求(程式碼變更)。任何其他意圖、單純的「製作影片」或任何不確定性 → 請先閱讀 /hyperframes — 意圖層擁有所有路由決策,且一個沒有 BRIEF.md 的新創作無論如何都會通過它(設定的開啟規則)。

您是協調者。在解析後的外部 PROJECT_DIR 中工作,預設永遠不在呼叫者的儲存庫中。依序執行步驟並在繼續前通過每個關卡。使用者授權的關卡是步驟 0、步驟 3 和步驟 6。在步驟 0 之前,請閱讀 ../hyperframes-core/references/brief-contract.md — 它定義了關卡類型以及 BRIEF.md 的 flow/storyboard 如何推導出管理步驟 3/4/6 關卡的模式。除了步驟 5(您分派一個有限制的影格工作者池)之外,請親自執行每個步驟。不要在此放置設計或動畫規則;這些規則位於影格工作者子代理、此技能的本地 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ 和 hyperframes-creative 中。

工作流程:步驟 0 設定 → hyperframes.json;步驟 1 擷取 → capture/extracted/ + assets/<login>.png;步驟 2 設計系統 → frame.md;步驟 3 分鏡/腳本 → STORYBOARD.md 和 SCRIPT.md;步驟 3.1 音訊 → audio_meta.json;步驟 4 視覺設計 → 增強的 STORYBOARD.md;步驟 5 影格 → compositions/frames/NN-*.html 和 index.html;步驟 6 最終渲染 → renders/video.mp4。


步驟 0:設定

目標:使用已確認的簡報進入 — 包含 PR 參考(完整 URL、<owner>/<repo>#<N> 引用,或在已檢出的儲存庫中的「this PR」)— 建立 HyperFrames 專案,並使簡報持久化。風格始終是程式碼編輯風格(在步驟 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 作為其工作目錄執行。沒有明確子 shell 的範例表示 (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 複製到專案中(步驟 2 將被跳過)並返回步驟 3 草稿將基於的骨架。食譜填寫答案,而非核准;審查關卡仍然會執行。

在繼續通過設定之前顯示登入狀態 — 執行 npx hyperframes auth status 並逐字轉發其輸出。它會報告語音/BGM 將使用 HeyGen 還是本機引擎,以及當登出時如何登入。套用一個分支:

  • 協作: 等待使用者登入或明確選擇 offline / go。
  • 自動: 陳述狀態並透過可用的本機引擎繼續。

當沒有離線提供者時,不要靜默地省略必要的能力;呈現阻礙。不要將此決定摺疊到另一個問題中,或將金鑰寫入每個儲存庫的 .env。身分驗證所有權和離線後備方案:/media-use references/setup-providers.md § 提供者。

關卡: hyperframes.json 和 BRIEF.md 存在;PR 引用已捕獲在簡報中;偏好支援的答案已記錄(簡報合約 § 2);登入狀態已顯示(已登入,或繼續離線)。


步驟 1:擷取 PR(無擷取)

目標:獲取 PR 的事實並將其摺疊到專案中作為資訊來源。沒有網站擷取。fetch-pr.mjs 確定性地執行 gh — 透過分頁的 gh api 完成檔案列表,這樣大型 PR 就不會截斷在約 100 個檔案,並且僅寫入 capture/pr.json + capture/diff.patch(無暫存目錄)。對於已合併的 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 身分驗證 / 未找到 / 私有錯誤在此退出 1。
(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/fetch-pr.mjs --pr "$PR" --out-dir ./capture)

# 離線轉換 → capture/extracted/{tokens.json (colors:[] → 程式碼編輯調色盤),
# 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)

# 人物前端的單一網路步驟 — 將每個貢獻者的 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 身分驗證 / 未找到 / 私有),報告其 stderr 並停止 — 不要捏造 PR 內容。如果 ingest.mjs 退出 1,讀取其 stderr(通常是格式錯誤的 pr.json),修復並重新執行(確定性的)。fetch-people-avatars.mjs 始終退出 0;缺少頭像僅表示沒有作者的工作人員名單結尾。

people.json 攜帶一個 name,用於 gh 已經命名的貢獻者(PR 作者、提交作者、mergedBy)— 其餘的為 null(審查者/評論者/受指派者,gh pr view 只會給出一個純粹的 login)。在步驟 3 寫入工作人員名單結尾之前,請自行為將實際出現在該影格中的 1-6 人解析任何 null 的 name:gh api users/<login> --jq .name(您已經有 gh — 無需為此撰寫腳本)。如果 GitHub 也沒有該使用者的公開名稱,請在螢幕上回退到 login,並從口語行中刪除該人(請參閱 story-design.md 的工作人員名單部分 — 旁白仍然必須說出姓名,永遠不要使用原始帳號)。

關卡: capture/pr.json、capture/diff.patch、capture/extracted/tokens.json、capture/extracted/visible-text.txt 和 capture/extracted/people.json 存在;您能用一句清晰的句子陳述 PR 的變更。assets/<login>.png 是盡力而為 — 其缺失不是失敗。


步驟 2:設計系統

目標:採用程式碼編輯影格預設集;一個腳本將其轉換為此影片的 frame.md + 字幕樣板。

風格是固定的 — 程式碼編輯風格(溫暖的編輯風格;為差異建構的海軍藍程式碼表面)。執行:

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

該腳本將程式碼編輯預設集的 FRAME.md 複製為 frame.md,將其重新混合到 capture/extracted/tokens.json 中的任何品牌標記上(PR 沒有 → colors:[]/fonts:[] 保留程式碼編輯自己的調色盤,一個完整的設計),將預設集的字幕樣板複製到 .hyperframes/caption-skin.html,並自行驗證(在映射損壞時退出 1)。一旦它退出 0 就繼續 — 無需手動編輯。

關卡: build-frame.mjs 已退出 0 — frame.md 存在於程式碼編輯預設集,且 .hyperframes/caption-skin.html 存在作為字幕樣板來源。


步驟 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。從簡報的 length 設定前置事項 duration: — 一個粗略的期望;組合報告最終剪輯與其的對比。

使用 story-design.md 來決定 PR 原型(變更日誌 / 功能展示 / 錯誤修正說明 / 重構導覽)、PR 原生影格類型、鉤子、說服、節拍、每個影格的單詞預算以及工作人員名單結尾。順序來自敘事設計,而非 diff 的檔案順序 — 說明變更,不要逐字讀取 diff。作為一個軟性指南,請查閱 ../hyperframes-animation/blueprints-index.md 中的角色→藍圖選單:對於每個節拍,以其候選藍圖所暗示的形狀撰寫旁白,並在合適時標記該候選 blueprint: id(故事的真相仍然決定哪些節拍存在 — 永遠不要強迫一個節拍去符合某個形狀)。精選 2-4 個真實的 diff 片段(來自 capture/diff.patch),每個都是一個小型可讀的程式碼片段;命名每個影格 scene 中想要的 code-* 區塊。影格除了 credits 結尾(1-6 個 assets/<login>.png 頭像)外,不攜帶 asset_candidates。使用分鏡和腳本參考中的確切必填欄位。

草稿完成後,執行審查迴圈的計畫階段 — ../hyperframes-core/references/review-loop.md § 1:開啟看板(不要詢問是否要 — 在背景從 PROJECT_DIR 執行預覽),將計畫作為提案呈現,並詢問兩個問題 — 核准或變更,以及先草圖(建議)或跳過。回饋透過聊天或看板的評論檔案循環,直到獲得核准。這是一個檢查點關卡(簡報合約 § 1):在自動模式下沒有看板也沒有問題要問 — 將相同的摘要作為預告發布並繼續;草圖摺疊到建置中,並且在步驟 6 時只有一個預覽問題。

關卡: STORYBOARD.md 存在,每個影格都有必要的敘事欄位,SCRIPT.md 在需要旁白時存在,且使用者核准了該計畫(自動:摘要已作為預告發布)。


步驟 3.1:音訊

目標:從已核准的腳本產生旁白、單詞時間、音樂和音訊中繼資料。

在步驟 3 核准後開始音訊。在背景執行它,然後繼續進行步驟 4。

在呼叫之前,從使用者的要求中選擇旁白語音。 如果請求指定了語音、性別或語氣,請選擇一個匹配的語音 id 並傳遞 --voice <id>。否則,管線預設是 HeyGen 上的 Marcia (女性) / Kokoro 上的 am_michael — 因此像「男性聲音」這樣的請求會被靜默忽略,除非您傳遞了標誌。語音 id 是特定於提供者的;根據步驟 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),並說明您使用了哪一個;僅在兩者都沒有指定時才省略 --voice。當使用者明確選擇了一個

…

[為翻譯而截斷]

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

相關技能