Video Studio Skill: a Claude Code skill that films and edits your web app's demo
An MIT-licensed workspace built around a /devrel-video Claude Code skill: Playwright records real clicks through your product, HyperFrames adds the title card, browser frame, chapters and call to action, and FFmpeg masters the file. It reached 118 points on Hacker News on Nov 2 and sits around 346 GitHub stars.
How it works, per the README. You clone the repo, open Claude Code and describe the walkthrough. The skill writes a brief and a beat plan and shows it before any capture or rendering. Each video lives in a projects/<slug>/brief.yaml with reusable brand tokens. Output includes master and web copies, ffprobe checks, a contact sheet and a thumbnail.
Optional layers. Narration (through your own Orpheus TTS endpoint), six local music styles, EN/ES subtitles, and presenter footage via your own GPU host running LatentSync. Use only footage of yourself or people who agreed to it. You'll need Node 22+, FFmpeg, Chromium and some Python helpers.
Limits the author lists: portrait and social output profiles are still on the roadmap, so it's a 16:9 tool for now. Some Hacker News commenters noted the narrator gets cut off in the demo video.
Our take: SaaS teams and agencies that redo product demos every release should try this. Screenplay (agent-screenplay) covers similar ground, but this one is better if you want HyperFrames in the edit.
Related tools on ReelStack
Skills & repos in our directory
- Video Studio Skill · Skill, Product demo video
More from the Lab
Topics: HyperFrames