
Feature Demo Recording
Record a demo video of a web feature from a real browser.
Install
npx skills add kirodotdev/KiroCrew --skill feature-demo-recording -g -a claude-code -y- Repository
- kirodotdev/KiroCrew4.7k
- Category
- Design
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Record a demo video of a web feature from a real browser. Two modes -- a NARRATED film where measured voiceover drives the timeline (designed slides, subtitles, punch-in camera, rendered from an HTML timeline), and a SILENT evidence clip for a PR or a QA pass. Use when the user asks to record a video, demo, or screen recording of a feature, dashboard, or web UI flow.
Feature Demo Recording
Record a real browser and cut it into either of two things:
- Narrated film (default when someone will watch and listen): designed brand slides, spoken narration, subtitles, and a camera that punches in on whatever is being talked about.
- Silent evidence clip (a PR, a QA pass): the same capture with subtitles and punch-in, no audio, authored durations.
Both share one pipeline. The only difference is whether the timeline comes from measured speech or from durations you write down.
The rule that makes it work
Narration first, then record. Generate the audio, measure every line with
ffprobe, and pace the capture to those numbers. Alignment is then true by
construction instead of repaired in the edit. Recording first and narrating after
accumulates drift you cannot fix without re-recording -- measured at about 3s by the
last beat on a two-minute cut, versus under a few hundred ms when the recorder
holds absolute targets read out of the measured timeline.
In silent mode there is nothing to measure, so you write each beat's duration in
the script instead. Same file, same recorder, narrate.py --silent.
Pipeline
script.json ──narrate.py──> narration.mp3 + narr.json (measured timeline)
(--silent: no audio, durations taken from the script)
│
▼ the recorder reads the beat targets
record.py (adapted) ──> page.webm + events.json (capture + beat log)
│
ffmpeg ──> assets/footage.mp4
│
compose.py (narr.json + events.json) ──> index.html (HTML timeline)
│
hyperframes ──> renders/*.mp4
│
verify_align.py ──> drift / audio / picture / streams (gate before delivery)


