Walkthrough Video — Testing skill for Claude Code
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:
- the process environment
- the project's env file (
envFilein the config, default./.env.local) - `~/.config/walkthrough-video/.env
Related Skills
Debug Kit
🧩 Agent Skill: drive, inspect & test apps across 9 platforms (macOS/iOS/Android/Web/Electron/Flutter/RN/Tauri
18 Scroll Driven Product Landing Page Builder
You are an autonomous senior product website builder, creative director, frontend developer, copywriter, asset
Higgsfield Claude Skills
19 Claude Code skills for Higgsfield AI — automate image generation, Seedance 2.0 video creation, and full UGC
Claude Code Video Toolkit
AI-native video production workspace for Claude Code with Remotion, ElevenLabs, FFmpeg, and Playwright skills.
Promo Video
Fabrique une vidéo marketing animée (Remotion) qui montre le vrai produit — scénario validé, captures Playwrig
Pharn Spec
Turn a user's prose intent into a structured, human-approved features/ /SPEC.md — the head of the product pipe
Related Agents
Demo Producer
Storyteller and producer for polished product demo videos. Turns your narrative into a scripted, narrated, mus
Thumbnail Agent
Designs three deliberately different thumbnail concepts per video — Safe, Curiosity and Wildcard — each shippi
AUI Usage Guide
A complete walkthrough for using AUI (Agent UI) -- the visual desktop application for designing, managing, and