Skills

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)
Read the whole SKILL.md on GitHub

More in Design