OneMoh

HTML Explainer — AI skill for Claude Code

AI community

把一个主题做成有配音、字幕、封面的讲解分析类视频 —— 全本地、用 HTML 写画面，稳定音画同步.

How to install HTML Explainer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open OneMoh/html-explainer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What HTML Explainer does

把一个主题做成有配音、字幕、封面的讲解分析类视频 —— 全本地、用 HTML 写画面，稳定音画同步。面向 AI 编程智能体的确定性 HTML → MP4 渲染流水线。

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Guizang Ppt Skill — AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts 24.9k ★
Architecture Diagram Generator — Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files 7k ★

README

html-explainer

**一个 Agent Skill：给任意主题，产出一条带配音、硬字幕、封面的讲解视频。**

HTML 写画面 → 确定性逐帧渲染 → 真 MP4。全本地跑，核心链路零 API key、零按次计费。

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![Version](https://img.shields.io/badge/version-1.2.2-blue.svg)](CHANGELOG.md) [![Agent Skill](https://img.shields.io/badge/Agent%20Skill-SKILL.md-8A2BE2.svg)](SKILL.md) [![Claude Code](https://img.shields.io/badge/Claude%20Code-%E2%9C%93-D97757.svg)](#安装) [![Codex](https://img.shields.io/badge/Codex-%E2%9C%93-000000.svg)](#安装) [![WorkBuddy](https://img.shields.io/badge/WorkBuddy-%E2%9C%93-1f6feb.svg)](#安装) [![Python](https://img.shields.io/badge/Python-3.9%2B-3776AB.svg?logo=python&logoColor=white)](#环境要求) [![Node](https://img.shields.io/badge/Node-18%2B-339933.svg?logo=node.js&logoColor=white)](#环境要求)

[简体中文](README.md) · [English](README.en.md)

三条用本技能生成的成片——画面、配音、字幕、封面全部由流水线产出，无手工后期。封面等素材托管在[演示仓库](https://github.com/OneMoh/html-explainer-demos)，本仓库零体积。

https://github.com/user-attachments/assets/912e6c2d-831f-43dd-a39f-57b749bb417d

港股创新药 · 早盘	量化简史
https://github.com/user-attachments/assets/8007843c-088d-457c-8550-81ec912e0add	https://github.com/user-attachments/assets/28949988-449b-4c4e-8d0f-6706af6f64ee

**欢迎关注测试账号，实时观看视频数据**

抖音 · OnlyOneMoh	主页实况 · Moen	抖音 · Moen_xin

它是什么

`html-explainer` 把一个主题做成**带配音、带硬字幕、带进度条**的讲解视频，画面用 HTML/CSS/GSAP 写。

它**是一个 Agent Skill**（`SKILL.md` + `scripts/` + `references/`），遵循 [Agent Skills](https://code.claude.com/docs/en/skills) 约定，Claude Code / OpenAI Codex / WorkBuddy / Cu