xiaolin-explainer-packaging: Wrap Talking-Head Clips in Animated Finance Explainer Graphics

The input is a set of on-camera talking-head clips with their scripts. The skill has the agent collect the material needed for the screen. It then uses a set of Remotion layout components to build the explainer visuals, captions, transitions and audio mix, and finally runs a frame-by-frame check. The layouts include giant numbers, card wall, white-card chart, document highlighter, web screenshot highlighter, line chart, timeline, pie chart, flow chart, world map, side-by-side comparison and relationship graph. The style draws on the public videos of a finance creator. This is an unofficial project. Source: howoneai/xiaolin-explainer-packaging. The code is under the MIT license, the font under SIL OFL 1.1. Current version: v1.4.0.

Triggers

• The user has a set of talking-head clips and wants them packaged into an explainer video with charts, numbers and web screenshots.

• The user wants to redo the explainer visuals for an existing talking-head video.

• The user wants motion-graphic packaging for "understand X in one go" finance or science topics.

Not for: writing scripts, generating on-camera footage, screen recording, downloading videos from platforms, or vertical videos.

Hard rules

• Keep the "AI-generated · not the creator" label (brand.label). Don't remove it.

• Fill brand.logo only with the user's own channel logo. Don't use the logo of the style's source creator or any other real creator. Don't generate on-camera footage with a real creator's portrait or voice.

• Every number, quote and policy clause on screen must trace to a source. Write them into the facts file. If a number in the script doesn't match the facts file, change the script first.

• Use only freely licensed photos (Wikimedia Commons), with credit shown on screen. Blur news agency photos in web screenshots. Don't recolor or distort logos.

• Don't use the built-in world map when China's territory is involved. It doesn't meet mainland China's map review rules for published maps. If the video shows China's borders, use a standard map from the Ministry of Natural Resources and show its review number.

• Ask the user before installing software or downloading fonts.

Installation

You need Node 18 or higher, ffmpeg, and python3 with numpy and Pillow. The first npm install and the first render need internet access, because Remotion downloads Chrome. The author has tested only on macOS with Apple silicon, and has not tested in other agents such as Claude Code.

node -v && ffmpeg -version | head -1 && python3 -c "import numpy, PIL; print('ok')"
D=~/tools/xiaolin-explainer-packaging
[ -d $D ] || git clone https://github.com/howoneai/xiaolin-explainer-packaging.git $D
mkdir -p ~/.claude/skills && cp -R $D/xiaolin-explainer-packaging ~/.claude/skills/   # Codex and other agents: copy it into their own skills folder

Manus users: download xiaolin-explainer-packaging.skill from the repo's Releases page, then add it as a skill in Manus.

Font: titles and captions use YouShe Title Black (优设标题黑), which is not included in the repo. Ask the user to download it from https://www.uisdc.com/uisdc-first-free-font, then save it as public/fonts/YouShe.ttf in the project, or set the environment variable YOUSHE_TTF to point to it. If the font is missing, the skill falls back to Source Han Sans 900, and the style gets noticeably weaker. Tell the user when this happens.

Remotion license: free for individuals, companies with 3 or fewer people, and non-profits, including commercial use. Companies with 4 or more people need a company license. Remind the user of this before you start.

Workflow

0. Ask three questions in one message. Is there a fixed background? If not, recommend one of the 6 themes. What should the logo be, and is the on-camera footage AI-generated? Are there any real materials that must appear? Build the project only after you have the answers.

1. Prepare the input. Put each sentence as a 1920×1080 mp4 in public/clips/<id>.mp4. Each sentence has a spoken text say and a caption text sub. Copy the facts file from templates/facts_template.md.

2. Create the project. Run <skill>/scripts/new_project.sh <project directory> (add --demo for a smoke test). Transcribe each on-camera clip, set tin/tout in timeline.json, and trim the leading and trailing silence. Write any slip-ups into cuts. Edit brand, music and theme in project.json.

3. Write the scene table before any code. Read references/style-bible.md, research.md and treatment.md. List the scenes in this format: scene name | sentences covered | layout | background photo | props and motion | picture-in-picture | materials needed. Send it to the user for approval. Then check it against seven points:

   • Each scene spans 2 to 8 sentences.

   • The subject is cut off by the frame edge, or takes up more than 60% of the frame.

   • Insert one white-paper scene after every 2 or 3 dark scenes.

   • Quote original text with real screenshots or verbatim documents.

   • Leave the opening, key opinion sentences, turns and the ending for full-screen on-camera shots.

   • Every graphic scene has at least one material made for this episode.

   • Props carry the meaning, and neighboring scenes don't repeat the same motion.

4. Research and prepare materials. Find photos with scripts/commons_photo.py. Capture web screenshots and original-text coordinates with node scripts/web_shot.mjs --boxes. Get logos with scripts/commons_logo.py. Make props as transparent PNGs using the style suffix in treatment.md, and save them in public/props/<topic>/. Revise the scene table after research.

5. Write the storyboard. Copy the approach from templates/scenes_treat.py. Align each element's entrance with its keyword using S.k('keyword', -0.15). The current item lights up while the rest dim. Register review frames for each scene with KF.append((label, time)). Run python3 story_core.py timeline.json scenes.py. The output must show gaps/overlaps [].

6. Review key frames, at least two rounds. Commands are in the table below. Fix everything on the review checklist before you show the user.

7. Full render, audio mix, finalize and audit. The flagged count from audit.py must be 0.

Common commands

NeedCommandRender key framespython3 -c "import json;print(' '.join(str(f) for _,f in json.load(open('keyframes.json'))))" | xargs node render.mjs stills stills/k1Review contact sheetpython3 <skill>/scripts/sheet.py stills/k1 keyframes.json 6Full renderbash <skill>/scripts/render_chunks.sh video.mp4Audio mixpython3 <skill>/scripts/mix_audio.py timeline.json mix_raw.wavFinalizebash <skill>/scripts/finalize.sh video.mp4 mix_raw.wav final.mp4Frame-by-frame auditpython3 <skill>/scripts/audit.py video.mp4 72Phone versionffmpeg -i final.mp4 -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart final_phone.mp4

Review checklist

1. The subject is big or cut off by the frame edge, with no large empty areas around it.

2. The item being discussed is the brightest, and the camera is near it.

3. At most 2 labels per frame.

4. The caption area (screen y 905 to 960), picture-in-picture, logo and AI label don't cover anything.

5. No tofu boxes, no broken words split across lines, and no text overflowing its card.

6. Numbers and quotes match the facts file. Each one has a source line. CC BY photos have credits.

7. White-paper scenes and dark scenes alternate.

8. Hide the props and background and look at the skeleton only. It should still look different from other topics.

Known pitfalls

• When a keyword is at the start of a sentence, S.k(word, -0.3) starts before the clip does. Wrap it in max(S.t0, …).

• If an image path doesn't exist, that frame fails to render (Error loading image). Run ls public/<path> first.

• zsh doesn't split variables on spaces, so node render.mjs stills out $FR fails with Frame NaN. Write ${=FR} or use xargs.

• A still frame looking fine doesn't mean the video is fine. Always run audit.py after the full render.

• When web_shot.mjs captures several pages in parallel, give each process a different --port.

Output format

Final video: final.mp4 (1920×1080, 24 fps, duration mm:ss). Phone version: final_phone.mp4
Theme: <theme> · Scenes: N · Review rounds: N · Audit flagged: 0
Facts file: facts.md (each entry has a number, original text, source and date)
Items I couldn't verify, where I rewrote the script: ……

In one line

Plan the look before the storyboard, keep a source for every number, and always keep the label. Companion tutorial: Let Your AI Agent Turn Plain Talking-Head Clips into Big-Channel Explainer Videos.