Communitygithub.com

HyperFrames CLI

使用 HyperFrames CLI 開發循環:初始化、新增、目錄、捕捉、靜態檢查、檢查、快照、比較、評分比較、預覽、播放、簡報、節拍、關鍵影格、單一或批次渲染、發佈、雲端、雲端執行、反饋、Lambda、診斷、瀏覽器、資訊、升級、技能、組合、文件、基準測試、遙測、轉錄、驗證、文字轉語音及移除背景。也用於診斷建置或渲染失敗。驗證、檢查和佈局是已棄用的別名;請使用檢查。涵蓋本地、HeyGen 託管雲端、AWS Lambda 和 Google Cloud Run 渲染。

HyperFrames CLI 是什麼?

此技能詳細說明了 HyperFrames CLI,這是一個用於多平台影片創作與渲染的完整開發工具。它指導 AI 代理(如 Claude Code 或 Cursor)透過結構化的開發循環:從使用 `npx hyperframes` 建立專案、編寫組合、執行快速檢查(`lint`、`check`)到使用快照進行子組合測試,最後在渲染前獲得最終預覽批准。該 CLI 支援多種渲染目標,包括本地 Chrome、Docker 容器、HeyGen 託管雲端、AWS Lambda 和 Google Cloud Run,讓使用者能根據基礎設施偏好或限制選擇最佳方案。該技能還定義了嚴格的代理約定,例如偏好 JSON 輸出、使用 `HYPERFRAMES_RUN_ID` 追蹤、以及使用「否定開關」迫使檢查失敗(如 `--strict`、`--strict-all`)。它強制要求一個關鍵工作流程:在執行任何命令前,必須先閱讀對應的參考文件(位於 `references/` 目錄下),以確保正確的行為與錯誤處理。對於反饋,它要求標準化的「再現封包」結構,包括組合普查以協助維護者在不暴露原始素材的情況下診斷渲染缺陷。總體而言,本技能是一個全面的操作手冊,用於協調複雜的影片生成管道。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/hyperframes-cli

在你喜歡的 AI 中提問

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

說明文件

HyperFrames CLI 是做什麼的?

除非專案指示提供了包裝器,否則將命令作為 npx hyperframes ... 執行。若有包裝器則遵循之。CLI 需要 Node.js 22 或更新版本以及 FFmpeg。

開發循環

  1. 建立專案骨架: npx hyperframes init <project> 或捕捉現有網站。在非 TTY 模式下,傳遞 --non-interactive --example=<name>。
  2. 編寫內容: 使用 /hyperframes-core 撰寫組合。
  3. 編輯時獲取快速反饋: 在第一次 HTML 傳遞及結構性變更後,執行 npx hyperframes lint。
  4. 執行最終把關: 執行 npx hyperframes check;它會在打開瀏覽器前重新執行 lint。請勿在前面加上多餘的獨立 lint 調用。加上 --snapshots 以獲得帶註解的總覽影格及尋找裁切點。
  5. 檢查子組合: 當 index.html 掛載了 data-composition-src,請捕獲中點快照並檢查每個掛載的場景。
  6. 打開最終的 Studio 預覽: 執行 npx hyperframes preview,將時間軸專案網址交給使用者,並詢問是要修改還是渲染。
  7. 僅在批准後才渲染: 疊代時使用草稿品質,交付時使用高品質。
  8. 驗證輸出: 確認檔案存在、非空且具有合理的時長。
# 快速疊代檢查;編寫時視需要重複執行。
npx hyperframes lint

# 必要的最終把關;包含 lint。
npx hyperframes check
npx hyperframes preview
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format out.mp4

check 會先執行 lint,然後使用一個瀏覽器會話和一次尋道傳遞來稽核執行時期錯誤、失敗的請求、佈局、*.motion.json 斷言以及 WCAG 對比度。持續性發現會封鎖退出碼;短暫的進入或退出發現則僅供參考。使用 --strict 將警告升級為錯誤。validate、inspect 和 layout 為了相容性仍保留為別名,但不得出現在新的指令或腳本中。

兩種不同的預覽介面

請勿混淆這兩種狀態:

介面可能打開的時機目的
故事板組合檢查之前,僅當 storyboard: yes 時檢視計劃卡片和線框草圖。打開 ?view=storyboard#project/<name>。
最終組合預覽在 check 通過之後在渲染前檢視已組合的時間軸。打開 #project/<name>。

早期的故事板並非對最終影片的批准。渲染始終需要由 hyperframes-core/references/review-loop.md 定義的最終批准。

子組合冒煙測試

靜態稽核無法捕捉到所有的掛載失敗。當專案使用子組合時,請為每個宿主插槽捕獲至少一個可見的中點:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

將微小的無樣式內容、畫布大小的圖示、缺少的 Hero 元素或時間軸註冊超時視為阻擋渲染的掛載缺陷。有關相應的修正,請參見 hyperframes-core/references/sub-compositions.md。

代理約定

  • 在代理與 CI 呼叫中偏好使用 --json。伺服器模式的 render、preview 和 play 不提供一般的 JSON 輸出;preview --selection --json 和 preview --context --json 是查詢模式的例外。

  • doctor --json 總是返回退出碼 0。根據其負載內容來判斷:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • 非 TTY 模式是自動偵測的。init 在該模式下需要 --example;使用 --non-interactive 可以在 TTY 上強制實行確定性行為。

  • 在相同的驗證循環中,所有命令使用同一個 HYPERFRAMES_RUN_ID。

  • 當相應的警告、變數或 CI 條件必須阻止渲染時,使用 --strict、--strict-all 和 --strict-variables。

  • JSON 路徑會將主目錄置換為 $HOME;請勿嘗試還原該置換。

  • 絕不要僅僅因為檢查通過就進行渲染。在最終預覽時暫停並等待批准。

Studio 導向的編輯

當使用者提到「這個元素」或目前選取項目時,請查詢 Studio 而非猜測:

npx hyperframes preview --context --json --context-fields selection

優先使用 selection.target.hfId,否則使用其選擇器和原始檔。如果結果回報 no-selection,請要求使用者點擊該元素並重新執行。僅索取您需要的上下文片段;只有在需要計算樣式或可編輯文字元資料時才使用 --context-detail full。完整的行為與錯誤碼定義於 references/preview-render.md。

渲染選項

需求命令
快速的本地疊代npx hyperframes render --quality draft
最終的本地交付npx hyperframes render --quality high --output out.mp4
可重現的容器渲染npx hyperframes render --docker --strict --output out.mp4
本地變數驅動的批次渲染npx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen 託管的零基礎設施渲染npx hyperframes cloud render
自管理分散式 AWS 渲染npx hyperframes lambda render <project> --width 1920 --height 1080 --wait
自管理分散式 GCP 渲染npx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait

當使用者想要託管渲染而無需本機 Chrome、FFmpeg 或 AWS 時,請使用雲端渲染。僅當 AWS 所有權是需求時才使用 Lambda。僅當 GCP 所有權是需求時才使用 Cloud Run。在執行任何雲端路徑前,請先閱讀對應的參考文件。

在驗證渲染成功後,請發送一份反饋報告,除非遙測已停用或使用者選擇退出:

npx hyperframes feedback --rating <0-10> --comment "<具體結果或障礙>"

對於順利執行的反饋,請保持簡潔。對於任何錯誤或障礙,請在提交前捕獲一個再現封包;不要僅發送症狀摘要。包括可重複執行的命令及其工作目錄、預期行為 vs 實際行為、確切錯誤訊息、輸出是否完成/降級/失敗、任何已知的因應措施,以及再現專案的狀態。對於評分 ≤ 7 且描述視覺缺陷(黑幀、閃爍、輸出損毀、錯誤影格、空白輸出或其他視覺異常)的情況,請同時包含一個 COMPOSITION_STRUCTURE: 區塊——這是一個保護隱私的結構解剖(元素數量普查 + 屬性存在性 + 時間軸形狀),使維護者能夠在不需要組合 ZIP 檔案的情況下,根據已知的錯誤家族進行模式匹配。代理會透過組合普查輔助工具自動填寫此區塊;人類使用者無需手動填寫。如果問題未能再次重現,請說明並仍附上最後失敗的命令和日誌。僅在獲得同意後才使用 --file-issue:它會將最小化再現案例發佈到公開網址。必要的封包格式和隱私警告定義於 references/preview-render.md。

在執行命令前請先閱讀對應的參考文件

以下參考文件及其所屬技能是強制性的命令合約,而非選擇性的背景閱讀。在執行表格中的命令前,請先閱讀其對應行。

需求參考文件
init, capture, skillsreferences/init-and-scaffold.md
lint, check, 動作側車檔, snapshotreferences/lint-validate-inspect.md
compare, grade-compare, 變數驅動的 render --batchreferences/compare-and-batch.md
針對現有專案的 Studio 節拍格線的 beatsreferences/beats.md
preview, play, render, publish, Studio 上下文, 反饋references/preview-render.md
doctor, 瀏覽器管理references/doctor-browser.md
auth, HeyGen 託管雲端渲染, 以及模板變數references/cloud.md
AWS Lambda 部署與渲染references/lambda.md
Google Cloud Run 部署與渲染references/cloudrun.md
info, upgrade, compositions, docs, benchmark, 遙測, 媒體前處理references/upgrade-info-misc.md

對於組合變數,也請閱讀 /hyperframes-core → references/variables-and-media.md。對於 hyperframes add 和 hyperframes catalog,請使用 /hyperframes-registry。在 hyperframes present 前,請閱讀 /slideshow;在 hyperframes keyframes 前,請閱讀 /hyperframes-keyframes。對於 TTS、轉錄、字幕或背景移除選項,請使用 /media-use。

專業命令由其歸屬的工作流程文件有意地分開說明:

npx hyperframes present <project-dir> --port 3004 --no-open
npx hyperframes beats <project-dir> --json
npx hyperframes keyframes <project-dir> --json

present 提供一個可導覽的投影片組,具備簡報者與觀眾同步功能。beats 是獨立的 Studio 節拍格線工具,定義於 references/beats.md。keyframes 則提供關於尋道安全的動畫與運動路徑診斷資訊。

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

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

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

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

相關技能