Comparison Video Creator (create-video)

Reproduces this repo's exact pipeline for producing a new 30–40s "A vs B" explainer short (fixed 3-zone layout) end to end.

Image & VideoAdvanced★ 130⑂ 84AI score 8/10Last updated: Aug 19, 2026

What it does

Packages the full workflow for adding another episode to the repo's "concept comparison" short-form series.

Locks the A/B concept pair and writes a script of exactly 12 lines following the series rhythm (2 hooks, 1 tension line, 3 lines for A, 3 for B, 2 side-by-side comparison lines, 1 payoff)
Generates the Vietnamese voice-over via Vbee TTS, fixing phonetic spellings for English/technical terms (e.g. "DevOps" → "Đép Ốp") while captions keep original spelling
Computes timeline timing with verified gap formulas (0.3–0.35s within a beat, 0.4–0.45s across beats) from durations.json
Builds index.html by reusing the reference composition's CSS/GSAP helpers, changing only card icons, captions, audio tags and durations
Runs npm run check, captures a snapshot contact sheet, updates the README, then renders
With AUTO_CREATE_VIDEO=1 in the root .env, it runs steps 1→9 non-stop without confirmation prompts

Who it's for

Maintainers of this repo (or an identically structured hyperframes short-form series)
Creators who render "X vs Y" explainer shorts programmatically instead of in an editor
Anyone dealing with Vietnamese captions, diacritic-safe fonts, and TTS pronunciation of tech jargon

Examples

"Make a Windows vs Linux comparison video" → proposes the 12-line script, generates VO, scaffolds videos/windows-vs-linux/, renders
"Add the third video to the series" → replays the dev-vs-devops procedure exactly, including copying sync-channel.mjs and wiring the pre* npm hooks
If total runtime falls short of 30s → adds sentences/examples to the A/B explanations instead of stretching gaps, preserving the fast-cut house style

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Cuongyd196/auto-compare-video/HEAD/.claude/skills/create-video/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/create-video folder from the GitHub repo Cuongyd196/auto-compare-video into my ~/.claude/skills/cuongyd196-create-video/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Cuongyd196/auto-compare-video.git && mkdir -p ~/.claude/skills && cp -r auto-compare-video/.claude/skills/create-video ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and go to your working directory.
Clone the repo: git clone https://github.com/Cuongyd196/auto-compare-video.git
Create the skills folder: mkdir -p ~/.claude/skills
Copy the skill: cp -r auto-compare-video/.claude/skills/create-video ~/.claude/skills/
The skill reads DESIGN.md and the existing videos/* folders, so run Claude Code from inside the cloned repo for best results.
Create a root .env with your VBEE_* TTS credentials, CHANNEL, and optionally AUTO_CREATE_VIDEO=0 or 1.
Make sure Node.js and npm are installed (the skill invokes npx hyperframes).
In Claude Code, ask something like "make a comparison video: Docker vs VM" to trigger the skill.

View source on GitHub ↗License: MIT