Menu

Individual skill

sn-code-video

0upvotes

Create and revise code-driven videos with Canvas, SVG, HTML/CSS, Three.js, Remotion, Manim, or p5.js, including sound, deterministic frame capture, visual review, and MP4 verification. Use for rendered explainers, procedural animations, motion graphics, promos, and music-synchronized films; not for general web apps, scroll-driven HTML stories, or footage generation with video models.

skills/sn-code-video/SKILL.md

Read pinned source

Source commit 004a2426fa092097d65ac9233ca0bcb2be793f57

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
6,068
Repository last updated
Nov 3, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# SN Code Video

A code video is a program `frame(t) → image`, sampled at `t = i / fps` and encoded. Almost every failure in this kind of work is one of four things: the film is never finished, the picture depends on wall-clock time, nobody looked at the frames, or the file does not match the brief. This skill prevents those four.

## Setup and paths

Use a separate project folder for the video source, `SPEC.md`, build files, and outputs. Resolve `SKILL_DIR` to the absolute directory containing this `SKILL.md`, whether installed in the agent's skills directory or used from this repository. Run project commands from the video project folder; invoke bundled scripts through `"$SKILL_DIR/scripts/..."` so they do not depend on the current working directory. Set `SKILL_DIR` again in each shell session if needed.

Requirements: Node.js 18+ for browser capture, Python 3, FFmpeg/ffprobe with libx264 and AAC, and fonts covering the requested language. Install Playwright (with Chromium) or Puppeteer in the **video project**; the capture helper resolves its packages there first. Python audio dependencies are listed in `requirements.txt`; edge-tts needs network access, and faster-whisper needs downloaded model weights for transcription checks. Install only the tools required by the chosen renderer and audio workflow. Setup and invocation examples: [English guide](../../docs/sn-code-video.md) / [中文指南](../../docs/sn-code-video_cn.md) in the source repository; these repository guides are not required when the skill folder is installed on its own.

Deliver the playable MP4, source code and reproduction commands, `SPEC.md`, `VERIFY.md`, and a contact sheet. Audio stems and timing data belong in the project when sound is used.

## 0. Read the craft guides you need
Back to top