Home / All Skills / Content & Media Creation / hyperframes-teaching-video
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · hideaway007/codex-video-skills

hyperframes-teaching-video

Create, revise, render, package, and prepare publishing for Chinese HyperFrames videos of many kinds, including teaching videos, explainers, product demos, workflow breakdowns, case studies, showcase videos, social posts, and general narrated visual videos. Use for HyperFrames HTML video composition, synced narration, Doubao/Volcano or Edge TTS voice generation, large single-line subtitles, Apple-style or user-specified visual direction, thumbnail or cover generation, real MP4 verification, social platform draft assets, pacing fixes, animation enrichment, transition repair, or when the user says to use HyperFrames instead of Web Video Engineer or web-video-presentation.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author hideaway007GitHub hideaway007/codex-video-skills ↗License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 D2；README 亦标 License: MIT；GitHub API license.spdx_id = MIT）Commit f2c70b812b
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Designate HyperFrames as the sole production interface for Chinese narrated videos (not limited to tutorials) and explicitly forbid using the legacy web-video-presentation path, unless the user specifically requests a click-driven web demo.

skills/hyperframes-teaching-video/SKILL.md
Use HyperFrames as the primary production surface for Chinese narrated videos, not only teaching videos. … Do not use the old Web Video Engineer / `web-video-presentation` implementation path unless the user explicitly asks for a click-driven webpage presentation.
What this does: Draws a clear boundary against the legacy workflow from the same-named directory, while retaining its robust principles: narration-first, large subtitles, 16:9 checks, and explicit render verification.

Default to an Apple Keynote / macOS visual style and a conversational tone, strictly banning formulaic hooks (e.g., 'In the AI era, stop...') and audience-exposed internal tags (s03, directory names).

skills/hyperframes-teaching-video/SKILL.md
Use Apple Keynote / macOS style unless the user gives a stronger reference … Avoid starting with formulaic lines like "AI 时代，别再...".
What this does: Prioritizes 'non-AI-generated' copy rules up front and enforces a Chinese-first approach (English is reserved exclusively for code identifiers, API names, and UI elements).

Write the narration before animating, strictly referencing references/CODE-GARDEN-VOICEOVER.md; start by defining a single positioning statement in DESIGN.md before writing.

skills/hyperframes-teaching-video/SKILL.md
For narration drafting or rewriting, read `references/CODE-GARDEN-VOICEOVER.md` first. … Before writing the script, write a one-sentence **positioning statement** in `DESIGN.md`
What this does: Prevents workflow/case-study/showcase requests from drifting into generic 'how-to-use-this-tool' tutorials by forcing an upfront declaration of the genre (tutorial, explainer, case breakdown, showcase, workflow walkthrough, post-mortem, release asset).

Maintain a single sync manifest as the single source of truth: narration, subtitles, and scene start cues are derived from it rather than manually managing three separate arrays.

skills/hyperframes-teaching-video/SKILL.md
Keep one sync manifest as the source of truth for narration, subtitles, and scene starts.
What this does: Uses assets/sync-script.json (in the shape of { "scene": "#scene-3", "text": "..." }) to generate narration.txt, sync-map.js, and HTML durations, structurally preventing mismatches between webpage steps and audio file counts.

Specify explicit TTS defaults: Doubao/Volcano seed-tts-2.0 + zh_male_liufei_uranus_bigtts + speech_rate=20; provide Edge TTS as a fallback with male/female voice options and a +20% speech rate recommendation.

skills/hyperframes-teaching-video/SKILL.md
In `/Users/d2/project/web vidio` projects, default to Doubao / Volcano `seed-tts-2.0`, voice `zh_male_liufei_uranus_bigtts`, and `speech_rate=20` unless the user says otherwise. … Recommended Edge TTS defaults for Chinese: voice `zh-CN-YunxiNeural` for a male presenter voice, or `zh-CN-XiaoxiaoNeural` for a female presenter voice; rate `+20%` unless the user requests a slower or faster delivery.
What this does: Hardcodes the author's local production conventions (including a local absolute path /Users/d2/project/web vidio) and defines fallback conditions along with pre-checks (command -v edge-tts) when Doubao credentials are unavailable and Edge TTS is acceptable.

Durations must be measured from actual audio: once audio files exist, estimating via character count, Edge TTS word-boundary metadata, or narration text is prohibited; require ffprobe verification before backfilling durations and cue timings.

skills/hyperframes-teaching-video/SKILL.md
Do not estimate timing from character count, Edge TTS word-boundary metadata, or narration text alone when audio files exist.
What this does: Turns 'synchronizing subtitles and on-screen entrances with narration' into a measurable constraint; switching TTS providers requires regenerating narration, the sync map, subtitles, scene timing, and the MP4, forbidding the pairing of old sync maps with new audio.

Detail subtitle specifications down to pixels and line counts: ~66-72px Chinese characters, strong contrast or drop shadows, default centered bottom plain text (no 'Voiceover:' labels, no large backing plates), keeping visible subtitles strictly single-line.

skills/hyperframes-teaching-video/SKILL.md
Keep visible subtitles to one line. … Use roughly 66-72px Chinese text for burned-in HyperFrames subtitles, strong contrast or shadow, and enough bottom margin to avoid covering the scene focus.
What this does: Makes 'readability in 1080p screen recordings' a hard metric; if a cue wraps, split it into adjacent shorter cues and regenerate TTS/timings rather than accepting rendered multi-line text.

Adhere strictly to the HyperFrames implementation contract from ecosystem conventions: root element carries data-duration, audio uses native <audio> tags, window.__timelines registers paused GSAP timelines, animations are deterministic, and transitions default to soft cross-fades.

skills/hyperframes-teaching-video/SKILL.md
Register a paused GSAP timeline in `window.__timelines` and build deterministic animation.
What this does: Explicitly bans full-screen wipes, white flashes, light sweeps, hard visibility toggles, and transitions prone to blank flashes (unless high-energy effects are explicitly requested), requiring elements to enter sequentially alongside narration rather than appearing all at once.

Rely strictly on real artifacts for validation: npm run check (or hyperframes lint/inspect), ffprobe verification of actual duration after rendering MP4, and ffmpeg contact sheet extraction for item-by-item visual review.

skills/hyperframes-teaching-video/SKILL.md
ffprobe -v error -show_entries format=duration,size -of json renders/final.mp4
What this does: Ties the definition of 'done' directly to the rendered MP4 file and provides a 7-point visual inspection checklist (no blank frames/dropped transitions, visual focus aligns with current narration point, elements enter with voiceover, subtitles do not occlude key content, Chinese labels, duration matches pacing, subtitles remain single-line without redundant labels).

Enforce a safety latch on publishing drafts: automated browser workflows may prepare drafts and verify fields, but final submission must not be clicked without user confirmation of platform, account, title copy, tags, MP4, and cover asset.

skills/hyperframes-teaching-video/SKILL.md
When using a live browser to upload to social platforms, prepare drafts and verify fields, but do not click the final publish/submit button until the user confirms
What this does: Confines automated publishing actions strictly to the draft stage, requiring manual approval for final submission; this serves as the skill's sole operational boundary for external actions.

2Core Capabilities

01Versatile production of Chinese narrated videos (tutorials, explainers, product demos, workflow walkthroughs, case studies, showcases, social clips) beyond just educational videos
02Narration synchronized to actual audio durations + large subtitles (single-line, 66-72px, centered bottom plain text by default)
03Dual TTS pipelines: Doubao/Volcano (seed-tts-2.0, Liu Fei 2.0, speech_rate 20) and Edge TTS (zh-CN-YunxiNeural / zh-CN-XiaoxiaoNeural, +20%)
04TTS pre-checks with zero silent downgrades: runs command -v edge-tts or import edge_tts first, blocking execution on missing dependencies instead of silently swapping providers or using slower defaults
05HyperFrames HTML composition implementation: data-duration, native <audio>, window.__timelines paused GSAP timelines, sequential element entrances, soft cross-fade transitions
06Real MP4 verification and frame review (hyperframes lint/inspect, ffprobe actual duration check, ffmpeg contact sheets + 7-point visual checklist)
07Cover/thumbnail generation and publication draft assets (9:16 posters, platform copy and tags, draft status and review checklists)
08Remediation recipes for common issues (too short -> add explanations and rewrite script; lack of focus -> staggered entrances + dimming old elements; blank transitions -> switch to cross-fade; subtitles too small/wrapping -> adjust font size or split cue)

3External Dependencies

KindDependency / Endpoint
cliHyperFrames CLI（lint / inspect；渲染经项目 npm run render 或 npx hyperframes）
cliffprobe / ffmpeg（真实时长核对、抽接触表）
apiDoubao / Volcano 语音合成（seed-tts-2.0，需凭证；本 skill 未自带客户端，走项目 TTS 脚本）
cliEdge TTS（免豆包 key，但需网络与 edge-tts CLI/Python 包）
network社交平台网页（用真实浏览器准备发布草稿，需用户确认后才提交）
reference口播写作参考（随包分发）：references/CODE-GARDEN-VOICEOVER.md

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Local script or command execution: (No scripts, templates, or executable code exist directly within this skill directory)
  • 网络端点: Declared external network access: Speech synthesis: Doubao / Volcano TTS (credentials held by the project TTS script) or Edge TTS (requires internet connectivity, keyless alternative to Doubao)
  • 本地工作目录: File I/O and artifact output: Within the project: DESIGN.md (including positioning statement and selected TTS provider/voice/speech rate), assets/sync-script.json and generated narrati
Audit Notes: This skill's directory contains only SKILL.md, references/CODE-GARDEN-VOICEOVER.md, and agents/openai.yaml (no scripts, endpoints, or credential-reading code). The Amber safety tier is triggered by the production pathways explicitly specified in SKILL.md: 1) **Speech Synthesis Backends**: Defaults to Doubao / Volcano seed-tts-2.0 (requires account credentials) with Edge TTS as a keyless fallback (still requires internet access), meaning narration text is transmitted to external services; 2) **Draft Publishing**: Instructs the use of a real browser to prepare drafts and verify fields on social media platforms (account-related actions, though explicit user confirmation is strictly required prior to final submission); 3) **Asset Retrieval**: Directs searching and locally saving external visual assets when current/external media is required instead of hotlinking. All external destinations are predictable, contain manual confirmations or fallback paths (Edge TTS requires no key; drafts stop short of submission), and exhibit no security downgrades (no TLS disabled, no --no-verify), anti-automation bypasses (no AutomationControlled/keystroke masking), sandbox tampering, or arbitrary code execution vectors.

5Second-Pass Verification

  • [ok] 本 skill 是否夹带脚本/凭证读取（档位下限依据） — find 目录只返回 SKILL.md、references/CODE-GARDEN-VOICEOVER.md、agents/openai.yaml；grep 无 process.env / fetch / curl 调用点。所有外部能力都以「指示」形式出现，由项目侧脚本或宿主 CLI 执行。
  • [ok] TTS 外部依赖与凭证是否真实存在（橙档依据） — SKILL.md 原文给出 Doubao/Volcano seed-tts-2.0 + zh_male_liufei_uranus_bigtts + speech_rate=20 的项目默认，并写 'Edge TTS does not require the Doubao API key, but it still needs network access and the `edge-tts` CLI or Python package installed.' 即既确认凭证类后端存在，也确认有免 key 备选。
  • [ok] 社交平台动作是否越界（是否会自动发布） — 原文 'When using a live browser to upload to social platforms, prepare drafts and verify fields, but do not click the final publish/submit button until the user confirms the exact platform, account, title/copy/tags, MP4, and cover.' 明确把最终提交留给人工确认，属安全阀而非绕过。
  • [discrepancy] 文档里写死的本机路径对其他使用者意味着什么 — ［判定：私有前提，非缺陷］SKILL.md 写 'In `/Users/d2/project/web vidio` projects, default to Doubao / Volcano `seed-tts-2.0` …'——该默认值绑定作者本机目录；在别处使用需替换为本地路径/项目约定，否则「默认音色语速」这一段不适用（不是安全风险，但是可见的可移植性问题）。
  • [ok] 字幕/时长是否真以实测音频为准（避免估算冒充） — SKILL.md 明写 'Do not estimate timing from character count, Edge TTS word-boundary metadata, or narration text alone when audio files exist.' 并要求对每段或最终音频跑 ffprobe、由真实时长重生成 sync-map.js；缺依赖时要求报阻断而不是静默换提供方或换慢速默认值。
  • [ok] 仓库级验证/提交指示是否真在文档中（工程侧影响） — SKILL.md 末尾 'If the target is inside a git repository, inspect the diff, run verification, and commit the task-related changes unless there is no change, no repository, or a real blocker.'——即 skill 会指示 agent 做 git 提交；已在 file_writes 与 risks 中标注，供使用者知情。

6Verdict & Scenarios

  • Turns 'Chinese narrated video' into a general-purpose production pipeline rather than a tutorial-only tool, drawing clear boundaries against legacy routes while preserving core best practices
  • Durations and subtitles are strictly bound to measured audio: estimating via character counts or word boundaries is forbidden, mandating ffprobe verification and sync map regeneration
  • Prevents silent degradation: blocks and reports missing dependencies or credentials or requires explicit user switches, refusing to quietly fall back to slower defaults or alternative providers
  • Ties acceptance directly to concrete artifacts: ffprobe duration verification + ffmpeg contact sheets + a 7-point visual inspection checklist
  • Built-in safety latch for publishing: allows automated draft creation while strictly requiring user confirmation before final submission
  • Provides actionable remediation recipes (too long, too short, no focal point, blank transitions, small or wrapped subtitles, dry script, ready to publish) for precise targeted fixes
    • Best for: Individuals or small teams producing Chinese narrated videos using HyperFrames: tutorials, explainers, product/feature showcases, workflow and case breakdowns, or social shorts, who have (or are willing to set up) Doubao/Volcano or Edge TTS voiceover pipelines along with npm run check/render scripts. Also ideal for scenarios requiring strict pacing control where subtitles and on-screen entrances must align with measured audio.
    Not for: Not suitable for: 1) Workflows requiring click-driven interactive web presentations (use web-video-presentation in the same repository instead); 2) Environments that cannot send narration text to external TTS services and lack local TTS; 3) Fully automated pipelines without human visual review (acceptance requires a visual inspection checklist); 4) Repositories where the agent should not touch git commits (the commit instructions at the end of the document must be modified or explicitly disabled first).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload hyperframes-teaching-video.tar.gz
    sha256: 4d726d1ecfb6c878…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit f2c70b812b.