HTML Explainer

把任意主题做成讲解/科普视频并渲染成 MP4（HTML/CSS/GSAP 画面 + 确定性逐帧渲染 + 配音 + 词级硬字幕）。触发场景：要做科普/讲解/教学/知识/产品类视频、「讲一下 X 做成视频」、要挑某种视觉风格（极简/数据/赛博/电影感/品牌）出片、要出抖音封面/竖版封面/9:16 封面、要用 html-video 那种模板化画面但更稳的音画同步、anything2explainer 换 HTML 渲染，或提到 html-explainer / HTML 讲解视频 / explainer video / MG 视频。内置 23 个模板风格（8 类）与 40+ 动作词汇的动效库，主题驱动模板编排；支持 4K60、快门运动模糊、多进程提速、断点续渲；流程含六个用户确认点（渲染通道是硬闸门）。独立可移植，不依赖 html-video / anything2explainer。

236 stars 29 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add OneMoh/html-explainer --skill html-explainer

Manual install

git clone --depth 1 https://github.com/OneMoh/html-explainer.git /tmp/html-explainer
mkdir -p ~/.claude/skills
cp -r /tmp/html-explainer/. ~/.claude/skills/html-explainer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# html-explainer

> **定位**：`anything2explainer` 的流程与音画同步 + `html-video` 的 **23 个模板风格库**，
> 渲染层独立实现。作者 **Moh**，MIT 许可（第三方声明见 `THIRD_PARTY_NOTICES.md`）。
>
> **零外部依赖**：不需要 Remotion/npm 工程，不需要 html-video 仓库/Studio/pnpm/agent 后端。
> 技能自带：GSAP（离线）、playwright-core、渲染器、TTS/字幕/时间轴/主题/QC/封面全套脚本。
> 对两个来源项目的引用**只存在于注释署名里**，运行时不读它们的任何文件。
> 风格库是**抄下来的设计规范文本**（`references/style-catalog.md`），来源 `html-video`（Apache-2.0），
> 类比：把菜谱抄回家，之后做菜不需要原餐厅营业。

**v2.0 新增能力（全部可选、向下兼容；不用就是 v1.4 行为）**

| 能力 | 入口 | 文档 |
|---|---|---|
| **动效库**（40+ 动作词汇） | `assets/motion.js` → `window.HXM` | `references/motion-library.md` |
| **主题驱动模板编排**（挑风格 / 混用 / 动态开头） | `scripts/style_director.py` | `references/style-director.md` |
| **画质帧率档位 + 快门运动模糊 + 提速** | `scripts/render_video.mjs --profile/--quality/--fps/--shutter-only/--motion-hold` | `references/render-profiles.md` |
| **渲染基准测试**（优化前后对比） | `scripts/bench_render.py` | `references/render-profiles.md` |
| **宣传片范式**（去模板化：模板只吸纳配色/字体/时序三层） | 设计方法 | `references/showcase-mode.md` |
| **库全量演示编排**（统一舞台 + 节拍网格 + 标签常驻） | 设计方法 | `references/library-showcase.md` |
| **确认闸门**（六个确认点由用户拍板才放行） | `scripts/gate_check.py` | `SKILL.md` 流程第 3 步 |
| **★ 渲染通道确认**（渲染前必问：`png-fast` / `jpeg q95` / `png` / `jpeg q82`，**默认推荐 `png-fast`**，附速度与描述） | `consent.json` 的 `render_channel` + `gate_check.py --phase render` | `SKILL.md` 确认点 5 · `references/render-profiles.md` §0 |

把一个主题做成**原创**讲解视频：任意风格的 MG 画面（HTML/CSS/GSAP，1920×1080 或竖版）、
配音（edge-tts）、词级对齐硬字幕、全局进度条。一句话一个场景，画面节拍直接锚在

Read the full skill on GitHub

Details

Skill name: html-explainer
Repository: OneMoh/html-explainer
License: MIT
Repo updated: 14 October 2026

FAQ

What does the HTML Explainer skill do?

How do I install the HTML Explainer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add OneMoh/html-explainer --skill html-explainer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML Explainer popular?

It lives in OneMoh/html-explainer, which has 236 GitHub stars and 29 forks.

Related skills

Punk Ip Article Illustrations

230

adrianpunk/Punk-IP

Punk 出品的完整个人 IP 插图工作流：先在复古彩色扁平 3D 与松散线描水彩之间选择画风，再从人物照片创建、确认并持久化角色，或启用内置 Punk；随后读取文章、Markdown、网页、帖子或观点，生成统一角色的小剧场正文插图。适用于创建个人 IP、角色设定卡、切换角色或画风、长文自动配图、流程拆解图和核心动作图。

Images, Video & Audio27

Book Sales Video

234

Kianzzz/book-sales-video

从书名或飞书多维表格中的成稿文案出发，结合微信读书资料与公开点评创作图书带货/书评短视频，并用豆包 TTS、Pexels、Codex 生图和本机 OpenChatCut 完成配音、配图、双语字幕、音效、动效、BGM、可编辑初稿与按需导出。用户提出“根据一本书做带货视频”“读取飞书文案制作图书视频”“写书评口播并自动剪成抖音视频”“仿参考样式做图书推荐短视频”时使用；仅查书、仅写普通书评或无关剪辑不触发。

Images, Video & Audio45

Code Video Showcase

239

Moessif/code-video-showcase

用纯代码（HTML/Canvas/SVG/Three.js 逐帧渲染 + Python numpy/scipy 合成配乐 + FFmpeg 合成）制作 30–90 秒卡点风格展示视频的完整技能。适用于：复刻/仿制《Opus 5.5 视频风格展示》、DeepSeek V4.1-Flash 61s 风格样片、多风格切换卡点视频、纯代码视频、程序化视频、 HTML/Canvas/Three.js 视频、逐帧渲染 + 节拍同步、风格展示短片；要求不使用任何视频/图像/音乐生成模型。包含：调用前置需求采集与主题选择、8 套主题配色 × 8 种材质、剪辑结构公式、11 种风格配方、大字卡系统、120BPM 配乐合成、Playwright 渲染管线、质检清单与可运行模板。当用户提到「卡点视频」「风格展示视频」「纯代码做视频」「类似 Opus 5.5 / DeepSeek 风格展示」「逐帧渲染」「用代码做视频」「HTML Canvas 视频」「程序化视频」「主题配色」「换配色」「配色主题」时必须触发。

Images, Video & Audio16

Cinematic Director

300

wuwangzhang1216/DirectorSKILL

Acts as a director and previs supervisor for film, video, and AI filmmaking. Turns scripts, prose, briefs, or existing image and video assets into production deliverables — subtext breakdown, beat sheet, director's book, blocking and staging, shot list with coverage, keyframe and storyboard prompts, image-to-video motion prompts, sound and dialogue plans, edit timelines, continuity bibles, and QC repair notes. Carries genre playbooks, a controlled prompt lexicon, a coded failure-diagnosis manual, and capability-first adapters for current video and image models. Optionally applies one named dir

Images, Video & Audio45

Yt Dlp Downloader

213

MapleShaw/yt-dlp-downloader-skill

Download videos from YouTube, Bilibili, Twitter, and thousands of other sites using yt-dlp. Use when the user provides a video URL and wants to download it, extract audio (MP3), download subtitles, or select video quality. Triggers on phrases like "下载视频", "download video", "yt-dlp", "YouTube", "B站", "抖音", "提取音频", "extract audio".

Images, Video & Audio30

Muapi Director

303

Anil-matcha/vox-ai-motion-graphics-generator

Turn ONE topic, talking-head video, or photo into a finished Vox-style paper-collage explainer / ad video on the MuAPI platform (api.muapi.ai) + local ffmpeg — script, collage keyframes, motion, voice-over, music, captions, all automated. Three input modalities: a topic (B-roll), a talking-head video (A-roll mode), or a single photo of a person/product anchored into the collage (C-roll mode).

Images, Video & Audio53

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.