Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
Turn a research brief, finished script, or generated MP4 into a reviewed and verified vertical explainer video.
$ npx skills add runesleo/claude-video-kit --skill video-explainer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install runesleo/claude-video-kit video-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/runesleo/claude-video-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/video-explainer .claude/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .claude/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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/runesleo/claude-video-kit/tree/main/skills/video-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 runesleo/claude-video-kit --skill video-explainer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install runesleo/claude-video-kit video-explainer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runesleo/claude-video-kit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/video-explainer .agents/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .agents/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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 runesleo/claude-video-kit --skill video-explainer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install runesleo/claude-video-kit video-explainer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runesleo/claude-video-kit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/video-explainer .cursor/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .cursor/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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/runesleo/claude-video-kit.git --path skills/video-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 runesleo/claude-video-kit --skill video-explainer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install runesleo/claude-video-kit video-explainer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runesleo/claude-video-kit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/video-explainer .gemini/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .gemini/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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 runesleo/claude-video-kit video-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 runesleo/claude-video-kit --skill video-explainer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/runesleo/claude-video-kit.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/video-explainer .github/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .github/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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 runesleo/claude-video-kit --skill video-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 runesleo/claude-video-kit video-explainer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runesleo/claude-video-kit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/video-explainer .opencode/skills/video-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 "video-explainer" agent skill from https://github.com/runesleo/claude-video-kit/tree/main/skills/video-explainer into .opencode/skills/video-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-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.
video-explainerTurn a research brief, finished script, or generated MP4 into a reviewed and verified vertical explainer video.
Video Explainer is an agent skill from runesleo/claude-video-kit. Turn a research brief, finished script, or generated MP4 into a reviewed and verified vertical explainer video. Use when an agent should choose the simplest current production strategy, preserve strict final-artifact quality gates, run the deterministic Remotion fallback, diagnose the local toolchain, or verify an existing MP4 before any manual publication step.
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `agents/openai.yaml`, `references/brief-to-script.md` and `references/errors-and-privacy.md`).
It sits in Media & Creative, covering Video production, Deep research and Quality gates. It works with Remotion. The repository describes itself as: Agent Skill + Remotion pipeline: brief/script → review receipt → narrated 9:16 explainer. RC: video-explainer skill. The licence is MIT.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 43e3cd1. 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.
Shell commands in SKILL.md call:
nodepython3npmnpxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npm and 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.
Video Explainer loads about 2.4k tokens when it runs, and up to ~6.6k if it reads all its reference files. Until then it costs about 95 tokens; SKILL.md has 1,053 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 found no risky patterns in SKILL.md.
Automated 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); files beside SKILL.md are not scanned.
The full file from runesleo/claude-video-kit at commit 43e3cd1, republished under its MIT licence (© runesleo). 1,053 words, ~2,359 tokens.
.claude/skills/video-explainer/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.Version note: v0.3.0-rc.1 / 2026-09-27 / Make production strategy adaptive while keeping the deterministic Remotion recipe as a strict fallback. Final-artifact acceptance is strategy-independent and bound to the exact MP4 bytes. Keep upload, account access, credentials, private voice assets, hosted rendering, and publication out of scope.
Produce a local video and evidence packet. Never upload or publish from this skill.
This Skill separates what must be true of the final artifact from how the artifact is produced.
Before forcing an existing recipe, run a capability challenge:
Choose one execution strategy:
direct_artifact — a current model/capability produces the final MP4 directly. Do not require motion-storyboard.json, script.json, TTS, alignment, or Remotion merely to satisfy a historical recipe.agent_orchestrated — an agent may choose and combine tools as implementation details. Intermediate artifacts are optional unless they are needed to satisfy the brief or evidence requirements.legacy_remotion — use the repository-owned deterministic path when direct generation cannot preserve facts, branding, layout control, narration identity, or other required qualities.All three strategies converge on objective MP4 verification plus an independent final-artifact review. Production freedom never bypasses final acceptance.
The deterministic fallback orchestrates a local clone of claude-video-kit; it does not bundle the renderer. From the repository root, install the runtime and register the Skill with:
npm ci --prefix remotion
npx skills add runesleo/claude-video-kit --skill video-explainerFor repository development, run commands from the repository root.
Read the brief and run the capability challenge above. Select direct_artifact, agent_orchestrated, or legacy_remotion. Prefer the simplest strategy that can plausibly pass the same final acceptance contract.
If using direct_artifact or agent_orchestrated, produce the final 9:16 MP4 without manufacturing legacy intermediate files just to satisfy the old recipe. Then skip to Step 6.
If using legacy_remotion, run the read-only doctor before changing a project:
node scripts/video-explainer.mjs doctor --output <output-directory>Read setup-and-doctor.md when doctor blocks or the environment is new.
For legacy_remotion, turn the brief into motion-storyboard.json before treating the script as ready. For every scene, define its information purpose, visual metaphor, motion grammar, why motion communicates better than a static card, duration hint, and explicit 3D decision.
Read motion-storyboard.md, then validate:
python3 scripts/check_storyboard.py <project>Production planning in this deterministic path must not default to title + card + bullets. Generic entrance/exit effects (fade, slide, zoom, etc.) do not count as an information model by themselves. 3D is an exception that must earn its render/debug cost with a concrete comprehension benefit.
For legacy_remotion, convert the approved information plan into script.json, require the independent pre-render review, and render only from a current pass receipt:
node scripts/video-explainer.mjs review <project> --input <project>/review-input.json
node scripts/video-explainer.mjs render <project>Read brief-to-script.md and review-gate.md. The pre-render gate checks facts, structure, duration, visual feasibility, hierarchy, simplicity, clarity, legibility, craft, privacy, and copyright. Any script edit makes that receipt stale.
On macOS, use --demo-quality only for a credential-free first success. It forces the built-in demo voice and script-timed captions; that explicit demo path may omit a storyboard and is never publication-quality. Read render-and-verify.md before running a custom project.
For every strategy, verify the exact final MP4 objectively:
node scripts/verify-shorts.mjs <video.mp4>For the deterministic Remotion path, prefer bound render metadata when available:
node scripts/verify-shorts.mjs <project>/out/full.mp4 \
--metadata <project>/metadata.jsonThe objective verifier checks canvas, duration, and scene rhythm. It does not prove factual correctness, visual polish, privacy, copyright, narration consistency, or end-card correctness.
Require an independent final-artifact review bound to the exact MP4 SHA-256:
node scripts/video-explainer.mjs review-render <video.mp4> \
--input <render-review-input.json>The final-artifact review is strategy-independent. It requires:
Record production_strategy in the review input when known. It is traceability metadata, not a quality waiver.
If any final-artifact check is fix or block, revise or regenerate. A changed MP4 invalidates the receipt.
Before any distribution handoff, finish all cover/subtitle/audio edits and follow the repository's final release gate: python3 scripts/video_release_gate.py evaluate, then verify on the final master. Require the platform's independent video_final_review.v1, three hash-bound QA docs, current quality profile, and objective audio/cover checks. Keep the Step 7 final-artifact review; it cannot substitute for the platform release receipt. build-distribute-pack verifies that receipt before writing any handoff. Downstream publishers must verify again immediately before an authorized upload/schedule action.
Report the chosen production strategy, video path, objective verification result, final-artifact review receipt, release-gate status (or explicitly not run), elapsed time, and known limitations. For legacy_remotion, also report storyboard validation and the pre-render receipt. A local pass is evidence for the artifact, not publication approval.
If direct_artifact or agent_orchestrated fails final acceptance, first determine whether another autonomous attempt can reasonably fix the defect. If deterministic control is required for facts, data visualization, brand layout, narration identity, or reproducibility, fall back to legacy_remotion.
Do not force the deterministic recipe merely because it exists. Do not accept a direct artifact merely because it was generated by a newer model.
Run the repository-owned neutral demo:
node scripts/video-explainer.mjs demo --output /tmp/video-explainer-first-successThe demo exercises the deterministic fallback. It must create a current pre-render pass receipt before TTS, render locally without an API key on supported macOS, and run the shorts verifier. The explicit demo-quality script-alignment path may omit motion-storyboard.json; this exception exists to preserve a credential-free tooling smoke test, not to define production quality. The demo intentionally does not self-approve the final-artifact gate because an independent reviewer must inspect the actual MP4. It must not read an account, upload media, or send the brief to a remote service.
legacy_remotion production path when motion-storyboard.json is missing or fails its gate. The only exception is the explicit demo-quality script-alignment path.legacy_remotion before TTS/render when the pre-render review is missing, stale, fix, or block.fix, or block.evaluate / verify.© runesleo, MIT. 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 7 other files (references) in skills/video-explainer of runesleo/claude-video-kit.
Open the folder on GitHubat commit 43e3cd1
Video Explainer 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 |
|---|---|---|---|---|---|---|
| Video Explainer this skillrunesleo/claude-video-kit | 119 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 | |
| Video ShotcraftVincentwei1021/video-shotcraft | 11k | — | ~2.6k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 59k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Writing Docsremotion-dev/remotion | 63k | 1 repos | ~1.9k | Automated safety check: Pass | Custom licence | |
| Brand Launch Video Starvibe-motion/skills | 1.3k | — | ~2.3k | Automated safety check: Pass | None |
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
Vincentwei1021/video-shotcraft
Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
remotion-dev/remotion
Guides for writing and editing Remotion documentation. An agent skill from remotion-dev/remotion.
vibe-motion/skills
Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery.
itwanger/toBeBetterJavaer
把口播稿做成二哥风格的 Remotion 视频,包括整理视频用稿、火山 TTS 配音、音画对齐、逐章动画预览和导出带配音的 MP4。用户说“做视频”“口播稿转视频”“Remotion”“继续做下一章”“出片”“渲染”“改读音”“配音读错了”,或给出 docs/src/ai/video/ 下的稿子要做成视频时使用。共享工具、配置和素材在…
Works with
Categories
Turn a research brief, finished script, or generated MP4 into a reviewed and verified vertical explainer video. Video Explainer is an agent skill from runesleo/claude-video-kit. Turn a research brief, finished script, or generated MP4 into a reviewed and verified vertical explainer video.
Video Explainer fits situations like: an agent should choose the simplest current production strategy; preserve strict final-artifact quality gates; run the deterministic Remotion fallback; diagnose the local toolchain.
Run `npx skills add runesleo/claude-video-kit --skill video-explainer -a claude-code`. Or copy the skill folder (skills/video-explainer in runesleo/claude-video-kit) into .claude/skills/video-explainer in your project. Claude Code loads it when a task matches its description.
Run `npx skills add runesleo/claude-video-kit --skill video-explainer -a codex`. Or copy the skill folder (skills/video-explainer in runesleo/claude-video-kit) into .agents/skills/video-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 runesleo/claude-video-kit --skill video-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/video-explainer, .gemini/skills/video-explainer, .github/skills/video-explainer and .opencode/skills/video-explainer in your project.
Going by SKILL.md and its folder, Video Explainer needs the command-line tools its instructions call (node, python3, npm and npx). Our summary lists: Python 3; Node.js.
SKILL.md contains no URLs. Its commands use npm and 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 no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Video Explainer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.4k tokens (SKILL.md is roughly 9.4k 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 4.2k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Video Explainer: Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.4k stars), Video Shotcraft (Vincentwei1021/video-shotcraft, 11k stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 59k stars) and Writing Docs (remotion-dev/remotion, 63k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
runesleo (a GitHub user) maintains it in runesleo/claude-video-kit, which has 119 GitHub stars. The repository was last updated on October 7, 2026.
Source: runesleo/claude-video-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.