Skip to content
Get packs

HTML Reel Maker

Turns a tweet, page or video into a narrated 9:16 reel with HTML scenes cut to words

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

What it does

Once installed, the agent can take a source such as a tweet, landing page, YouTube video or video file and build a vertical reel for Instagram Reels, TikTok or Shorts. It writes a script in the creator's voice from the source's own facts, plans scenes in HTML driven by a single clock so every visual cut lands on a spoken word, and assembles the result in Fil's video editor. It can also add a placeholder camera silhouette for a creator's face and retime the scenes to a real recording later.

Great for

  • Creators who want a short vertical video made from a post, thread, launch or landing page
  • Marketers repurposing a product demo or YouTube video into a reel
  • Developers with a voice clone and Fil's video editor who want a repeatable reel pipeline

Skip it if

  • Users who only want a live app window on a web page, since the html-demo skill fits that better
  • Anyone expecting a fully automatic publish: the reel needs review, and voice cloning or someone else's likeness should only be used with consent
  • Projects needing no code execution, because the workflow runs bundled Node and Python scripts and ffmpeg

Try asking

  • “Make a 9:16 reel from this landing page, with the script in my voice and the demo video cut to the words”
  • “Turn this tweet thread into a faceless vertical video with on-screen titles in the post's colours”
  • “Build a reel from this YouTube video with a camera placeholder for my talking-head takes later”
Step-by-step guide: how to use HTML Reel MakerInstall, 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-reel.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-reel.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

  • Review the script and the generated voice against the source facts before rendering, since the skill only writes what the source lists
  • Record the creator's real takes in the planned layouts so the retiming by word anchors works well
  • Check the contact sheet and safe-area output before publishing

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/fil-editor.md
  • references/formula.md
  • references/judging.md
  • references/retime.md
  • references/source.md
  • references/structures.md
  • scripts/bubble.mjs
  • scripts/choreo-example.mjs
  • scripts/decursor.py
  • scripts/fil-words.py
  • scripts/flash-crop.mjs
  • scripts/frame-video.mjs
  • SKILL.md

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