К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

hyperframes-cli — скилл для Claude Code: что делает и как установить

Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add heygen-com/hyperframes --skill hyperframes-cli -a claude-code
Открыть на GitHub

Что делает hyperframes-cli

Скилл подключает агента к утилите npx hyperframes. Модель может развернуть заготовку проекта, запустить аудит через check --json и сохранить кадры в .hyperframes/artifacts/snapshots/ для визуальной оценки. Монтаж сцен автоматизирован: команды move, trim или пакетные JSON-файлы с планом правок меняют таймлайн без ручного переписывания исходников.

Для работы обязательно нужны Node.js 22+ и системный FFmpeg. Если безголовый Chrome не запускается, вызывается команда browser ensure. Рендеринг запускается локально с пресетами качества (draft или delivery), в Docker-контейнере либо на мощностях AWS Lambda и Cloud Run.

Ставить скилл имеет смысл разработчикам, которые собирают видео из кода на HyperFrames и хотят поручить агенту проверку контраста и сборку роликов. Если в проекте нет работы с HyperFrames, пользы от него ноль.

Какие задачи решает

  • Проверить контраст и вёрстку видео через check --json перед сборкой
  • Отредактировать клипы на таймлайне командами сдвига и обрезки
  • Сделать PNG-снапшоты сцен для визуальной проверки агентом
  • Запустить рендер готового ролика локально или в Docker

Примеры запросов агенту

  • Проверь таймлайн проекта hyperframes и покажи список клипов
  • Сделай снапшоты сцен и проверь контраст композиции
  • Отрендери финальное видео с качеством delivery в файл out.mp4

Как установить hyperframes-cli

1Через Skills CLI (Vercel)

npx skills add heygen-com/hyperframes --skill hyperframes-cli -a claude-code

2Вручную: положить файлы

~/.claude/skills/hyperframes-cli/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/hyperframes-cli/

Из того же набора7

Весь набор →
hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. Claude Code CX Codex Cursor +1 1 200 000установок media-use heygen-com Находит и генерирует ассеты для видео в HyperFrames — музыку, дикторский голос, аватары и эффекты. Сохраняет всё локально в assets. Claude Code CX Codex Cursor +1 1 100 000установок hyperframes-registry heygen-com Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля. Claude Code CX Codex Cursor +1 1 000 000установок remotion-to-hyperframes heygen-com Конвертирует код Remotion или видеофутажи в HyperFrames с покадровой проверкой оригинала через SSIM. Claude Code CX Codex Cursor +1 504 900установок slideshow heygen-com Собирает интерактивные презентации HyperFrames со слайдами, фрагментами, переходами и заметками докладчика. Подходит для живого показа, а не рендера в видео. Claude Code CX Codex Cursor +1 415 500установок figma heygen-com Импортирует ассеты, токены бренда и компоненты из Figma в проект HyperFrames и собирает из кадров анимацию. Пригодится, когда нужно оживить макет, а не вставлять статичные картинки. Claude Code CX Codex Cursor +1 329 500установок

Похожие

grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. Claude Code 850 344установок brainstorming Jesse Vincent Скилл помогает прояснить задачу до начала работы: задаёт вопросы, изучает контекст и предлагает варианты решения. Нужен для новых функций и другой творческой работы. Claude Code CX Codex 404 045установок ui-ux-pro-max nextlevelbuilder Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность. Claude Code CX Codex Cursor +1 413 800установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о hyperframes-cli

Как установить hyperframes-cli в Claude Code?

Выполните npx skills add heygen-com/hyperframes --skill hyperframes-cli -a claude-code либо поместите манифест в ~/.claude/skills/hyperframes-cli/SKILL.md.

Что делает hyperframes-cli?

Даёт агенту команды для монтажа таймлайна, проверки кадров, генерации снапшотов и рендеринга видео в проектах на HyperFrames.

Что нужно установить для работы hyperframes-cli?

В системе должны быть установлены Node.js 22+ и FFmpeg. Если браузер для снимков отсутствует, выполните npx hyperframes browser ensure.

Исходный текст

SKILL.md · Apache-2.0
---
name: hyperframes-cli
description: The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
---

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# HyperFrames CLI

Run `npx hyperframes <command>` unless the project gives a wrapper; then use the wrapper. It needs Node.js 22+ and FFmpeg. Every command has `--help`; most take `--json`, and a failure prints `✗ …`, a `Fix:` line and exits non-zero.

## Commands by job

| Job | Commands |
| --- | --- |
| Start | `init <dir>` (blank; `--example <name>` only when asked), `capture <url>` |
| Read a project | `info`, `compositions`, `timeline --json`, `docs <topic>` |
| Check it | `lint` while writing; `check --json` as the gate (lint, runtime, layout, contrast) |
| Look at it | `snapshot` (`--at <t,…>`, `--range START,END`, `--composition <id>`, `--zoom`, `--angle`, `--against <video>`), `keyframes`, `compare`, `audio` |
| Edit the timeline | `timeline` with `move`, `trim`, `split`, `set`, `duplicate`, `delete`, `apply`, `undo`, `ids` |
| Reuse | `catalog`, `add` (`/hyperframes-registry`) |
| Media and sound | `media-treatment`, `grade-compare`, `remove-background`, `tts`, `transcribe`, `beats`, `normalize-audio` (`/media-use`) |
| Show and ship | `preview`, `present` (`/slideshow`), `render`, `publish`, `cloud`, `lambda`, `cloudrun` |
| Desktop app | `open`, `catch-up` |
| Upkeep | `doctor`, `browser`, `upgrade`, `skills`, `usage`, `clean`, `feedback` |

`validate`, `inspect` and `layout` are deprecated aliases of `check`; `events` is telemetry for skills' own scripts. Don't run them.

## The loop

1. Write, then `npx hyperframes lint` after the first pass and after structural changes.
2. `npx hyperframes check --json` and fix every error. While a lint error remains the layout and contrast audits don't run; "0 samples" means nothing was checked. Contrast failures carry a `suggestedColor`. A finding at a single sample (an entrance in flight) is info; a 3 s+ video with no visible change fails `sweep_static`.
3. `npx hyperframes snapshot` and read the PNGs (under `.hyperframes/artifacts/snapshots/`): that is how you see the video. With sub-compositions, snapshot a midpoint of every scene; tiny unstyled content or a missing hero is a mount defect (`../hyperframes/references/format.md`).
4. `npx hyperframes preview --background`, check the URL answers 200, give the person the project URL and wait, unless they asked for the file or for no stops. Passing checks alone is not a reason to render.
5. When it is time to render (step 4): `npx hyperframes render --quality looks --output out.mp4` (`draft` while iterating, `delivery` for the final). Confirm the file is non-empty and its `ffprobe` duration matches the root `data-duration`, then look at decoded frames.

"This element" or the current selection: `npx hyperframes preview --context --json --context-fields selection`; `no-selection` means ask them to click it.

## Edit the timeline

These are the edits Studio itself makes, so the result stays in Studio's shape.

- `timeline --json` lists clips with absolute `absStart`/`absEnd`, owning `file` and the `#id` ref the edit commands take (`timeline ids` stamps missing ids).
- `timeline move|trim|split|set|duplicate|delete <ref> … --plan --json` previews one edit; run it again without `--plan`. `--start`, `--end`, `--duration` set one edge or the length.
- An edit is refused when the clip would overlap a neighbour (`--overwrite`, or move the neighbour first) or end past its composition: raise the root's `data-duration` first. No command changes `data-duration`.
- Several edits at once: a JSON file such as `[{"verb": "move", "ref": "#outro", "time": "9"}]`, then `timeline apply plan.json --json`. Each run prints a `receipt`; save it and `timeline undo receipt.json` reverts it.

<!-- history (trial): remove this block together with the command -->

## Project history

Every write is kept and can be undone. At the start of a turn, `npx hyperframes history begin --who <you> --label "<plan>"`, then `history --since mine --who <you>` to see what the person changed; build on their edits. A check failed or they say it got worse: `history undo --who <you>`, never hand-edit back. End the turn with `history end`.

<!-- /history (trial) -->

## Render where

| Need | Command |
| --- | --- |
| Local | `render --quality looks --output out.mp4` (`draft`, `delivery`) |
| Reproducible container | `render --docker --strict --output out.mp4` |
| Batch from variables | `render --batch rows.json --output "renders/{name}.mp4"` |
| Hosted, no local Chrome or FFmpeg | `cloud render` (`references/cloud.md`) |
| Your own AWS or GCP | `lambda render`, `cloudrun render` (`references/lambda.md`, `references/cloudrun.md`) |

A 30 s film renders in a minute or two: run it in the foreground. Detach only a render longer than your tool's timeout (`HYPERFRAMES_RENDER_DETACHED=1`, its own group, output to a log) and wait with `until grep -qE 'Render (complete|failed)' render.log; do sleep 5; done`, never `pgrep -f`, which matches its own loop and waits until the tool times out.

After a verified render, send one `feedback --rating`, plus a report for anything the person asked for that HyperFrames can't do, unless telemetry is off: `references/feedback.md`.

## When a command fails

| Symptom | Fix |
| --- | --- |
| Chrome missing or won't start | `npx hyperframes browser ensure`; `doctor --json` always exits 0, gate on `.ok` |
| A heavy page isn't ready in time | Raise `--timeout` on `check` or `snapshot` |
| Unusual codec looks blank | Keep `--proxy` on (the default) |
| Render slow on Linux | The summary's second line says `screenshot` + `software gpu`: the slow path |
| `capture` fails or writes `BLOCKED.md` | Take nothing from its partial files; retry into a new `-o` folder |
| Disk tight | `clean --dry-run`, then `clean`; never delete `.hyperframes` (it holds history) |

## References

Read the row before running its command.

| Commands | Read |
| --- | --- |
| `init`, `capture`, `skills` | `references/init-and-scaffold.md` |
| `lint`, `check`, motion sidecars, `snapshot` | `references/lint-validate-inspect.md` |
| `compare`, `grade-compare`, `render --batch` | `references/compare-and-batch.md` |
| `beats` | `references/beats.md` |
| `preview`, `play`, `render`, `publish`, Studio context | `references/preview-render.md` |
| `doctor`, `browser` | `references/doctor-browser.md` |
| `auth`, `cloud`, template variables | `references/cloud.md` |
| `lambda`, `cloudrun` | `references/lambda.md`, `references/cloudrun.md` |
| `info`, `upgrade`, `compositions`, `timeline`, `docs`, `usage`, telemetry | `references/upgrade-info-misc.md` |
| `--strict` flags, run ids, `clean`, shader lint, JSON paths | `references/conventions.md` |
| `keyframes` | `../hyperframes/references/motion.md` (Seeing motion) |

© heygen-com · Apache-2.0 · heygen-com/hyperframes

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой