Навыки hyperframes-cli
📦

hyperframes-cli

Безопасно

Рендеринг HTML-композиций в видео с помощью HyperFrames CLI

Преобразование видеокомпозиций на основе HTML в выходные файлы формата MP4 или WebM без ручного рендеринга. Автоматизация создания каркаса проекта, линтинга, визуальной проверки и финальной доставки для создателей контента и команд разработчиков.

Поддерживает: Claude Codex Code(CC)
🥉 74 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «hyperframes-cli». npx hyperframes doctor

Ожидаемый результат:

Checking environment...
✓ Chrome: installed
✓ FFmpeg: installed
✓ Node: v22.10.0
✓ Memory: 8GB available

Environment is ready for rendering.

Использование «hyperframes-cli». npx hyperframes lint ./my-project

Ожидаемый результат:

Linting composition...
✓ index.html: valid
✗ compositions/intro.html: missing data-composition-id
⚠ compositions/outro.html: overlapping tracks at 2.5s

1 error, 1 warning found.

Аудит безопасности

Безопасно
v1 • 4/27/2026

All 69 static findings are false positives. The external_command detections are markdown code examples showing CLI usage, not executable code. Network detections are localhost URLs for local development preview, which is expected. No cryptographic code or malicious patterns exist in this skill.

1
Просканировано файлов
151
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
50
Сообщество
100
Безопасность
91
Соответствие спецификации

Что вы можете построить

Автоматизация генерации видео в CI/CD пайплайнах

Используйте hyperframes render с флагом --non-interactive для генерации видео в рамках автоматизированных рабочих процессов без ручного вмешательства.

Создание маркетингового видеоконтента из шаблонов

Создайте проект на основе шаблона, такого как product-promo, настройте HTML-композицию, а затем выполните рендеринг в финальный MP4 для социальных сетей или рекламы.

Отладка и исправление проблем визуальной разметки в видеокомпозициях

Запустите hyperframes lint для выявления структурных ошибок, затем hyperframes inspect для идентификации переполнения текста и обрезки перед финальным рендерингом.

Попробуйте эти промпты

Создание нового видеопроекта
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Валидация и проверка композиции
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Рендеринг композиции в видео
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Предпросмотр и тестирование изменений в реальном времени
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.

Лучшие практики

  • Запускайте команды lint и inspect перед предпросмотром, чтобы выявлять структурные и визуальные проблемы на раннем этапе
  • Используйте флаг --docker для воспроизводимых побайтно идентичных рендеров в разных окружениях
  • Используйте качество черновика во время итераций и переключайтесь на высокое качество только для финальной доставки

Избегать

  • Не пропускайте шаги lint и inspect перед рендерингом — структурные ошибки могут привести к незаметным сбоям
  • Не используйте 60fps без необходимости — это удваивает время рендеринга при минимальном визуальном преимуществе
  • Не выполняйте рендеринг напрямую в финальный результат во время разработки — используйте качество черновика для экономии времени

Часто задаваемые вопросы

Каковы системные требования для HyperFrames CLI?
Необходимо установить Node.js версии 22 или выше и FFmpeg. Запустите npx hyperframes doctor для проверки вашего окружения.
Как выполнить рендеринг видео без окна предпросмотра?
Используйте npx hyperframes render с флагом --non-interactive в окружениях CI/CD или автоматизированных скриптах.
В чём разница между командами lint и inspect?
Линт проверяет структурные ошибки, такие как отсутствующие атрибуты и перекрывающиеся дорожки. Inspect запускает композицию в headless Chrome для обнаружения визуальных проблем, таких как переполнение текста.
Как обеспечить согласованность рендеров на разных машинах?
Используйте флаг --docker, который запускает рендеринг внутри Docker-контейнера с фиксированными версиями Chrome и FFmpeg.
Можно ли добавить звуковое озвучивание в видеокомпозицию?
Да, используйте npx hyperframes tts для генерации синтеза речи и npx hyperframes transcribe для импорта существующих аудио- или файлов субтитров.
Какие настройки качества следует использовать для финальной доставки?
Используйте --quality high --fps 30 для финальной доставки. Используйте --quality draft во время итераций для экономии времени.

Сведения для разработчиков

Автор

heygen-com

Лицензия

MIT

Ссылка

main

Структура файлов

📄 SKILL.md