Knowledge video skill

Knowledge video — knowledge-video — Demo/output image published by the author (repo README): Two openings made with knowledge-video: a classroom-notebook look asking which year the idea of AI that learns by itself comes from, and a c (frame from demo GIF/animated image)

Illustration · not a resultFrom the Win-Hao/knowledge-video README — shows the whole collection, not only this skill.source ↗

Turn one topic into a knowledge explainer video that is easy to follow, good to look at and makes people want to watch to the end (on-screen text over music, the kind that took off under Douyin's #Vibe知识大赏), rendered with HyperFrames.

by Win-Hao·MIT license·★ 33 Stars on the repo·GitHub ↗

Use now

Files of Knowledge video

Win-Hao/main1 file shown
SKILL.md
Show the full text69 lines

Knowledge video

Turn one topic into a knowledge video people want to watch to the end. What follows is a path that works, not a fixed procedure: merge, skip or reorder steps, and design the writing, the look and the motion for this topic yourself.

Talk to the user in their language; file names below are defaults.

The rough path

  1. Research → article.md: find sources and write a sourced article. First see what shape the topic has (timeline, chain of causes, concept, comparison, myths, one story), then decide which points to cover. The user decides how many: offer two or three options by the music's length and recommend one
  2. Copy → script.md: rewrite the article as a video people scroll to
  3. Images → images.md or image-prompts.md: real images, or prompts for AI illustrations (assume you can't call an image API; the user runs their own tool)
  4. Look and storyboard → looks/, storyboard.md: show the user a few directions, then storyboard to the music
  5. Render → opening-preview.mp4 → final.mp4: a short opening first, the full video once it's right

By default, show the user each step's result before moving on: a wrong direction is most expensive after rendering. If they say "go all the way", keep going and note what you chose and why in storyboard.md.

Each step: fill in a prompt, then follow it

Per Anthropic's prompting guide, keep background, requirements and checks in separate XML tags, with a reason for each line: separated parts don't blur together, and knowing why lets the model generalize to what isn't written. You fill the tags yourself, from this topic and what the user has said.

  • Brief prompts/brief.md: filled once at the start, updated after each step. Just one <context>: the topic, the audience, the takeaway, length, orientation, music, what the user likes and dislikes, what earlier steps settled, where the files are

  • This step's prompt prompts/<step>.md, four tags:

    • <role>: which role does this step and what that role cares about most. Roles differ by step; pick one for this step, e.g. research is a knowledge editor (cares most about sources), copy is a screenwriter (cares most about whether viewers swipe away), images is a picture editor or illustrator, the look is an art director, the storyboard is a storyboard artist, the composition is a motion designer (cares most about what each movement explains)
    • <task>: what this step produces and where it goes
    • <style>: recommended approaches, each with a reason; recommendations, not rules: pick from the examples in references/ or design something new for this topic; follow the user where they've said what they want, and note what they don't want here too
    • <check>: what to verify, item by item, before the step counts as done; include the "Must hold" items

    Write <role>, <task> and <check> every step; leave out <style> where it isn't needed (research and rendering usually). Infer what the user hasn't said from the topic, and ask about what you're unsure of in the report. Show the filled prompt with the step's output; if the user edits it, redo the step from the edited version

Who follows it: steps that need back-and-forth with the user (how many points, which look) you do yourself. Large self-contained steps (research, finding images or writing image prompts, writing the composition and rendering) go to a subagent: give it only the brief, this step's prompt and the file paths, so its context is clean and holds only what this step needs. It doesn't know what you and the user discussed, so both must be complete. When it's done, read its output and run the self-check before showing the user. Without subagents, follow the prompt yourself.

Must hold

  • Facts are sourced: every year, name, number and quote traces to a reliable source (papers, institutions, archives, the person's own words), linked in article.md; drop what you can't source, label estimates, say whose account a second-hand claim is. Every line on screen, including the opening question and the ending, matches article.md
  • Assets are usable: images, music, sound effects and fonts are licensed for this (check the file page); credits go in credits.md
  • No AI-drawn faces of real people; if the video uses AI illustrations, turn on the platform's "AI-generated content" label
  • The picture depends only on time: seed any randomness so a frame renders the same every time (HyperFrames needs this)
  • Before delivering, watch the whole thing yourself: text visible, readable in time and understandable (no skipped steps in the reasoning; any suspense pays off later), years and numbers match the article, sound and picture in sync

Tools at hand

HyperFrames for the picture (npx hyperframes init / docs / check / snapshot / render); if its skills are installed, follow them for compositions. Small tools in scripts/, use them or not:

Script What it does
beats.py tempo, beats, bar lines and per-bar loudness changes of the music
music_loops.py, cut_music.py find bars that repeat or cut seamlessly, build the new music from a bar list
timing.py lay each screen of the copy onto the beat grid, pin key screens to given bars
sfx.py download Kenney's CC0 foley, mix sound-effect cues into one track
qa.py contact sheets of every screen and frames around key beats

What earlier videos left behind

References, not rules. Design for this topic first; look here when unsure or when you hit the same problem:

  • references/example-ai-history.md: the first tested run, each step's output and timing
  • references/example-fish-and-bears-paw.md: the night-sky particle look of Information Theory, revised three times (motion too flat → copy hard to follow)
  • references/prompt-examples.md: two filled prompts from a tested video, to see how detailed they get
  • references/notes.md: observations on copy and pacing, including how to make a chain of reasoning land
  • references/images.md: checking licenses, writing prompts, generating in layers
  • references/visuals.md: dense collage, night-sky particles, timeline moments, photo cards, fitting UI onto generated screens, what to draw in code
  • references/sound.md: music edits, sound effects, loudness
  • references/pitfalls.md: check first when a render fails or the picture is off
1---
2name: knowledge-video
3description: "Turn one topic into a knowledge explainer video that is easy to follow, good to look at and makes people want to watch to the end (on-screen text over music, the kind that took off under Douyin's #Vibe知识大赏), rendered with HyperFrames. Gives a path that works (research → copy → images → look and storyboard → render) and small tools for music editing, beat timing, sound effects and self-checks; the design is yours to make for each topic. Use it whenever someone wants a knowledge, science, history or how-it-works video — 'make a video explaining X', 'turn the history of X into a short video', 'explainer video', '做一条知识视频', '科普视频', 'Vibe知识大赏' — even if they don't name this skill. For a single short animation or just a new look, use code-video instead."
4---
5 
6# Knowledge video
7 
8Turn one topic into a knowledge video people want to watch to the end. What follows is a path that works, not a fixed procedure: merge, skip or reorder steps, and design the writing, the look and the motion for this topic yourself.
9 
10Talk to the user in their language; file names below are defaults.
11 
12## The rough path
13 
141. **Research** → `article.md`: find sources and write a sourced article. First see what shape the topic has (timeline, chain of causes, concept, comparison, myths, one story), then decide which points to cover. The user decides how many: offer two or three options by the music's length and recommend one
152. **Copy** → `script.md`: rewrite the article as a video people scroll to
163. **Images** → `images.md` or `image-prompts.md`: real images, or prompts for AI illustrations (assume you can't call an image API; the user runs their own tool)
174. **Look and storyboard** → `looks/`, `storyboard.md`: show the user a few directions, then storyboard to the music
185. **Render** → `opening-preview.mp4` → `final.mp4`: a short opening first, the full video once it's right
19 
20By default, show the user each step's result before moving on: a wrong direction is most expensive after rendering. If they say "go all the way", keep going and note what you chose and why in `storyboard.md`.
21 
22## Each step: fill in a prompt, then follow it
23 
24Per Anthropic's [prompting guide](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/claude-prompting-best-practices), keep background, requirements and checks in separate XML tags, with a reason for each line: separated parts don't blur together, and knowing why lets the model generalize to what isn't written. You fill the tags yourself, from this topic and what the user has said.
25 
26- **Brief** `prompts/brief.md`: filled once at the start, updated after each step. Just one `<context>`: the topic, the audience, the takeaway, length, orientation, music, what the user likes and dislikes, what earlier steps settled, where the files are
27- **This step's prompt** `prompts/<step>.md`, four tags:
28 - `<role>`: which role does this step and what that role cares about most. Roles differ by step; pick one for this step, e.g. research is a knowledge editor (cares most about sources), copy is a screenwriter (cares most about whether viewers swipe away), images is a picture editor or illustrator, the look is an art director, the storyboard is a storyboard artist, the composition is a motion designer (cares most about what each movement explains)
29 - `<task>`: what this step produces and where it goes
30 - `<style>`: recommended approaches, each with a reason; **recommendations, not rules**: pick from the examples in `references/` or design something new for this topic; follow the user where they've said what they want, and note what they don't want here too
31 - `<check>`: what to verify, item by item, before the step counts as done; include the "Must hold" items
32 
33 Write `<role>`, `<task>` and `<check>` every step; leave out `<style>` where it isn't needed (research and rendering usually). Infer what the user hasn't said from the topic, and ask about what you're unsure of in the report. Show the filled prompt with the step's output; if the user edits it, redo the step from the edited version
34 
35**Who follows it**: steps that need back-and-forth with the user (how many points, which look) you do yourself. Large self-contained steps (research, finding images or writing image prompts, writing the composition and rendering) go to a subagent: give it only the brief, this step's prompt and the file paths, so its context is clean and holds only what this step needs. It doesn't know what you and the user discussed, so both must be complete. When it's done, read its output and run the self-check before showing the user. Without subagents, follow the prompt yourself.
36 
37## Must hold
38 
39- **Facts are sourced**: every year, name, number and quote traces to a reliable source (papers, institutions, archives, the person's own words), linked in `article.md`; drop what you can't source, label estimates, say whose account a second-hand claim is. Every line on screen, including the opening question and the ending, matches `article.md`
40- **Assets are usable**: images, music, sound effects and fonts are licensed for this (check the file page); credits go in `credits.md`
41- **No AI-drawn faces of real people**; if the video uses AI illustrations, turn on the platform's "AI-generated content" label
42- **The picture depends only on time**: seed any randomness so a frame renders the same every time (HyperFrames needs this)
43- Before delivering, watch the whole thing yourself: text visible, readable in time and understandable (no skipped steps in the reasoning; any suspense pays off later), years and numbers match the article, sound and picture in sync
44 
45## Tools at hand
46 
47HyperFrames for the picture (`npx hyperframes init / docs / check / snapshot / render`); if its skills are installed, follow them for compositions. Small tools in `scripts/`, use them or not:
48 
49| Script | What it does |
50|---|---|
51| `beats.py` | tempo, beats, bar lines and per-bar loudness changes of the music |
52| `music_loops.py`, `cut_music.py` | find bars that repeat or cut seamlessly, build the new music from a bar list |
53| `timing.py` | lay each screen of the copy onto the beat grid, pin key screens to given bars |
54| `sfx.py` | download Kenney's CC0 foley, mix sound-effect cues into one track |
55| `qa.py` | contact sheets of every screen and frames around key beats |
56 
57## What earlier videos left behind
58 
59References, not rules. Design for this topic first; look here when unsure or when you hit the same problem:
60 
61- `references/example-ai-history.md`: the first tested run, each step's output and timing
62- `references/example-fish-and-bears-paw.md`: the night-sky particle look of *Information Theory*, revised three times (motion too flat → copy hard to follow)
63- `references/prompt-examples.md`: two filled prompts from a tested video, to see how detailed they get
64- `references/notes.md`: observations on copy and pacing, including how to make a chain of reasoning land
65- `references/images.md`: checking licenses, writing prompts, generating in layers
66- `references/visuals.md`: dense collage, night-sky particles, timeline moments, photo cards, fitting UI onto generated screens, what to draw in code
67- `references/sound.md`: music edits, sound effects, loudness
68- `references/pitfalls.md`: check first when a render fails or the picture is off
69 

Discussion

Alternatives

Make a demo video with OpenScreenMake a polished video of an app or a feature with OpenScreen's MCP tools, from storyboard to recording, editing and export, then either attach it to a pull request or draft a post on X. Use when the user asks for a demo, a demo video, a screen recording, a product video, a launch clip, a video for X/Twitter, LinkedIn or a README, or to show a change in a pull request ("add a video to the PR", "show the feature to reviewers"). Also use to set OpenScreen up for an agent, and to continue an OpenScreen demo in a new session.Creator · MITFFmpeg for Video ProductionVideo and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.Creator · MITfake-screencast — screenshots → simulated screen recordingTurn static SCREENSHOTS into a simulated screen recording (TSX) — a fake screencast with an animated cursor that eases to targets and clicks, a browser URL bar that updates per page, hard-cut navigations, in-page filter crossfades, smooth scroll, and a ken-burns zoom onto the payoff. Use when a beat needs to show a walkthrough of a web app / dashboard / settings page and you'd rather build it from screenshots than get (or ask for) a real screen recording — "fake a screen recording", "turn these screenshots into a screencast", "simulate clicking through the dashboard", "animate this UI walkthrough", "cursor moving through the app". Built on remotion/src/lib/screencast.tsx. This is a technique WITHIN step 2 (make-tsx): defer timeline/render/bake orchestration to make-tsx and raw crash-free TSX rules to vidtsx-2d-generator. Not for a single static page clone (use WebBrowserFrame directly) and not when the point is genuine proof of real speed/output (use a real recording).Creator · MITKhan explainerUse when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, and use no paid APIs or keys. macOS only.Creator · MIT