site-video-capture

Records browser-driven product demo videos from JSON scene scripts using Playwright and ffmpeg.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/diy-accounting-uk/submit.diyaccounting.co.uk --skill site-video-capture-diy-accounting-uk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-video-capture
Source: https://github.com/diy-accounting-uk/submit.diyaccounting.co.uk/tree/main/.claude/skills/site-video-capture
Command: npx skills add https://github.com/diy-accounting-uk/submit.diyaccounting.co.uk --skill site-video-capture-diy-accounting-uk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg, and includes scripts (resource) and references (resource) components.

What problem does it solve? Product demo and training videos go stale every time the UI changes, and re-recording them by hand is slow and inconsistent. This Skill turns a version-controlled JSON scene script into the single edit surface: change the script, rerun the capture, and get a fresh video without ever editing the mp4. ## Core Features & Use Cases - Script-driven browser capture: Drives a real browser through scenes with Playwright, draws a pointer, trail, captions and chapter labels via an in-page overlay, and encodes a constant-60fps H.264 mp4 with ffmpeg. - Authenticated journeys: Supports login, consent, bundle granting, HMRC authorisation and VAT return submission steps, with credentials read from environment variables and scanned out of all outputs. - Accessible publishing outputs: Every run produces the mp4 plus a .vtt caption file, a Markdown transcript and per-scene stills, satisfying WCAG SC 1.2.1 for silent videos. - Use Case: After a UI redesign, update the targets in videos/tour.json, run the capture against a local static server with --stills-only to verify every scene, then dispatch the GitHub workflow to record the final video against production. ## Quick Start Ask the AI to record the tour scene script in videos/tour.json against a locally served instance of web/public and review the generated contact sheet of stills.

Frequently Asked Questions about site-video-capture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I record a product demo video of my website automatically?▼

Write a JSON scene script defining scenes, steps, targets and captions, then run the capture script with Playwright against your site. It drives a real browser, overlays a pointer and captions, and encodes a constant-60fps H.264 mp4 with ffmpeg.

How do I re-record a demo video after a UI change?▼

Edit the scene script's targets, preferring role or text targets over CSS selectors since they survive markup refactors, then rerun the capture. Use --stills-only first to verify every target resolves before spending time on full capture and encode.

Can Playwright record videos of logged-in user journeys?▼

Yes, by setting auth to user in the scene script, which unlocks login, consent, bundle and authorisation actions. Credentials come from environment variables at run time, never appear in the script, and are scanned out of the transcript, timeline and captions.

Does the captured video meet WCAG accessibility requirements?▼

Each run ships the mp4 together with a .vtt caption file and a Markdown transcript, which satisfies WCAG SC 1.2.1 for silent videos. Burned-in captions alone do not qualify because they are pixels unreadable by assistive technology.

Why does a video capture step fail with a missing target error?▼

A missing target is a hard failure that names the scene, step and target, and writes a FAILED still showing the actual page state. Fix the script's target and rerun with --scene to check just that scene.