Skip to content
Get packs

HTML Explainer Video

Turns a product or idea into a finished one-minute explainer video, with script, voice and HTML scenes.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
15 files

What it does

Once installed, the agent can write a short script for a product, feature or idea, generate a voice for it, and build a one-minute video from HTML scenes timed to the spoken words. You can choose the look (fonts, colours, motion), the shape (square, widescreen, vertical) and whether a camera is included. The skill describes a workflow that uses Fil's video editor over MCP for captions, music and rendering, and it documents Playwright and ffmpeg for rendering frames.

Great for

  • Founders or marketers who need a product explainer or onboarding video without filming anything
  • Developers who want a scripted, repeatable explainer built from HTML they can edit
  • Teams making the same film in several brand looks and aspect ratios

Skip it if

  • Live app demos recorded from a real screen, because this skill builds scenes from HTML rather than capturing software (use html-demo instead)
  • Projects needing a real human on camera by default, since the camera is off unless requested
  • Fully automated publishing with no review, because the voice and facts must be checked against the source material

Try asking

  • “Make a one-minute explainer video for my product from its website, in our brand look, in 16:9”
  • “Turn this feature description into a 9:16 onboarding video with a hook, benefit and quick tutorial”
  • “Create a how-it-works launch video for this idea with no camera, in a dark terminal style”
Step-by-step guide: how to use HTML Explainer VideoInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    html-explainer-video.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-explainer-video.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-explainer-video.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Check every fact in the script against the product's own site or docs before generating the voice, since the film can only state what is on the list
  • Ask for the price preview first (max_credits: 0) and approve voice generation before it runs
  • Review the voice transcript for names and numbers, and render stills in at least two looks before final output

What's inside

  • agents/openai.yaml
  • demo/film.css
  • demo/film.html
  • demo/film.js
  • demo/index.html
  • demo/looks/night.css
  • demo/looks/paper.css
  • demo/looks/poster.css
  • demo/looks/terminal.css
  • demo/looks/terminal.md
  • demo/PROMPT.md
  • demo/script.txt
  • demo/words.js
  • demo/words.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-11-02. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.