Video Studio Skill
Скилл для Claude Code: снимает продукт в браузере, собирает ролик с главами и титрами и мастерит MP4 локально
- 373 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл открывает реальные страницы в браузере и пишет файлы в папку `projects/`; если продукт показывает личные данные или ключи, они попадут в кадр.
- Для озвучки и аватара скрипты ходят на ваш эндпоинт Orpheus и по SSH на GPU-хост, куда уходят тексты и записи.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/video-studio-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл открывает реальные страницы в браузере и пишет файлы в папку `projects/`; если продукт показывает личные данные или ключи, они попадут в кадр.
- Для озвучки и аватара скрипты ходят на ваш эндпоинт Orpheus и по SSH на GPU-хост, куда уходят тексты и записи.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Video Studio Skill — рабочая папка со скиллом `/devrel-video` для Claude Code, которая превращает веб-продукт в демо-ролик. Скилл работает как оркестратор готовых инструментов: Playwright CLI записывает живые действия на странице, HyperFrames собирает титульный кадр, рамку браузера, плашки глав и призыв к действию, FFmpeg мастерит файл и проверяет результат. Работа идет от брифа: в `projects/<slug>/brief.yaml` записывают адрес продукта, аудиторию, главную мысль, 2–4 сцены, бренд и длительность. Бренд скилл снимает со страницы скриптом `brand-extract.sh`, поэтому палитра и шрифты настоящие. По умолчанию выходит немой ролик 16:9 на 25–40 секунд. На выходе мастер-копия и веб-копия, проверка через ffprobe, контактный лист и обложка. Дополнительные слои включаются по запросу: локальная музыка в шести стилях, озвучка с подгонкой времени под голос, субтитры, ваши собственные кадры ведущего и сцены из терминала. Для проверки стоит начать с промпта: «Подготовь бриф на немой ролик в 25 секунд и покажи план до съемки».
Для кого. Авторам документации и DevRel-инженерам, которым нужны демо-ролики по продукту, и командам, обновляющим такие ролики после каждого релиза.
Подходит, если
- После релиза надо переснять демо веб-продукта, а ролик собирался вручную несколько вечеров.
- Каталог или кабинет нужно показать за 30 секунд: открыть список, отфильтровать, зайти в карточку.
- Ролик должен совпадать с брендом сайта, и палитру с шрифтами снимают с самой страницы.
- Один ролик нужен с разными голосами или в нескольких языках субтитров.
Не подходит, если
- Продукт закрыт логином, а на экране окажутся персональные данные или ключи: сцены записываются с реальной страницы.
- Нужна вертикальная версия для соцсетей: такие профили вывода автор оставил в планах.
- Ролик с живым ведущим и сложным монтажом: скилл собирает схему из титулов, сцен и призыва и не заменяет видеоредактор.
Пример запроса к агенту
/devrel-video Подготовь бриф на немой ролик в 25 секунд для тестового приложения Acme: рабочее пространство, фильтр по категории, карточка проекта. Бренд возьми из brands/acme и покажи план до съемки.Ограничения
Полный ролик собирается при Node.js 22 или новее, FFmpeg с ffprobe, Chromium и Python-зависимостях помощников; без них скилл доходит до брифа и плана сцен. Озвучка и аватар опираются на ваши сервисы: эндпоинт `ORPHEUS_URL` с токеном и SSH-хост с GPU и LatentSync. Клонировать нужно весь репозиторий, потому что скилл использует папки `brands`, `projects` и скрипты рядом. Проверки в CI офлайн и не прогоняют съемку и рендер, эти шаги проверяют вручную.
Как отключить. Удалите склонированную папку `skill-video-studio` или каталог `.claude/skills/devrel-video` из нее; настройки вне Git лежат там, куда указывает `DEVREL_VIDEO_ENV`.
Частые вопросы
Как поставить Video Studio Skill в Claude Code?
Клонируйте репозиторий целиком и запустите `claude` внутри него: `git clone https://github.com/aaitor/skill-video-studio.git`, затем `cd skill-video-studio` и `claude`. Скилл `devrel-video` лежит в `.claude/skills` и подхватывается сам.
Что нужно, чтобы получить готовый MP4, а не только бриф?
Node.js 22 или новее, FFmpeg с ffprobe, Chromium и Python-зависимости помощников. Установка описана в `docs/installation.md` репозитория.
Скилл озвучивает ролик?
По умолчанию нет, ролик выходит немым. Озвучка включается запросом и ходит на ваш эндпоинт Orpheus; голоса `leo`, `dan`, `zac` мужские, `leah`, `tara`, `jess`, `mia`, `zoe` женские, голос меняется одной командой `variant.sh`.
Откуда скилл берет цвета и шрифты бренда?
Скрипт `brand-extract.sh` снимает палитру, шрифты и логотип с указанного адреса и сохраняет их в `brands/<имя>/`. Выдумывать палитру скилл не должен.
Есть ли готовые примеры?
Да, два: показ тестового приложения Acme с озвучкой и субтитрами на английском и испанском, и композиция из сцен терминала и браузера. Исходники лежат в `projects/example-walkthrough` и `projects/example-cli-tour`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для Claude Code делает на Remotion ролик о вашем продукте из его компонентов, токенов дизайна и логотипа, с музыкой в такт
Скилл video-explainer собирает вертикальный ролик 9:16 из сценария: озвучка, субтитры, Remotion и проверка перед рендером
Скилл для Claude Code и Codex: делает кинематографичные продуктовые видео на Remotion из карточек-рецептов кадров, готового шаблона и аудиоресурсов
Набор скиллов формата SKILL.md для производства коротких видео и контента: тема, сценарий, голос, аватар, монтаж, обложки и motion-графика
Скиллы для видеоканалов без лица: из одной темы выходит ролик с озвучкой, субтитрами, обложками и текстами для площадок.
Скилл собирает из темы озвученное видео в 4K: исследование, сценарий, локальный TTS, монтаж на Remotion и сведение в FFmpeg
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Video Studio Skill (эта карточка) | нет | 373 | |
| HyperFrames | нет | 79 556 | рендерер видео из HTML, в этом скилле он один из шагов; сверху добавлены съемка продукта, бренд из страницы и проверка файла |
| Скиллы Remotion | нет | 6 431 | учит агента писать видео на React; здесь видео собирается по брифу из записи живого продукта |
Коротко о README
README показывает короткую запись сеанса с подготовкой брифа, перечисляет возможности и два полных примера на YouTube. Дальше идут таблица настроек, схема «бриф, разведка, бренд, съемка, сборка, рендер» и ссылки на документацию по установке, безопасности и лицензиям.
Бейдж для README
Исходный SKILL.md
---
name: devrel-video
description: Produce a silent DevRel-style product walkthrough video from a web URL. Playwright records the live flow, HyperFrames composes title/frame/chapters/CTA, FFmpeg masters. Use when asked to record, make, or update a product demo, feature walkthrough, catalog tour, or promo video from a web product.
---
# DevRel Video Studio — `/devrel-video`
A **thin orchestrator**. It does not reimplement capture or composition — it drives:
- **playwright-cli** (`page.screencast`) for live interaction capture,
- **HyperFrames** for composition + deterministic MP4 render,
- **FFmpeg / ffprobe** for convert, master, and QA.
Read `references/production-notes.md` first for environment gotchas (sandbox flags, `init` flags, CDN vendoring, determinism) and the production steps for **music, narration, avatar, subtitles, and multi-environment (terminal ⇄ browser)** (all supported — steps 5.4–5.8; the template and manifest carry seams for each).
For studio installation and prerequisites, see the repository-root `docs/installation.md`. The quick repository demo in `examples/README.md` demonstrates intake only; use the production workflow below for actual videos.
## When to use
- "record / make / produce a walkthrough, demo, catalog tour, or promo of `<web product / URL>`"
- "update / re-render an existing devrel-video project"
## Inputs — gather, never guess
- **URL** (+ start command if the product is local).
- **Flow**: the 2–4 beats to show (e.g. browse → filter → open a detail).
- **Brand**: reuse `brands/<name>/`, or extract from the URL (step 3).
- **Output**: format(s) + duration target. Default: **silent 16:9, ~25–40 s**.
- **Environments (optional)** — a demo can switch between the **browser** and **Claude Code (terminal)**. Name the order in the prompt ("prompt in Claude Code → the catalog in the browser → back to Claude Code") → `environments:` in `brief.yaml`. Terminal beats are captured with VHS (step 5.8); a pure-browser video is the default.
- **Audio / avatar (optional, all prompt-selectable)** — set any of these straight from the prompt, and write them into `brief.yaml`:
- **voice**: the narration voice — male `leo`/`dan`/`zac`, female `leah`/`tara`/`jess`/`mia`/`zoe` (**match the presenter**; offer samples if unsure). "…narrated with voice `dan`" → `narration: dan`. Regenerating with a different voice makes a new variant (see 5.4).
- **music** on/off, **subtitles** languages, **avatar** at intro/CTA (+ its private `avatar_plate` path).
- **Approved claims**: numbers/names allowed on screen — pull from the captured page, never invent (guide §7/§8).
## Workflow
### 1 · Intake → `projects/<slug>/brief.yaml`
Copy `templates/brief.example.yaml`. Confirm the audience, the one message, the CTA, and the beats.
### 2 · Explore (before recording)
Open the URL headless; snapshot + screenshot. Confirm: no login wall, **no PII / keys / wallets on screen**, and stable selectors for each beat. Prefer exact `a[href="…"]` and `getByRole` locators; always add a fallback selector so one missing element can't abort the capture.
### 3 · Brand → `brands/<name>/`
`scripts/brand-extract.sh <url> <name>` → `tokens.json` (real palette + fonts) + `logo.svg`. Use these in the composition. **Never invent a palette.** Reuse an existing `brands/<name>/` if you already have one for the product (`brands/acme/` is the default placeholder brand).