Sn Code Video
Create and revise code-driven videos with Canvas, SVG, HTML/CSS, Three.js, Remotion...
Install
npx skills add OpenSenseNova/SenseNova-Skills --skill sn-code-video -g -a claude-code -y- Repository
- OpenSenseNova/SenseNova-Skills6k
- Category
- Design
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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 / 中文指南 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.
