html-explainer skill
html-explainer turns a topic into a video with voiceover, subtitles and cover: HTML frames render to MP4 locally.
- 297 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill installs dependencies and downloads Chromium when no browser is found.
- Narration text is sent to the `edge-tts` network service.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/html-explainerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill installs dependencies and downloads Chromium when no browser is found.
- Narration text is sent to the `edge-tts` network service.
This is third-party code. Review the repository files before installing.
What it does
html-explainer is a skill that walks an agent from a topic to a finished explainer video: research, narration script, voiceover, timed subtitles, storyboarding, rendering, a check pass and a cover. No video model is needed. The agent writes frames in HTML, CSS and GSAP and the browser draws them frame by frame, so on-screen text stays sharp. Rendering produces MP4 up to 4K60 with motion blur and multiple processes. Voiceover uses the free `edge-tts`, and the core chain runs without keys or per-request fees. The author puts a two-minute video at about 30 minutes on the fast path.
Who it is for. Channel authors and editors who need explainer videos built from text and data without editing software or paid video models.
Good fit when
- A topic should become a one-minute video with voice and subtitles.
- On-screen numbers must stay readable, which video generation often fails at.
- Frames should live as files and be edited through diffs.
- Covers in 16:9 and 3:4 are needed for the same video.
Not a fit when
- You want realistic footage of people or nature: the skill draws graphics rather than shooting film.
- Chrome or Edge, ffmpeg and Node.js are missing from the machine.
- A video is needed in a couple of minutes, while the full path takes about half an hour.
Example request
Make a one-minute video about why the sky is blue: script, voiceover, subtitles and a 16:9 cover.Limitations
Python 3.9 or newer, Node.js 18, Chrome or Edge and ffmpeg are required. Without a browser the skill downloads Chromium of about 115 MB. Voiceover through `edge-tts` calls a network service, so the narration text leaves the machine. Rendering at 4K60 costs several times more than 1080p. The documentation is mainly Chinese, with an English README. On Windows run the scripts from Git Bash and keep the project path ASCII.
How to disable. Delete the skill folder from the agent directory. Generated videos and temporary frames live in the project, so delete them separately.
FAQ
Is an API key needed?
Not for the core chain: voiceover uses the free `edge-tts` and rendering is local. An extra Volcano Engine voice is connected separately.
How do I install it?
Give the agent the repository link and ask it to install into the skills directory and check the environment. Or clone it yourself and run `setup_env.sh --install`.
Which agents are supported?
The skill follows the Agent Skills format and loads in Claude Code, OpenAI Codex, Cursor and Gemini CLI.
How long does rendering take?
The author reports about 16 frames per second for 1080p30, so a 3600-frame video renders in roughly four minutes.
What is the output?
An MP4 with voiceover and burned-in subtitles plus covers in two aspect ratios.
Discussion
No questions or reviews yet.
Related
SkillsA skill and CLI: the agent writes a script and scenes, while the voice, word timing and MP4 render run on your computer with no API keys
A skill that renders HTML and Canvas animation to MP4, GIF or a transparent layer: a browser grabs the frames, ffmpeg encodes.
Explainer Video turns text, a link or a document into a narrated hand-drawn video from Codex or Claude Code
A skill for Claude Code and Codex that turns one sentence into a product launch film, scores the music and edits a frame on click
A CLI for programmatic video from HTML: the agent assembles frames from templates and renders a finished MP4 on your machine
A skill for knowledge explainers: the agent researches a topic, writes screen copy and builds a HyperFrames project for MP4
README in short
The README explains how the approach differs from text-to-video models, where time goes, how to install and what the environment needs. It is written in Chinese with a README.en.md.