Паветта
HyperFrames: скиллы HeyGen, чтобы агент делал видео из HTML
Набор HeyGen из 9 скиллов: агент делает видео из HTML — промо, объяснялки, клипы, титры, графики — проверяет кадры, показывает превью и рендерит MP4 через CLI HyperFrames.
Как установить HyperFrames
Личные скиллы лежат в ~/.claude/skills/, проектные — в .claude/skills/ репозитория. Проверка: команда /skills в сессии, вызов по имени — /hyperframes.
# плагином, внутри Claude Code
/plugin marketplace add heygen-com/hyperframes
/plugin install hyperframes@hyperframes
# или вручную
git clone --depth 1 https://github.com/heygen-com/hyperframes.git /tmp/hyperframes
# скопируйте нужные папки скиллов из /tmp/hyperframes/skills в ~/.claude/skills/
mkdir -p ~/.claude/skills
cp -r /tmp/hyperframes/skills/* ~/.claude/skills/Общая папка ~/.agents/skills/ (в проекте — .agents/skills/) читают Codex, Cursor, VS Code Copilot, Gemini CLI, Antigravity, OpenCode, Kilo Code, Goose, Qwen Code.
git clone --depth 1 https://github.com/heygen-com/hyperframes.git /tmp/hyperframes
mkdir -p ~/.agents/skills
cp -r /tmp/hyperframes/skills/* ~/.agents/skills/Установщик скиллов от Vercel, нужен Node.js 22.20 или новее. Без -g скилл ставится в текущий проект; флаг -a выбирает агента.
npx skills add heygen-com/hyperframes -a claude-code
# для всех проектов
npx skills add heygen-com/hyperframes -gНужен тариф Pro, Max, Team или Enterprise с включённым выполнением кода.
Скачайте папку скилла с GitHub и упакуйте её в ZIP.
claude.ai → Customize → Skills → + → Create skill → Upload a skill
Загрузите ZIP и включите скилл переключателем.Gemini CLI ставит скиллы из git-репозитория и хранит их в ~/.gemini/skills/.
gemini skills install https://github.com/heygen-com/hyperframes.git --consent
# проверка
gemini skills listЧто умеет
Скилл hyperframes агент читает первым: в нём контракт рендера из 12 правил, рабочий цикл и таблица, какой справочник открыть под тип видео.
Сцены — HTML-файлы с атрибутами data-start и data-duration; таймлайн стоит на паузе, рендер проматывает его кадр за кадром в headless Chrome и кодирует FFmpeg, поэтому один вход даёт одинаковое видео.
Все действия идут через npx hyperframes: init, check, snapshot, preview, render. Рендер агент запускает после вашего одобрения превью.
Каждый скилл при старте вызывает npx hyperframes events — отправляет имя скилла в телеметрию CLI с возможностью отказа.
Что входит в набор
hyperframesКонтракт рендера, рабочий цикл и справочники по типам видео; читается первым
hyperframes-cliКоманды CLI: создать проект, проверить кадры, править таймлайн, превью, рендер, история
hyperframes-registryОколо 450 готовых блоков: переходы, титры, кинетическая типографика, графики, карты, 3D
media-useМузыка, звуки, картинки, озвучка, аватары, транскрипты, цветокоррекция через HeyGen или локальные инструменты
reverse-any-videoПересобрать любой видеофайл в редактируемый проект HyperFrames; нужен Pro
style-samplingНовый эпизод в одном из пяти готовых стилей; нужен Pro
figmaАссеты, токены и кадры из Figma в видео
slideshowИнтерактивная презентация со слайдами и заметками докладчика
remotion-to-hyperframesПеренос проектов Remotion, Motion Canvas, Lottie, Three.js с покадровой сверкой
Что попросить агента
Ограничения
Скиллы шлют событие в телеметрию CLI при каждом запуске, при входе в аккаунт оно привязано к нему
reverse-any-video и style-sampling требуют HyperFrames Pro, облачный рендер — платный тариф
Без Node.js 22+ и FFmpeg CLI не запустится
Установка через npx skills add берёт копию из реестра skills.sh, которая может на часы отставать от main
Описание из SKILL.md
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
