TWISTEdBRACKETS

Audio & video

Video Generate Explainer

video-generate-explainer

A skill I developed for shipping narrated UI explainers without generative AI video. AI video is expensive and, over a longer production, tends to look bland and inconsistent. This pipeline rebuilds your project's real UI in Remotion React components, so visuals stay pixel-consistent, track product changes, and can be re-rendered or edited at low cost when the interface moves. Work moves through explicit gates - brief, audio-first script, scene plan, theme and shared components, narration sync, optional music and SFX, scene build, render, then a critic pass - and each gate leaves artifacts on disk. Generative clips are the exception, not the default. The Inline Validation UI Law video on this site was produced with it.

Listen to how this skill works using the player at the bottom of the page.

What it does

  • Rebuilds real product/UI screens as Remotion components with mock data - not live captures and not AI video as the body
  • Stops for human approval at every gate so spend and direction stay intentional
  • Drives scene timing from continuous ElevenLabs narration instead of fixed clip buckets
  • Keeps continuity in shared components so a recurring UI element is identical by construction
  • Renders deterministically (including multi-format 16:9 / 9:16 from one production) and closes with a critic pass
  • Leaves brief, script, scenes.json, audio, critic reports, and finals on disk so you can revise cheaply when the product changes

Production example

Inline Validation - one Remotion production, two target aspect ratios. Same script, narration, and shared UI components; layout reflows per format via useVideoConfig(). 16:9 for the law page embed, 9:16 for Shorts / Reels / TikTok-style placement.

16:9 · 1920×1080
9:16 · 1080×1920

Artifacts from Inline Validation

Each gate writes durable files. This is the footprint left by the Inline Validation production - enough to revise a scene, retime narration, or re-render both formats without starting again.

text
remotion/productions/inline-validation/
  brief.md                 # Gate 1 - topic, length, formats
  script.md                # Gate 2 - audio-first VO
  scenes.json              # Gate 3/5 - scene plan + narration timings
  shared/                  # Gate 4 - theme, MockForm, CameraFocus, …
  scenes/*.jsx             # Gate 8 - one Remotion component per beat
  Composition.jsx          # Gate 9 - TransitionSeries timeline
  audio/alignment.json     # Gate 5 - speech timestamps
  audio/music-prompt.md    # Gate 6 - approved bed music
  audio/sfx-plan.md        # Gate 7 - sparse common-library SFX
  critic/report-2.md       # Gate 10 - pass before ship

public/video/inline-validation/
  narration.mp3
  background-music.mp3
  final-16x9.mp4
  final-9x16.mp4
  poster-16x9.png
  poster-9x16.png

How it flows

  1. 01Brief - topic, length, platforms, and formats locked
  2. 02Audio-first script - speakable VO with breath points
  3. 03Scene plan - component scenes by default; flag any real or generated clip
  4. 04Theme + shared UI components + background strategy
  5. 05Narration synthesis and timestamp alignment into scene durations
  6. 06Optional looping bed music and sparse approved SFX
  7. 07Build each scene (still-audited), assemble with TransitionSeries, render per format
  8. 08Critic review against brief fit, UI clarity, and delivery before sign-off

Example prompt

“/video-generate-explainer Make a narrated explainer of the Inline Validation UI Law, reconstructing the form demos in Remotion.”

Install

sh
npx dot-skills add levi-putna/twistedbrackets.com/video-generate-explainer

Installed with dot-skills, which keeps one .skills/ folder as the source of truth and links it into Claude Code, Cursor, and other agents. Learn more about dot-skills.

Needs ELEVENLABS_API_KEY and ELEVENLABS_VOICE_ID. Run npx dot-skills doctor after installing to check your environment.