Ranguana

Walkthrough Video — Testing skill for Claude Code

Testing community

Record a narrated product walkthrough video of a website, web app, or Electron desktop app — a Claude Code skill: scripted Playwright recording, per-beat voice-over, burned-in captions, thumbnail, and.

How to install Walkthrough Video

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Ranguana/walkthrough-video and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Walkthrough Video does

Record a narrated product walkthrough video of a website, web app, or Electron desktop app — a Claude Code skill: scripted Playwright recording, per-beat voice-over, burned-in captions, thumbnail, and a QA pass.

Alternatives in Testing

  • Webapp Testing — Test local web applications using Playwright for UI verification and debugging 94.1k ★
  • Develop Web Game — Build and test web games iteratively using Playwright with time-stepping 14.6k ★
  • Regen API — Regenerate the OpenAPI spec and web API client after server API changes 2.5k ★

README

walkthrough-video

A [Claude Code](https://code.claude.com/docs) Agent Skill that records a narrated product walkthrough video of a website, web app, or Electron desktop app — no screen-recording app, no video editor, no manual timing.

You describe the video as a list of **beats** (a screen, what the cursor does, one sentence of narration). The skill narrates the script, drives the app with Playwright while recording it, lines the speech up with the picture, burns captions, cuts a thumbnail, and runs a QA pass that proves the timing. Re-narrating a line does not mean re-recording: holds stretch to fit.

What you get

deliverables/
  .mp4              1920x1080, H.264 30 fps, AAC 48 kHz — upload this, attach the SRT
  -captioned.mp4    same cut with burned-in captions, for players that cannot load an SRT
  .srt              captions timed per sentence from the real clip lengths
  thumbnail.png           a frame from a beat you choose, with an optional title band
  narration-script.txt    what the voice actually read
  README.md               beat table, runtime, re-render commands, compliance notes

Requirements

Node 22+
ffmpeg / ffprobe any recent build (brew install ffmpeg). libass is not needed — captions are PNG overlays
Playwright Chromium npx playwright install chromium
Narration nothing required. macOS say is used automatically when no API key is set. Set ELEVENLABS_API_KEY + ELEVENLABS_VOICE_ID for a publishable voice

Narration credentials

Two engines. With no credentials the skill uses the macOS `say` voice — free, offline, good enough for drafts and CI. With credentials it uses ElevenLabs. Force either with `--engine say` / `--engine elevenlabs`.

Credentials are read in this order, first hit per variable wins:

  1. the process environment
  2. the project's env file (envFile in the config, default ./.env.local)
  3. `~/.config/walkthrough-video/.env