Video Proof

Record video demos of implemented features using Playwright's built-in screen recording. After a coding task completes, this skill starts your app, runs a scripted walkthrough, and captures video + screenshots + console logs as proof artifacts.

Works with any stack — Next.js, Vite, Django, Rails, Go, Docker, static files, or an already-running server. You provide the start command; the skill handles the rest.

Prerequisites

Run once per machine:

CODEBLOCK0

Installs Playwright (Chromium), ffmpeg, and the yaml npm package.

Quick Start

Option A: YAML Proof Spec (recommended)

Create a proof-spec.yaml:

CODEBLOCK1

Run it:

CODEBLOCK2

Option B: Inline CLI (simple cases)

CODEBLOCK3

Option C: Already-running server (no start_command)

Omit start_command — the script skips server startup and goes straight to recording:

CODEBLOCK4

Artifacts Produced

CODEBLOCK5

Exit code: 0 if all steps pass, 1 if any step fails. On failure, a FAILURE.png full-page screenshot is captured automatically.

Start Command Examples

The start_command field accepts any shell command. Examples:

Stack	startcommand	startport
Next.js	INLINECODE7	3000
Vite / React

npm run dev | 5173 |
| Django | python manage.py runserver 0.0.0.0:8000 | 8000 |
| Flask | flask run --port 5000 | 5000 |
| Rails | bin/rails server -p 3000 | 3000 |
| Go | go run . -addr :8080 | 8080 |
| Rust (Actix/Axum) | cargo run | 8080 |
| Docker Compose | docker compose up | 3000 |
| Static files | python3 -m http.server 8080 | 8080 |
| Already running | (omit field) | — |

Step Actions

Action	Value	Description
INLINECODE16	INLINECODE17 or full URL	Navigate to a page
INLINECODE18

Playwright selector | Click an element (text=Submit, #btn, .class) | | fill | {selector, value} | Clear and fill an input field | | type | {selector, text} | Type into an element keystroke by keystroke | | wait | milliseconds | Pause (let animations/data load) | | screenshot | "name" | Save screenshots/<name>.png | | scroll | "down" or "up" | Scroll 500px in direction | | assert_visible | Playwright selector | Fail the proof if element isn't visible | | assert_url | string | Fail if current URL doesn't contain string |

API-Only Proof (No Browser)

For backend/API changes with no UI, use api-proof.js:

CODEBLOCK6

CODEBLOCK7

Produces api-proof.md and api-results.json instead of video.

Integration with Coding Agents

Append to any coding task prompt:

CODEBLOCK8

The agent writes the proof spec based on what it built, runs it, and the video becomes part of the deliverable.

Spec Reference

See references/proof-spec.md for the full YAML schema, API proof schema, and a copy-paste PRD template.

Tips

• - Use assert_visible to make proofs fail when the feature doesn't work — video of a broken page isn't useful proof
• Keep specs focused on the specific feature, not the whole app
• INLINECODE40 steps between actions let data load and animations settle — 1-2s is usually enough
• The video captures real load times — doubles as a basic performance check
• If ffmpeg isn't available, the script still produces .webm (just skips mp4 conversion)