# Feature Demo Recording

Record a demo video of a web feature from a real browser.

- Repository: https://github.com/kirodotdev/KiroCrew (4711 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add kirodotdev/KiroCrew --skill feature-demo-recording -g -a claude-code -y`
Codex: `npx skills add kirodotdev/KiroCrew --skill feature-demo-recording -g -a codex -y`
Cursor: `npx skills add kirodotdev/KiroCrew --skill feature-demo-recording -g -a cursor -y`
Gemini CLI: `npx skills add kirodotdev/KiroCrew --skill feature-demo-recording -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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)
```

The rest: https://github.com/kirodotdev/KiroCrew/blob/HEAD/src/kiro_crew/apps/builtins/dev_fleet/skills/feature-demo-recording/SKILL.md