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

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

Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля.

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

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

Скилл помогает искать готовые элементы HyperFrames через CLI-команду npx hyperframes catalog и ставить их командой add. Элементы попадают в проект как обычный исходный код: блоки сохраняются в папку compositions/, а компоненты — в compositions/components/. Любой импортированный файл можно сразу править под свой проект.

Каталог содержит переходы, плашки, кинетическую типографику и графики данных. Поиск по умолчанию работает локально по точным словам и не отправляет данные во внешнюю сеть. Для смыслового поиска доступен режим --on-device, требующий разовой загрузки локальной модели весом около 33 МБ.

Искать элементы в каталоге можно офлайн по сохраненному манифесту, но для npx hyperframes add обязательно нужен доступ в сеть. Если вы собираете видео на HyperFrames, этот скилл избавит от ручной сборки стандартных сцен. Без HyperFrames в проекте ставить его нет смысла.

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

  • найти готовый оверлей или шейдер по описанию задачи
  • добавить блок титров или график прямо в папку compositions/
  • связать переменные блока через атрибут data-variable-values
  • синхронизировать анимацию с ритмом аудио через команду beats

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

  • Найди в каталоге hyperframes блок с графиком кода
  • Установи компонент camera-shake через hyperframes add
  • Покажи готовые оверлеи с таймкодом для hyperframes

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

1Через Skills CLI (Vercel)

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

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

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

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

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

Весь набор →
hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. Claude Code CX Codex Cursor +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами 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установок 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установок frost-sequence-camera-orbit heygen-com Скилл собирает 22.5-секундную сцену: камера облетает ледяной логотип, он рассыпается, собирается в два текста и растворяется. Claude Code CX Codex Cursor +1 9 800установок orbit-card heygen-com Скилл для встраивания готового 10-секундного 3D-блока HyperFrames: карточка фичи облетает сферу из точек по траектории камеры из Blender. Claude Code CX Codex Cursor +1 9 800установок

Похожие

webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. Claude Code Claude.ai 186 758установок ui-ux-pro-max nextlevelbuilder Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность. Claude Code CX Codex Cursor +1 413 800установок impeccable pbakaus Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна. Claude Code CX Codex Cursor +1 359 200установок web-artifacts-builder официальный anthropics Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. Подходит для интерфейсов с состоянием и маршрутизацией. Claude Code Claude.ai 112 122установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о hyperframes-registry

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

Выполните команду npx skills add heygen-com/hyperframes --skill hyperframes-registry -a claude-code. Файл навыка запишется в настройки агента.

Зачем нужен скилл hyperframes-registry?

Он позволяет ассистенту находить и встраивать готовые сцены HyperFrames вместо того, чтобы писать анимации и HTML-разметку с нуля.

Нужен ли интернет для поиска компонентов?

Поиск catalog работает офлайн по кешированному манифесту, но команда add требует интернет для скачивания исходников.

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

SKILL.md · Apache-2.0
---
name: hyperframes-registry
description: About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
---

**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 registry

Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.

## Find and install

```bash
npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json        # prints the written files and the mount snippet
```

- Query in English even when the video is not: the catalog is indexed in English, and another script returns `No searchable words in query`, which is not a gap.
- Search is local and sends nothing. The default `words` tier only finds items that reuse your words; `--on-device` ranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The `--json` envelope names the tier that answered.
- Narrow with `--type block|component` and `--tag <tag>`. `add <tag>` installs every block with that tag; dependencies install first. `add` needs the network even for an item installed before; search works offline from the cached manifest.
- Nothing fits: report it before you hand-build, on either tier. `catalog --query` prints the line pre-filled (`report_gap` in `--json`): `npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>`. Describe the effect, not an item name you imagined.

Tiers, `dropped` and `unindexed`, stale indexes, offline behaviour: `references/search.md`.

## What's in it

| Blocks: a scene with its own timeline | Examples |
| --- | --- |
| Transitions | `beat-freeze-cut`, `chromatic-radial-split`, `cinematic-zoom` |
| Overlays and lower thirds | `camcorder-hud`, `editorial-flash-overlay`, `lt-clean-bar` |
| Title cards and kinetic type | `canopy-part-title`, `code-slice-hero` |
| Social, chat and UI cards | `ai-chat-reveal`, `chatgpt-exchange` |
| Code, charts, data and maps | `code-diff`, `bar-chart-race`, `data-chart` |
| 3D, shader and backgrounds | `app-showcase`, `aurora`, `blob` |

| Components: a snippet merged into your scene | Examples |
| --- | --- |
| Motion primitives and text effects | `agent-cursor`, `blur-in`, `bottom-up-letters` |
| Caption styles | `caption-clip-wipe`, `caption-editorial-emphasis` |
| Camera moves | `camera-shake`, `camera-scan-gate` |
| Product demo and UI props | `before-after-wipe`, `browser-device-stage` |
| Textures, particles and effects | `ascii-render-pass`, `grain-overlay` |

## Wiring

- **Block**: installs to `compositions/<name>.html`. Mount it with `data-composition-src`, `data-composition-id` matching the block's own id, `data-start` and the `data-duration` you need; the snippet `add` prints is the starting point. `references/wiring-blocks.md`.
- **Component**: installs to `compositions/components/<name>.html`. Copy its markup, `<style>` and script into your scene, and follow its comment block if it hooks into your timeline. `references/wiring-components.md`.
- Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
- An item keeps its own variables; set them for one mount with `data-variable-values` on its host (`add --vars '{"title":"…"}'` writes that), and point its colour and font variables at your brand's.
- Beat-synced blocks take hit times from `npx hyperframes beats --json`: the beat times minus the mount's `data-start`.
- Install paths come from `hyperframes.json` (`references/install-locations.md`).

## Contributing

Authoring a new block or component for an upstream PR: `references/contributing.md`, starter templates in `references/templates.md`, quality bar in `references/component-quality-bar.md`.

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

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

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

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