Short Form Edit
nateherkai/hyperframes-student-kit
Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes faceless-explainer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/faceless-explainer .claude/skills/faceless-explainer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .claude/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes faceless-explainer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/faceless-explainer .agents/skills/faceless-explainer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .agents/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes faceless-explainer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/faceless-explainer .cursor/skills/faceless-explainer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .cursor/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/heygen-com/hyperframes.git --path skills/faceless-explainer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes faceless-explainer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/faceless-explainer .gemini/skills/faceless-explainer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .gemini/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install heygen-com/hyperframes faceless-explainerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/faceless-explainer .github/skills/faceless-explainer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .github/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes --skill faceless-explainer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes faceless-explainer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/faceless-explainer .opencode/skills/faceless-explainer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "faceless-explainer" agent skill from https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer into .opencode/skills/faceless-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "faceless-explainer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
faceless-explainerTurns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
This skill turns a body of text, such as an article, notes, a topic or a brief, into an explainer video where every visual is invented for the scene: typography, abstract graphics, diagrams and data visualizations. Nothing is captured from a website or real footage. It picks a design system, plans a teaching story and builds the video frame by frame in HyperFrames, and it fits topic explainers, concept breakdowns, how-tos and listicles. Videos built from a website, such as promos or tours, belong to a different skill.
The agent acts as orchestrator in a `videos/` project folder, running steps in order and passing each gate before moving on. Steps 0, 3 and 6 wait for your approval, and step 5 dispatches one sub-agent per frame. A `BRIEF.md` defines the gate types, and the front-door `/hyperframes` skill handles unclear requests. The agent asks before running a skills update command and uses a media-use skill to source audio, images and logos. Bundled scripts assemble the index, audio, captions and frame packets, and reference files cover story design, visual design, motion language and a cut catalog.
8 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit f6b3821. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 13 files in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
nodenpxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Faceless Explainer Video loads about 7.5k tokens when it runs, and up to ~25k if it reads all its reference files. Until then it costs about 102 tokens; SKILL.md has 3,464 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
question or write keys into a per-repo `.env`. Auth ownership and offline fallbacks: `/media-use` `references/setup-proAutomated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from heygen-com/hyperframes at commit f6b3821, republished under its Apache-2.0 licence (© heygen-com). 3,464 words, ~7,516 tokens.
.claude/skills/faceless-explainer/SKILL.md (or your agent's skills folder). This skill also uses 27 other files; get the full folder from GitHub.Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
First, keep this skill fresh — confirm with the user before running:
npx hyperframes skills update faceless-explainer. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
media-use: Before sourcing audio/images/logos, call
/media-useto resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run--adoptfirst to register existing assets. See/media-useskill.
Use this skill to turn a body of text into an explainer video: pick a design system, plan a teaching story, and build it frame by frame in HyperFrames. Faceless means every visual is invented downstream — there is no capture step and no real asset inventory.
The front door is
/hyperframes. You are the orchestrator. Run each step, verify its gate, and only then continue. This skill is for explaining a topic from text, with no product and no website to capture. Any other intent, a bare "make a video", or any uncertainty → read/hyperframesfirst — the intent layer owns every route decision, and a fresh creation arriving here withoutBRIEF.mdgoes through it anyway (Setup's opening rule).
You are the orchestrator. Work in videos/<project>/. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Read ../hyperframes/references/brief-contract.md before Step 0 — it defines the gate types and how BRIEF.md's flow/storyboard derive the mode that governs the Step 3/4/6 gates. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, and hyperframes-creative.
Workflow: Step 0 setup → hyperframes.json; Step 1 brief → capture/extracted/; Step 2 design system → frame.md; Step 3 storyboard/script → STORYBOARD.md and SCRIPT.md; Step 3.1 audio → audio_meta.json; Step 4 visual design → enriched STORYBOARD.md; Step 5 frames → compositions/frames/NN-*.html and index.html; Step 6 final render → renders/video.mp4.
Goal: Enter with a confirmed brief, create the HyperFrames project, and make the brief durable.
The brief is confirmed by the intent layer, not by questions asked here. Opening rule, in order: (1) BRIEF.md exists → read it and ask nothing — the brief is settled, and its flow/storyboard derive the mode (brief contract § 1). (2) No BRIEF.md but the project exists (hyperframes.json / STORYBOARD.md on disk) → resume from the storyboard's frontmatter and the recorded preferences; never re-interrogate a half-built project. (3) Neither — a fresh creation request that arrived here directly → read /hyperframes and run its intent layer (references/intent-interview.md): it checks recipes and remembered defaults, conducts this route's questions (../hyperframes/references/routes/faceless-explainer.md), and hands back the locked brief. Edit requests skip all of this — go do the edit.
Initialize only if hyperframes.json is missing. Name <project> from the topic in kebab-case, such as compound-interest-explained; never use workspace name or timestamp.
npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
After init, let <PROJECT_ROOT> be videos/<project> and run every subsequent relative-path command with that directory as its working directory. In the commands below, . means <PROJECT_ROOT>; never write .media, capture, or output files in the caller directory.
Write BRIEF.md immediately after init (never before — init refuses a non-empty directory): the intent layer's locked brief, shape per ../hyperframes/references/brief-format.md. Resolve <MEDIA_DIR> as the installed /media-use skill directory. Then record each preference-backed answer with node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md names the subset). If the intent layer adopted a recipe, run node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>; it copies its frame.md into the project (Step 2 is then skipped) and returns the skeletons Step 3 drafts from. A recipe fills answers, not approvals; the review gates still run.
Show sign-in status before proceeding past Setup — run npx hyperframes auth status and relay its output verbatim. It reports whether voice/BGM will use HeyGen or local engines and, when signed out, how to sign in. Apply one branch:
offline / go.Do not silently omit a required capability when no offline provider exists; surface the blocker. Do not fold this decision into another question or write keys into a per-repo .env. Auth ownership and offline fallbacks: /media-use references/setup-providers.md § Providers.
Gate: hyperframes.json and BRIEF.md exist; the preference-backed answers were recorded (brief contract § 2); sign-in status was shown (signed in, or continuing offline).
Goal: Fold the user's text into the project as the source of information. There is no website capture and no real assets — this is a faceless explainer.
Save the user's full input verbatim, then create the synthetic capture package by hand:
capture/extracted/visible-text.txt — the full article / notes / topic / brief, verbatim. This is the source of information, not a story template (Step 3 reshapes it).capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }. Fill title/description from the brief. Leave colors/fonts empty unless the user explicitly gave brand colors or fonts — then add them (the design preset supplies a complete palette regardless).If the user pasted a script or wants their wording kept, save it verbatim as user_script.txt; VO_MODE (verbatim or restructured) comes from BRIEF.md — the intent layer asks it when a script arrives. Ask once here only if the brief somehow lacks it, and store the answer for Step 3.
Do not run npx hyperframes capture (there is no URL). Do not create asset-descriptions.md or populate capture/assets/ — faceless visuals are invented in Steps 4-5, not captured. The one exception: if the user supplied a real image, place it under public/<basename> and note it for Step 3.
Gate: capture/extracted/visible-text.txt and capture/extracted/tokens.json exist; you can state the explainer's topic and audience in one clear sentence.
Goal: Choose one shipped frame preset; a script turns it into this video's frame.md + caption skin.
When BRIEF.md names a style_preset — the user picked it by eye from the showcases at the intent layer — use it; the judgment call is yours only when the brief is silent. Then you make the one call — which preset: read ../hyperframes-creative/references/design-spec.md and browse ../hyperframes-creative/frame-presets/; pick the preset whose look best fits the topic, tone, and audience. Then run:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .The script does the rest deterministically: copies the preset's FRAME.md → frame.md and remixes it onto any brand tokens in capture/extracted/tokens.json (brand colors mapped onto the preset's color keys by role; the preset's display + body fonts swapped for the brand's), copies the preset's caption skin to .hyperframes/caption-skin.html, and self-validates (exits 1 on a broken mapping). Proceed as soon as it exits 0 — no hand-editing of the spec.
A faceless explainer usually has no brand colors/fonts (tokens.json colors/fonts empty) → the script keeps the preset's own palette, a complete shippable design. Only when the user named brand colors/fonts add them to tokens.json before running, and only adjust frame.md by hand afterward if a mapping truly needs it.
Gate: build-frame.mjs exited 0 — frame.md exists from a named preset, and (when the preset ships one) .hyperframes/caption-skin.html exists as the caption skin source; the chosen preset was recorded as a preference (--key style_preset --workflow <this workflow>, brief contract § 2).
Goal: Turn the text into an approved frame-by-frame teaching plan.
Read ../hyperframes-creative/references/story-spine.md (hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, and ../hyperframes/references/script-format.md. Use them to write STORYBOARD.md and, when narration is needed, SCRIPT.md. Set the frontmatter duration: from the brief's length — a rough expectation; assembly reports where the cut lands against it.
Use story-design.md for the explainer structure (concept / how-to / listicle / story), hook strategy, clarity techniques, emotional beats, the type-enum mapping, and VO_MODE. The video's sequence comes from narrative design, not the input text's paragraph order — reorder, merge, omit, compress. As a soft guide, consult the role→blueprint menu in ../hyperframes-animation/blueprints-index.md: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate blueprint: id when one fits. Teaching truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Faceless visuals are invented downstream, so frames do not carry an asset inventory: leave asset_candidates empty unless the user supplied a real public/<basename> image. Use the exact required fields from the storyboard and script references.
After drafting, run the review loop's plan pass — ../hyperframes/references/review-loop.md § 1: present the plan as a proposal, and ask the two questions — approve or change, and sketches first (recommended) or skip. Feedback arrives as a chat reply; loop until approved. This is a checkpoint gate (brief contract § 1): in autonomous mode there is nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the final preview with its one question comes at Step 6.
Gate: STORYBOARD.md exists, every frame has the required narrative fields, SCRIPT.md exists when narration is needed, and the user approved the frame-by-frame plan (autonomous: the summary was posted as a heads-up).
Goal: Generate narration, word timings, music, and audio metadata from the approved script.
Start audio after Step 3 approval. Run it in the background, then continue to Step 4. (Sign-in status was already shown in Step 0; the engine falls back automatically.)
Choose the narration voice from the user's ask before invoking. If the request named a voice, gender, or tone, pick a matching voice id and pass it with --voice <id>. The pipeline default is otherwise Marcia (female) on HeyGen / am_michael on Kokoro — so a request like "a male voice" is silently ignored unless you pass the flag. Voice ids are provider-specific; resolve against whichever provider Step 0's sign-in status selected: HeyGen (signed in) via node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (or GET /v3/voices?engine=starfish); Kokoro (offline) via the voice table in <MEDIA_DIR>/audio/references/tts.md (prefixes am_/bm_ male, af_/bf_ female). When the user expressed no preference, fall back to the remembered voice (brief contract § 2) before the pipeline default, and say which one you used; omit --voice only when neither names one. When the user explicitly picked a voice this run, record it (prefs.mjs record --key voice).
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &
The audio script handles narration, word timings, BGM lookup from HeyGen's music library, and timing metadata. BGM mood comes from the storyboard's music: field. This uses the HeyGen Audio API for retrieval, not generation, and the same ~/.heygen credential as TTS. For provider details, read ../media-use/audio/references/tts.md.
If there is no narration and no SCRIPT.md, skip voice generation. BGM may still run if the storyboard has a music mood.
The canonical fully-silent marker (shared across the workflows that reuse this audio model): music: none in the STORYBOARD.md top YAML block and no SCRIPT.md. That combination marks the project silent — no narration, no BGM, no SFX. audio.mjs recognizes it and generates nothing (it removes any stale audio_meta.json; an absent audio_meta.json is what assemble treats as silent), so this step is a clean skip. music: none with narration keeps TTS and turns only BGM off. Use exactly this spelling — don't improvise other markers.
Gate: audio job has started, or the project is marked silent (music: none + no SCRIPT.md).
Goal: Add the visual direction, layout intent, and motion choices to each storyboard frame.
Sketch the storyboard sheet first (collaborative only). The moment the plan is approved, run the sketch pass — ../hyperframes/references/review-loop.md § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself as a cell of storyboard.html (../hyperframes-creative/references/storyboard-recipe.md § 3), mark each built, pause for the one layout question when every frame is built, and revise only the sketches named until the sheet is confirmed. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from outline to animated at Step 5.
Edit STORYBOARD.md in place. Do not create another storyboard. Use frame.md as source of truth for color, type, layout feel, and style.
Read references/visual-design.md, ../hyperframes-animation/blueprints-index.md, references/motion-language.md, and ../hyperframes-animation/rules-index.md. Use visual-design.md for the method (the time-coded shot sequence, the inline Layout vocabulary, and the invented-visual treatment), plus the required ## Video direction block. Use ../hyperframes-animation/blueprints-index.md to pick each frame's shot shape. Use motion-language.md (the motion vocabulary + the motion doctrine) and ../hyperframes-animation/rules-index.md (valid rule names) for motion — do not invent motion names.
Search the live catalog before you invent any named look. A faceless explainer invents every visual, which is exactly when a hand-authored rebuild of an existing block is most likely. For every look, effect, treatment or transition the brief names — "CRT scanlines", "glitch", "film grain", "shimmer sweep", "confetti burst" — run npx hyperframes catalog --query "<the look, in plain English>" --json and read the top results BEFORE you write that look into STORYBOARD.md. The search needs nothing installed: no project, no prior add, no account. It ranks the whole hosted registry (~400 blocks and components) from any directory. A block that already does the job becomes the frame's focal — name it here; Step 5 pre-installs it once before dispatch and its worker customizes it. Invent a visual only after a search for it came back with nothing that fits.
For every frame, write a time-coded shot sequence into STORYBOARD.md per visual-design.md's method: pick the frame's blueprint (or compose), instantiate it with THIS frame's invented content, and pace each Scene's reveal to the voiceover so the frame develops across its full duration instead of front-loading then freezing. Because the explainer is faceless, focal/roles name the invented visual elements (a hero word, a diagram node, a data-viz series) — you are designing them, not selecting captured assets. State layout and motion inline per Scene (vocabularies in visual-design.md and motion-language.md). Add one video-wide ## Video direction block.
Do not change story, script, transition_in, or the source text. Do not write HTML in this step. There is no asset-staging step — faceless visuals are built by the workers in Step 5. If the user supplied a real public/<basename> image, reference it by path in the relevant frame's focal/roles; otherwise nothing to stage.
Gate: every frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); each frame names its invented focal and/or roles; ## Video direction exists. Collaborative: the sketch sheet was confirmed.
Goal: Build every storyboard frame as an HTML composition and assemble the playable video.
Wait for Step 3.1 audio to finish if audio was started. Then sync durations and fetch SFX; skip both if silent.
node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
Duration sync is mechanical: real voice duration wins; silent frames keep estimates; never hand-edit synced durations.
Pre-install the registry blocks named across STORYBOARD.md once, before dispatch, so parallel workers don't race on the registry:
for b in <each registry block named in the storyboard>; do npx hyperframes add "$b"; done
Before dispatch, read ../hyperframes/references/subagent-dispatch.md. Build the per-frame packets and the worker role payload:
node <SKILL_DIR>/scripts/frame-packets.mjs --project "$PROJECT_DIR" --storyboard "$PROJECT_DIR/STORYBOARD.md"
The builder writes one bounded packet per frame under .hyperframes/frame-packets/ (the frame's exact storyboard block + the blueprint body + every cited rule recipe, inlined) and _role.md (../hyperframes/references/frame-worker-core.md + this skill's sub-agents/frame-worker.md, concatenated verbatim — the complete worker role). Dispatch one sub-agent per frame, in parallel if possible; otherwise run workers in waves. Each worker gets exactly one frame: its prompt carries _role.md and that frame's packet — paste both in full, or hand the two file paths for the worker to read first (equivalent; the worker starts from exactly those two documents either way) — plus a dispatch context with PROJECT_DIR, frame_id, whether the frame has a confirmed sketch on disk (the worker dresses that layout rather than redrawing it — frame-worker core § When a confirmed sketch exists), canvas size, and caption status + keep-out band if captions are enabled.
Workers read only their packet and frame.md; they never open STORYBOARD.md or the skill documents (the packet inlines what was selected upstream). Each worker writes only compositions/frames/NN-*.html. Workers must never edit STORYBOARD.md.
Full-bleed backgrounds ride on a class="clip" layer, never the #root. A frame's ground (color field / gradient / grid) is its own full-duration background clip — a background set on the #root / data-composition-id element is clip-gated to the frame's window and is not a dependable ground, so dark content can land on the black host body and render invisible. The video's base ground is painted by the assembler from frame.md's canvas color onto the index #root. (Full rule + self-check: ../hyperframes/references/frame-worker-core.md.)
As each worker returns, the orchestrator marks that frame as animated in STORYBOARD.md.
After audio timings exist, build captions in the background and assemble the index:
node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .
captions.mjs uses the project's .hyperframes/caption-skin.html (copied in Step 2) as the caption look, injecting brand tokens from frame.md; with no skin present it renders the built-in default pill. captions: skipped (<reason>) is valid. Continue without captions when explicitly skipped.
Gate: every frame is marked animated (collaborative: the sketch sheet was confirmed at Step 4), index.html exists, and captions are built or explicitly skipped.
Goal: Verify the assembled video, get user approval, and render the final MP4.
Inject transitions, run checks, pause for review, then render.
node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
npx hyperframes lint
npx hyperframes check
npx hyperframes snapshot --at <frame-midpoints>
snapshot stitches the captured frames into one contact sheet (snapshots/contact-sheet.jpg). Glance at it; if nothing is obviously broken, move on — don't linger here.
If a command fails, surface stderr and stop — don't pile on recovery commands. Fix it yourself: the cheapest safe edit to compositions/frames/NN-*.html, then rerun the failed check.
Known false-positive — do not chase it. check may report a handful of text_box_overflow findings of ~1–4px on the caption highlight words (selector #caption-word-* / .caption-line). The caption pill uses a deliberately snug line-height (set once in scripts/captions.mjs) and has no overflow:hidden, so a heavy display glyph's ink spills a few px into the pill's own padding — nothing is actually clipped. Treat these as expected and proceed. Do not inflate the caption line-height (it balloons the pill, which is worse). Only act on a text_box_overflow when it names a frame element (#el-NN-*), not a caption word.
After checks pass, pause for user review — the review loop's final look (../hyperframes/references/review-loop.md § 4): one question, on the final Studio preview — render now, or what changes? (Autonomous: the same, as the one kept question — open the preview even though the user didn't ask for one.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.
Preview: npx hyperframes preview --background
Render only after user approval (autonomous mode: after the render-or-changes question):
npx hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4
Do not rerun lint, check, or snapshot after rendering unless the user asks.
Gate: lint and check passed and the snapshots were inspected before render; user approved at the review pause (autonomous: checks passed and the delivery includes the contact sheet); renders/video.mp4 exists. Final reply states MP4 path and final duration.
Formats: landscape 1920x1080; portrait 1080x1920; square 1080x1080 — derived from the destination (brief contract § 2). Set the format once in the storyboard frontmatter.
Faceless deltas vs a captured-asset workflow: no Step 1 capture (synthetic tokens.json + visible-text.txt); no asset-descriptions.md and no capture/assets/; no asset-staging in Step 4; asset_candidates empty by default; every visual is invented by the Step 5 workers (typography / abstract graphics / diagrams / data-viz). A user-supplied public/<basename> image is the only real asset path.
Background scripts: the workflow ships only these under scripts/: build-frame for adopting + brand-remixing a frame preset into frame.md (+ caption skin); audio for TTS, transcription, BGM, SFX, and duration syncing; captions; transitions for inject and verify; and assemble-index. Everything else is the hyperframes CLI.
The reusable, domain-agnostic shot shapes live in ../hyperframes-animation/blueprints/ (indexed by ../hyperframes-animation/blueprints-index.md).
| Read | When |
|---|---|
[../hyperframes/references/brief-contract.md](../hyperframes/references/brief-contract.md) | Gate types, mode derivation from BRIEF.md, field semantics. |
[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md) | Step 3: story doctrine — hook language, value-before-evidence, proposal shape, source-traceable visuals. |
[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/) | Step 2: choose and adopt a frame preset. |
[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md) | Step 2: apply brand tokens correctly. |
[references/story-design.md](references/story-design.md) | Step 3: plan the explainer story. |
[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md) | Step 3: role→blueprint menu. Step 4: pick the shot shape. |
[../hyperframes/references/storyboard-format.md](../hyperframes/references/storyboard-format.md) | Step 3: write STORYBOARD.md. |
[../hyperframes/references/script-format.md](../hyperframes/references/script-format.md) | Step 3: write SCRIPT.md. |
[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md) | Step 3.1: choose or understand TTS providers and voices. |
[references/visual-design.md](references/visual-design.md) | Step 4: write the frame's shot sequence (+ Layout vocabulary). |
[references/motion-language.md](references/motion-language.md) | Step 4: the motion vocabulary + the motion doctrine. |
[references/cut-catalog.md](references/cut-catalog.md) | Step 4-5: the cut catalog (worker builds within-frame seams). |
[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md) + [../hyperframes-animation/rules/](../hyperframes-animation/rules/) | Step 5: local rule recipe bodies for the cited motions. |
[../hyperframes/references/frame-worker-core.md](../hyperframes/references/frame-worker-core.md) | Step 5: the shared worker contract (packet builder prepends it to the delta). |
[sub-agents/frame-worker.md](sub-agents/frame-worker.md) | Step 5: the workflow's frame-worker delta. |
[../hyperframes/references/subagent-dispatch.md](../hyperframes/references/subagent-dispatch.md) | Step 5: dispatch sub-agents safely. |
© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 27 other files (scripts, references) in skills/faceless-explainer of heygen-com/hyperframes.
Open the folder on GitHubat commit f6b3821
We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in heygen-com/hyperframes, which our catalogue first saw on October 7, 2026.
Faceless Explainer Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Faceless Explainer Video this skillheygen-com/hyperframes | 58k | 3 repos | ~7.5k | Automated safety check: Notes | Apache-2.0 | |
| Short Form Editnateherkai/hyperframes-student-kit | 1.2k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Short Form Videonateherkai/hyperframes-student-kit | 1.2k | — | ~5k | Automated safety check: Pass | Custom licence | |
| Plain-Sight Explainer Videoheygen-com/hyperframes-community-skills | 175 | — | ~3.5k | Automated safety check: Pass | Apache-2.0 | |
| Video ScriptbozhouDev/video-skills-toolkit | 149 | — | ~1.8k | Automated safety check: Pass | MIT | |
| HyperFrames Studio Timeline Conventionsedenfunf/reelmimic | 1.6k | 1 repos | ~916 | Automated safety check: Pass | MIT |
nateherkai/hyperframes-student-kit
Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…
nateherkai/hyperframes-student-kit
Maintain the existing May Shorts teaching compositions using their legacy face-mode, scene-overlay, and karaoke-caption patterns.
heygen-com/hyperframes-community-skills
Builds a 60 to 90 second collage-style HyperFrames explainer about an everyday thing viewers rarely look at, or from documents you supply, with design approval and quality gates.
bozhouDev/video-skills-toolkit
使用已经锁定的完整口播音频与带时间码字幕,把确认后的逐字稿转成管线无关的视频导演方案和 Beat Graph。适用于“根据最终配音做分镜”“按字幕设计整片画面”“规划 B-roll/证据/素材”“做 HyperFrames 或 Remotion…
edenfunf/reelmimic
Conventions for laying out a HyperFrames project so it opens as a readable Studio timeline: one caption track, one element kind per track, scenes as sub-compositions, and safe zones.
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
heygen-com/hyperframes
Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.
heygen-com/hyperframes
Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.
heygen-com/hyperframes
Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
Works with
Categories
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage. This skill turns a body of text, such as an article, notes, a topic or a brief, into an explainer video where every visual is invented for the scene: typography, abstract graphics, diagrams and data visualizations. Nothing is captured from a website or real footage.
Faceless Explainer Video fits situations like: turning an article or set of notes into an explainer video; making a concept breakdown or how-to video with invented visuals and no footage; producing a listicle video from a topic brief.
Run `npx skills add heygen-com/hyperframes --skill faceless-explainer -a claude-code`. Or copy the skill folder (skills/faceless-explainer in heygen-com/hyperframes) into .claude/skills/faceless-explainer in your project. Claude Code loads it when a task matches its description.
Run `npx skills add heygen-com/hyperframes --skill faceless-explainer -a codex`. Or copy the skill folder (skills/faceless-explainer in heygen-com/hyperframes) into .agents/skills/faceless-explainer in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes --skill faceless-explainer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/faceless-explainer, .gemini/skills/faceless-explainer, .github/skills/faceless-explainer and .opencode/skills/faceless-explainer in your project.
Going by SKILL.md and its folder, Faceless Explainer Video needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npx). Our summary lists: HyperFrames, installed as a plugin or standalone; Node.js with npx, for HyperFrames commands and the .mjs scripts.
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Faceless Explainer Video is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 7.5k tokens (SKILL.md is roughly 30k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 18k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Faceless Explainer Video: Short Form Edit (nateherkai/hyperframes-student-kit, 1.2k stars), Short Form Video (nateherkai/hyperframes-student-kit, 1.2k stars), Plain-Sight Explainer Video (heygen-com/hyperframes-community-skills, 175 stars) and Video Script (bozhouDev/video-skills-toolkit, 149 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 58,020 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 7, 2026.
Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.