Guide · Agent skill
How to use the HTML Explainer Video agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
HTML Explainer Video is an agent skill that turns a product, feature or idea into a finished one-minute explainer video. This guide explains what an agent skill is, how to install this one, how to ask for a video in plain language, and what the skill needs before you start. After reading it you should be able to install the skill, request a film in your own look, and know which checks to run before publishing.
HTML Explainer VideoMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/, or into your project's .claude/skills/ folder.
- 2Or upload it in the Claude apps. Open Settings, go to Capabilities, and upload the skill under Skills.
- 3Describe the video in plain words. Name the feature or idea, the kind of film, the look source and the shape. Say whether you want a camera.
- 4Approve the voice price. Review the script, then approve the audio node cost before the voice is generated.
- 5Preview the film. Run the preview script with your voice, music and sound effects, and check captions and timing.
- 6Render and assemble. Render the scenes at 60 fps and 2x, then assemble them in Fil's video editor over MCP.
What an agent skill is and what this one makes the agent do
An agent skill is a folder of instructions and supporting files that an AI agent loads when a request matches the skill's description. This one lives in agent-skills/media/html-explainer-video and is licensed under MIT.
Once it is loaded, the agent writes a script with a hook, a benefit, a quick tutorial and a closing ask. It makes a voice for the script. It then draws every scene in HTML, timed to the spoken words, renders the scenes frame by frame at 2x, and assembles the edit in Fil's video editor over MCP, with captions, music, sound effects and chapters.
- The look (type, colour, corners, motion) is an input, read from your site or a named style.
- The shape is an input: 4:3, 16:9, 1:1 or 9:16.
- There is no camera by default. Ask for one and the skill adds record slots, layouts by keyframes and a teleprompter.
Install the html-explainer-video skill
Option one: download the ZIP for this skill from this page and unzip it into ~/.claude/skills/ to make it available to you across projects. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
Option two: in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: ~/.claude/skills/
- Project install: the .claude/skills/ folder inside your project
- Claude apps: Settings, then Capabilities, then Skills
Trigger the skill with a natural request
You do not need a special command. Describe the video you want and name the kind of film: an explainer, a feature video, a product walkthrough, an onboarding video, a how-it-works video or a launch video. Say if you want it in your own brand or without filming anything. The skill's description lists these triggers, so a request like the one below should load it.
The skill works best when you give the feature or idea, the one thing viewers should remember, the facts to use, and the look and shape you want. The skill's own prompt examples are shown below.
- Minimal: explain the feature in one minute, in the look of your site, no camera.
- Full: name the idea, the one takeaway, the docs to read facts from, the look source, the shape, and the ask.
- Named style: explain the idea in a warm editorial look with a serif, hairlines and slow fades, in 4:3 for feeds.
- With camera: explain the feature with me on camera, set up so I only press Record.
Use $html-explainer-video to explain [our new scheduling feature] in one minute, in the look of [https://our-site.example]. No camera.Choose the look, shape and camera
The look comes from your site when the skill can read it, or from a style you name. The skill measures your page into a look file with scripts/read-look.mjs and then checks the result by eye against your page. Nothing in the scenes is tied to one look, so the same script can be rendered in several.
Shape sets the frame: 4:3, 16:9, 1:1 or 9:16. If you do not say where the video will be seen, the skill uses 4:3. Camera is off unless you ask for it, and scenes then fill the frame.
- Look: read from your site, or a named style such as warm editorial or dark terminal.
- Shape: 4:3, 16:9, 1:1 or 9:16.
- Camera: off by default; on adds record slots and a teleprompter.
What you need before a render
The skill documents Playwright and ffmpeg for rendering frames. It also needs access to Fil's video editor over MCP for captions, music and final assembly. Voice generation uses an audio node referenced as eleven-v4, which may incur credits.
The skill's workflow shows the price before it makes the voice, using an audio node with max_credits set to 0. You should approve the price before the voice is generated.
- Playwright for rendering frames
- ffmpeg for video processing
- Access to Fil's video editor over MCP
- An audio or voice node (eleven-v4 is referenced); may incur credits
Run a quick start with the skill's scripts
The skill's workflow moves from a written script to a preview, then a full render. The commands below come from the skill's file list. Run them from the skill folder, or point them at your film file. Preview first, because each change costs a render to check.
Render scenes with the flags shown. The skill notes that rendering takes minutes per scene, so run it niced and in the background.
- Stills to check framing: scripts/render.mjs film.html --stills 0,3,8,16 --out stills
- Full preview with voice, music and sound: scripts/preview.mjs film.html --voice voice.mp3 --music bed.mp3 --sfx sfx.json --out preview.mp4
- Final render at 60 fps and 2x: scripts/render.mjs film.html --scene all --fps 60 --scale 2 --out final
scripts/render.mjs film.html --scene all --fps 60 --scale 2 --out finalSafety notes: scripts and network
This skill runs scripts and uses the network. Its scripts include read-look.mjs, which reads a website you point it at, and render and preview scripts that drive a browser. Voice generation and Fil's editor use external services, and voice generation may cost credits.
Review the script and voice before publishing. The skill's own guidance is to check the voice against the source material, especially names and numbers, and not to publish fully automatically.
- Scripts run on your machine; read the files in the skill folder before running them.
- The skill makes network calls to read your site and to use the voice and editor services.
- Check every spoken fact, name and number against your source material before release.
Tips for better films
Give the skill the facts it may state, with their sources. The film can only say what is on that list. Keep scripts to about 140 to 155 words a minute so the voice fits the time.
Ask for at least two looks when you build a film, so scenes are not tied to one look. Preview in your real shape before rendering the final.
- Provide a list of facts with sources before scripting.
- Aim for 140 to 155 words per minute.
- Test the film in at least two looks and in the shape you will publish.
- Use the camera option only when you want to appear on screen.
What people use it for
- A founder makes a product explainer for a landing page without filming anything.
- A developer builds a repeatable onboarding video from editable HTML scenes.
- A marketing team makes the same launch film in a 16:9 widescreen cut and a 9:16 vertical cut.
- A team adds a short how-it-works film with captions and music for a documentation page.
Frequently asked questions
How do I install the html-explainer-video skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings, then Capabilities, then Skills.
Is the html-explainer-video skill free?
The skill is published under the MIT licence. The voice step uses an audio node referenced as eleven-v4, which may incur credits, so check the price the skill shows before approving it.
What do I need to run html-explainer-video?
You need Playwright and ffmpeg for rendering, access to Fil's video editor over MCP for captions, music and assembly, and an audio or voice node. The skill runs scripts and uses the network.
Can the skill make a video without me on camera?
Yes. The camera is off by default, and the film is a voice-led video whose scenes fill the frame. You can ask for a camera, which adds record slots and a teleprompter.
What is the difference between html-explainer-video and html-demo?
html-explainer-video builds a finished one-minute explainer from HTML scenes timed to a voice. html-demo shows a live app window on a web page and produces no video file. Use html-demo for a live app demo recorded from a real screen.
Why does my voice timing or a scene look wrong?
Check the script's words against the voice, especially names and numbers. Then look at stills in each look and shape you plan to publish, since the skill checks framing, text size and frame consistency.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you need a product, feature or onboarding explainer and do not want to film it, or if you want the same film in several brand looks and shapes. Pick something else if you need a live recording of your app, because html-demo is the better fit, or if you need a real person on camera by default, or if you want fully automated publishing with no review.
Download the skill