Guide · Agent skill
How to use the HTML Reel Maker agent skill (html-reel)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The html-reel skill lets an AI agent turn a source you already have, such as a tweet, a landing page, a YouTube video or a video file, into a vertical 9:16 reel for Instagram Reels, TikTok or Shorts. It is written for creators and marketers who want a short voiced video made from existing material. After this guide you will know what the skill does, how to install it, how to phrase a request so it triggers, and what it needs before you run it.
HTML Reel MakerMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the html-reel ZIP from this page and unzip it into ~/.claude/skills/ or the project's .claude/skills/ folder.
- 2Set up the tools. Make sure Node.js, Python, ffmpeg, Playwright or playwright-core, and OpenCV for Python are available, and connect Fil's video editor over MCP.
- 3Ask for a reel. Send your source link or file with the platform and style you want, such as a 9:16 promo for Instagram Reels.
- 4Review the script. Read the script the agent writes from the source's facts and check the names and numbers before any voice is made.
- 5Make the voice. Generate the voiceover with word timestamps using your cloned ElevenLabs voice, and confirm the words match the script.
- 6Assemble and preview. Let the agent build the HTML scenes and assemble them in Fil's video editor, then preview the reel.
- 7Export after review. Replace the camera placeholder with your takes if you recorded them, then export the MP4 once you are satisfied.
What an agent skill is and what html-reel makes it do
An agent skill is a folder of instructions and bundled scripts that an AI agent can load when a request matches it. The html-reel skill is one of these. Its description tells the agent to use it when someone wants a reel, a short or a vertical video from a post, thread, launch, landing page, demo video or YouTube video.
Given a source, the skill reads its words, media, fonts and colours, picks a structure such as a promo, a showcase, "found this", an explainer or before and after, and writes a script in the creator's voice using only the source's own facts. It then makes the voice with word timestamps, builds the picture from HTML scenes driven by one clock through window.__frame(t), and assembles the result in Fil's video editor over MCP. Every visual cut is placed on a spoken word.
- Opens on the source's cover as the first frame, when it has one
- Frames a demo video and cuts it to the words that name it
- Can add a placeholder camera silhouette for the creator's face, replaced by real takes later
- Can also make a faceless reel
Install the html-reel skill from a ZIP
Download the ZIP for html-reel from this directory page. Unzip it into one of two places. For a personal skill available in all your projects, unzip it into ~/.claude/skills/. For a skill that applies only to one project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
You do not need a special command. Describe the reel you want and name the source. The skill is matched on requests like "make a reel from this post", "a reel like this one", or "turn this landing page into a vertical video". Include the link or file, the platform and the kind of video if you have a preference.
For a talking-head promo cut to your own delivery, say so. The skill then plans a placeholder for your face in the camera layouts.
- "Make a 9:16 reel from this tweet for Instagram Reels."
- "Turn this landing page into a TikTok promo with a voiceover."
- "Build a Shorts video from this YouTube video, faceless."
- "Make a before-and-after reel from this demo file."
Know what the skill needs before you start
The workflow runs bundled Node.js and Python scripts and uses ffmpeg. It also needs Playwright or playwright-core with headless Chrome, and OpenCV for Python for the decursor.py script. Assembly happens in Fil's video editor, which requires MCP access. Install Fil's MCP from fil.design/for-agents.
A voiceover uses an ElevenLabs account with a cloned voice, as the skill describes. Nano Banana image editing in Fil is optional and is only used for the camera placeholder. The skill uses the network.
- Node.js and Python for the bundled scripts
- ffmpeg
- Playwright or playwright-core with headless Chrome
- OpenCV for Python (decursor.py)
- Fil's video editor with MCP access
- ElevenLabs account and cloned voice for voiceover (optional for faceless reels as final voice)
- Nano Banana image editing in Fil for the camera placeholder (optional)
Review safety: scripts, network and voice use
This skill runs scripts and uses the network, so read what it will do before you approve it. The voice script reads your ElevenLabs key from the environment and the skill says it is never printed. The skill asks before any spend over $1.
Use voice cloning and anyone's likeness only with consent. The reel also needs your review; the skill does not publish automatically.
- Runs scripts: yes
- Uses network: yes
- Asks before any spend over $1
- Requires consent for voice cloning and someone else's likeness
Review the reel and tune the timing
The skill draws every scene from one clock, so when you record a real take, the scenes are retimed to your word timings rather than re-animated by hand. Check the voice against the script, especially names and numbers. If the voice runs a second or two long, the skill can cut long pauses instead of asking for another take.
Preview the result before exporting. Fil's editor can export the MP4 once the edit looks right.
- Check names and numbers in the voice against Source.md
- Use a 30-second script of about 65 to 70 words for a cloned voice
- Preview locally before export
What people use it for
- Turning a product launch tweet thread into a 9:16 announcement reel
- Repurposing a landing page into a short promo with captions and a voiceover
- Cutting a product demo video into a showcase reel that opens on its best frame
- Making a faceless explainer for YouTube Shorts from a video file
- Recording your own talking-head promo and retiming the scenes to your real delivery
Frequently asked questions
What is the html-reel skill?
It is an agent skill that turns a tweet, video, YouTube video or landing page into a 9:16 reel. The agent writes the script from the source's facts, builds HTML scenes timed to a voice, and assembles the result in Fil's video editor.
How do I install the html-reel agent skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings, Capabilities, Skills.
What do I need to run html-reel?
You need Node.js and Python for the bundled scripts, ffmpeg, Playwright or playwright-core with headless Chrome, OpenCV for Python, and Fil's video editor with MCP access. A cloned ElevenLabs voice is needed for voiceover, and Nano Banana in Fil is optional for the camera placeholder.
Is html-reel free?
The skill is released under the MIT licence. Fil's video editor is free apart from captions, according to the skill's notes, but ElevenLabs voice generation is a paid service that the skill asks you to approve if a spend exceeds $1.
Does html-reel publish the reel automatically?
No. The reel needs your review before you use it. The skill assembles and exports the video, and you decide where to post it.
When should I use html-demo instead?
Use html-demo when you want a live app window on a web page with no video file. html-reel is for a vertical video cut to a voice from a source.
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
html-reel suits creators, marketers and developers who already have a post, landing page or video and want a voiced vertical reel built from it, and who are comfortable running local scripts and connecting Fil's editor. Skip it if you want a fully automatic publish, need no code execution, or only want a live app window on a page, where html-demo is the better fit.
Download the skill