html-explainer — скилл
html-explainer превращает тему в видео с озвучкой, субтитрами и обложкой: кадры пишутся на HTML и рендерятся в MP4 локально.
- 297 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл ставит зависимости и скачивает Chromium при отсутствии браузера.
- Текст озвучки уходит в сетевой сервис `edge-tts`.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/html-explainerОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл ставит зависимости и скачивает Chromium при отсутствии браузера.
- Текст озвучки уходит в сетевой сервис `edge-tts`.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
html-explainer — скилл, который проводит агента по всему пути от темы до готового объясняющего ролика: поиск материала, текст диктора, озвучка, субтитры с таймингом, раскадровка, рендер, проверка и обложка. Видео-модель не нужна. Кадры агент пишет на HTML, CSS и GSAP, а браузер рисует их покадрово, поэтому текст на экране всегда четкий. Рендер идет в MP4 до 4K60 с размытием движения и несколькими процессами. Озвучка использует бесплатный `edge-tts`, основная цепочка работает без ключей и платы за запрос. Для ролика на две минуты автор называет около 30 минут при быстром сценарии.
Для кого. Авторам и редакторам каналов, которым нужны объясняющие ролики из текста и данных без монтажа и без платных видеомоделей.
Подходит, если
- Тему надо упаковать в минутный ролик с голосом и субтитрами.
- Цифры на экране должны оставаться читаемыми: в генерации видео текст часто плывет.
- Кадры хочется хранить как файлы и править через diff.
- Нужны обложки в форматах 16:9 и 3:4 к тому же ролику.
Не подходит, если
- Нужны реалистичные съемки людей и природы: скилл рисует графику, а не снимает кино.
- Среди инструментов нет Chrome или Edge, ffmpeg и Node.js.
- Требуется ролик за пару минут: полный путь занимает около получаса.
Пример запроса к агенту
Сделай минутный ролик о том, почему небо голубое: текст, озвучка, субтитры, обложка 16:9.Ограничения
Нужны Python 3.9 или новее, Node.js 18, Chrome или Edge и ffmpeg. Если браузера нет, скилл скачает Chromium примерно на 115 МБ. Озвучка через `edge-tts` ходит в сетевой сервис, поэтому текст диктора уходит наружу. Рендер в 4K60 стоит в несколько раз дороже 1080p. Документация в основном на китайском, с английской версией README. На Windows скрипты запускают из Git Bash, а путь к проекту держат из ASCII.
Как отключить. Удалите папку скилла из каталога агента. Созданные ролики и временные кадры лежат в проекте, их удалите отдельно.
Частые вопросы
Нужен ли ключ API?
Для основной цепочки нет: озвучка идет через бесплатный `edge-tts`, рендер локальный. Дополнительный голос от Volcano Engine подключается отдельно.
Как поставить скилл?
Дайте агенту ссылку на репозиторий и попросите поставить в каталог скиллов с проверкой окружения. Либо клонируйте репозиторий сами и запустите `setup_env.sh --install`.
Какие агенты поддерживаются?
Скилл следует формату Agent Skills, его загружают Claude Code, OpenAI Codex, Cursor и Gemini CLI.
Сколько занимает рендер?
Автор приводит около 16 кадров в секунду для 1080p30. Ролик из 3600 кадров рендерится примерно за четыре минуты.
Что на выходе?
Файл MP4 с озвучкой и жесткими субтитрами, а также обложки в двух пропорциях.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл и CLI: агент пишет сценарий и сцены, а голос, тайминг слов и рендер в MP4 работают на вашем компьютере без ключей API
Скилл превращает HTML и Canvas-анимацию в MP4, GIF или прозрачный слой: кадры снимает браузер, видео собирает ffmpeg.
Explainer Video превращает текст, ссылку или документ в озвученное рисованное видео прямо из Codex или Claude Code
Скилл для Claude Code и Codex: по одной фразе делает рекламный ролик продукта, пишет музыку и правит кадр по клику
CLI для программного создания видео из HTML: агент собирает кадры по шаблонам и рендерит готовый MP4 на вашем компьютере
Скилл для видео-разборов: из одной темы агент делает исследование, текст по экранам и проект HyperFrames с рендером в MP4
Коротко о README
README рассказывает, чем подход отличается от текст-в-видео моделей, какие этапы занимают время, как установить скилл и что нужно от окружения. Описание китайское, есть README.en.md.