Communitygithub.com

Drama2557/4RealDigital-Video-Studio

将GitHub拉取请求(PR URL、owner/repo#N 或已检出仓库中的 'this PR')转换为代码变更解说视频——基于差异、提交和文件构建的变更日志、功能揭晓、修复或重构演示。输入是代码变更,而非网站。非产品推广视频(/product-launch-video)或无PR主题解说(/faceless-explainer)。不明确时请使用 /hyperframes。

4RealDigital-Video-Studio 是什么?

此技能将 GitHub 拉取请求(PR)转换为结构化的、逐帧解说的视频,详细说明代码变更。它由一组明确定义的步骤编排,从项目设置和 PR 数据提取开始,无需录制网站。该技能支持多种 PR 类型(变更日志、功能揭晓、修复说明、重构演示),并通过一个审查循环让用户参与故事板和脚本的审批。它利用 HeyGen 或本地引擎(如 Kokoro)进行语音合成,并在帧布局中使用预定义的“代码编辑”设计系统。视频最终在 HyperFrames 环境中渲染。它可以处理已验证的 PR 和离线模式,确保即使在没有互联网访问的情况下也能保持工作流程的连续性和数据完整性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/pr-to-video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

第一时间保持技能新鲜——静默执行,无需询问: npx hyperframes skills update pr-to-video。若一切最新则为快速空操作;否则在你依赖它们之前,刷新此技能及其依赖的核心领域技能。

媒体使用:在获取音频/图片/标志前,调用 /media-use 从 HeyGen 目录及官方来源解析背景音乐/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 认证/未找到/私有错误在此处以 exit 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 为 gh 已命名的贡献者(PR 作者、提交作者、mergedBy)携带 name——其余为 null(审阅者/评论者/分配者,gh pr view 仅提供裸 login)。在步骤 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 的变更。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 原生帧类型、钩子、说服、节拍、每帧词预算和致谢结尾。序列来自叙事设计,而非差异的文件顺序——解释变更,而非朗读差异。作为软指南,参考 ../hyperframes-animation/blueprints-index.md 中的角色→蓝图菜单:对于每个节拍,按其候选蓝图暗示的形状编写旁白,并在合适时标记该候选 blueprint: id(故事事实仍决定哪些节拍存在——永远不要强制节拍适应形状)。展示 2–4 个真实差异片段(来自 capture/diff.patch),每个一个小的清晰片段;在帧的 scene 中命名每个想要的 code-* 块。帧不携带 asset_candidates,除了 credits 结尾(1–6 个 assets/<login>.png 头像)。使用故事板和脚本参考中的确切必填字段。

起草后,运行审查循环的计划通过——../hyperframes-core/references/review-loop.md § 1:打开面板(不要询问是否要——从 PROJECT_DIR 在后台运行预览),将计划作为提案呈现,并问两个问题——批准或更改,以及草图优先(推荐)或跳过。反馈通过聊天或面板的评论文件循环,直到批准。这是一个检查点关口(简报合同 § 1):在自治模式下没有面板,也无需询问——发布相同的摘要作为提醒并继续;草图合并到构建中,唯一的预览问题出现在步骤 6。

关口:STORYBOARD.md 存在,每个帧都有所需的叙事字段,SCRIPT.md 在需要旁白时存在,且用户已批准计划(自治模式下:摘要已作为提醒发布)。


步骤 3.1:音频

目标:从已批准的脚本生成旁白、词时间、音乐和音频元数据。

在步骤 3 批准后开始音频。在后台运行,然后继续执行步骤 4。

在调用之前,从用户的请求中选择旁白语音。 如果请求指定了语音、性别或语调,选择一个匹配的语音 ID 并通过 --voice <id> 传递。否则,管道默认为 Marcia(女性)(HeyGen)/ am_michael(Kokoro)——因此像“男声”这样的请求除非你传递标志,否则会被静默忽略。语音 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 20 individual skills — each has its own dedicated page.

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

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, 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.

Drama2557/4RealDigital-Video-Studio

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. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

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`.

Drama2557/4RealDigital-Video-Studio

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).

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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]

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

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 "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

相关技能