Video Studio Skill
A Claude Code skill that records a product in the browser, composes a video with chapters and captions and masters the MP4 locally
- 373 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill opens real pages in a browser and writes files into `projects/`; if the product shows personal data or keys, they land in the frame.
- For narration and the avatar the scripts call your Orpheus endpoint and an SSH GPU host, and texts and recordings go there.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/video-studio-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill opens real pages in a browser and writes files into `projects/`; if the product shows personal data or keys, they land in the frame.
- For narration and the avatar the scripts call your Orpheus endpoint and an SSH GPU host, and texts and recordings go there.
This is third-party code. Review the repository files before installing.
What it does
Video Studio Skill is a working folder with the `/devrel-video` skill for Claude Code that turns a web product into a demo video. The skill reimplements nothing and drives existing tools: Playwright CLI records live actions on the page, HyperFrames composes a title card, a browser frame, chapter captions and a call to action, FFmpeg masters the file and checks the result. Work starts from a brief: `projects/<slug>/brief.yaml` holds the product URL, audience, main message, 2-4 beats, brand and duration. The skill extracts the brand from the page with `brand-extract.sh`, so the palette and fonts are real. The default output is a silent 16:9 video of 25-40 seconds, delivered as a master copy and a web copy with an ffprobe check, a contact sheet and a thumbnail. Extra layers are switched on by request: local music in six styles, narration with timing fitted to the voice, subtitles, your own presenter footage and terminal scenes. A safe first prompt: "Prepare a brief for a 25-second silent walkthrough and show the plan before capture."
Who it is for. Documentation authors and DevRel engineers who need product demo videos, and teams that refresh such videos after every release.
Good fit when
- After a release a web product demo has to be re-recorded, and the video used to take several evenings by hand.
- A catalog or dashboard must be shown in 30 seconds: open the list, filter, enter a card.
- The video must match the site brand, with the palette and fonts taken from the page itself.
- One video is needed with several voices or in several subtitle languages.
Not a fit when
- The product sits behind a login and personal data or keys would appear on screen: scenes are recorded from the real page.
- A vertical social cut is needed: the author lists such output profiles as roadmap.
- A video with a live presenter and complex editing: the skill assembles titles, scenes and a call to action and does not replace a video editor.
Example request
/devrel-video Prepare a 25-second silent walkthrough brief for the bundled Acme app: the workspace, a category filter, then a project. Reuse brands/acme and show the plan before capture.Limitations
A full video needs Node.js 22+, FFmpeg with ffprobe, Chromium and the Python dependencies of the helpers; without them the skill gets as far as a brief and a scene plan. Narration and the avatar rely on your own services: an `ORPHEUS_URL` endpoint with a token and an SSH host with a GPU and LatentSync. Clone the whole repository, because the skill uses the neighboring `brands` and `projects` folders and scripts. CI checks run offline and do not run capture or render, so those steps are verified by hand.
How to disable. Delete the cloned `skill-video-studio` folder or its `.claude/skills/devrel-video` directory; private settings live outside Git, wherever `DEVREL_VIDEO_ENV` points.
FAQ
How do I install Video Studio Skill in Claude Code?
Clone the whole repository and run `claude` inside it: `git clone https://github.com/aaitor/skill-video-studio.git`, then `cd skill-video-studio` and `claude`. The `devrel-video` skill lives in `.claude/skills` and is picked up automatically.
What does a finished MP4 need beyond the brief?
Node.js 22+, FFmpeg with ffprobe, Chromium and the Python dependencies of the helpers. Setup is described in the repository's `docs/installation.md`.
Does the skill narrate the video?
Not by default, the video is silent. Narration is switched on by request and calls your Orpheus endpoint; `leo`, `dan` and `zac` are male voices, `leah`, `tara`, `jess`, `mia` and `zoe` are female, and one `variant.sh` command swaps the voice.
Where do the brand colors and fonts come from?
The `brand-extract.sh` script pulls the palette, fonts and logo from the given URL and stores them in `brands/<name>/`. The skill must not invent a palette.
Are there ready examples?
Two: a walkthrough of the Acme test app with narration and English and Spanish subtitles, and a composition of terminal and browser scenes. Sources are in `projects/example-walkthrough` and `projects/example-cli-tour`.
Discussion
No questions or reviews yet.
Related
SkillsA Claude Code skill that builds a Remotion film of your product from its own components, tokens and logo, cut to music
The video-explainer skill turns a script into a vertical 9:16 explainer: narration, captions, Remotion and a pre-render review
A skill for Claude Code and Codex that builds cinematic product videos with Remotion from shot recipe cards, a ready template and audio assets
A set of SKILL.md skills for short-video and content production: topic, script, voice, avatar, editing, covers and motion graphics
Skills for faceless video channels: one topic becomes a video with voiceover, subtitles, covers and per-platform copy.
A skill that turns a topic into a narrated 4K video: research, script, local TTS, Remotion composition and an FFmpeg mix
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Video Studio Skill (this card) | no | 373 | |
| HyperFrames | no | 79,556 | a renderer of video from HTML, one step in this skill; on top come product capture, a brand taken from the page and file checks |
| Remotion Agent Skills | no | 6,431 | teaches an agent to write video in React; here the video is assembled from a brief using a recording of a live product |
README in short
The README shows a short session recording that prepares a brief, lists the features and links two full examples on YouTube. It then gives a settings table, the flow of brief, explore, brand, capture, compose and render, and links to the docs on installation, security and licensing.
README badge
Original 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).