Video Proof

SKILL.md

---
name: video-proof
description: Record video proof of implemented features after coding tasks complete. Use when a coding agent finishes work and needs to visually verify and demonstrate that the feature works. Generates screen recordings, screenshots, and test logs as PR artifacts. Integrates with any coding agent workflow — run after code is written to produce video evidence of working software. Trigger on "video proof", "record demo", "prove it works", "show me it working", or when PRDs include a proof/demo step.
license: Apache-2.0
compatibility: Requires Node.js 18+, Chromium (installed via Playwright). Optional ffmpeg for mp4 conversion. Works on Linux, macOS, and WSL.
metadata:
  author: rikisann
  version: "1.0"
---

# 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:

```bash
bash scripts/setup.sh
```

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

## Quick Start

### Option A: YAML Proof Spec (recommended)

Create a `proof-spec.yaml`:

```yaml
proof:
  start_command: "npm run dev"       # any shell command that starts your app
  start_port: 3000                   # port to poll before recording begins
  base_url: "http://localhost:3000"
  steps:
    - goto: "/dashboard"
    - wait: 2000
    - screenshot: "dashboard-loaded"
    - click: "text=Create New"
    - wait: 1000
    - assert_visible: "text=New Item"
    - screenshot: "item-created"
```

Run it:

```bash
node scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts
```

### Option B: Inline CLI (simple cases)

```bash
node scripts/record-proof.js \
  --start "python3 -m http.server 8080" \
  --port 8080 \
  --url http://localhost:8080 \
  --goto "/" \
  --screenshot "home" \
  --output ./proof-artifacts
```

### Option C: Already-running server (no start_command)

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

```yaml
proof:
  base_url: "https://staging.myapp.com"
  steps:
    - goto: "/login"
    - screenshot: "login-page"
```

## Artifacts Produced

```
proof-artifacts/
├── video.webm            # Full screen recording
├── video.mp4             # Chat-friendly version (auto-converted via ffmpeg)
├── screenshots/          # Named screenshots from steps
│   ├── dashboard-loaded.png
│   └── item-created.png
├── console.log           # Browser console output (errors, warnings, logs)
└── proof-summary.md      # Markdown report with pass/fail status per step
```

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 | start_command | start_port |
|-------|--------------|------------|
| Next.js | `npm run dev` | 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 |
|--------|-------|-------------|
| `goto` | `"/path"` or full URL | Navigate to a page |
| `click` | 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`:

```bash
node scripts/api-proof.js --spec api-spec.yaml --output ./proof-artifacts
```

```yaml
proof:
  start_command: "npm start"
  start_port: 3000
  base_url: "http://localhost:3000"
  requests:
    - method: GET
      path: /api/health
      assert_status: 200
      assert_body_contains: "ok"
    - method: POST
      path: /api/users
      headers:
        Content-Type: application/json
      body: '{"name": "test"}'
      assert_status: 201
```

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

## Integration with Coding Agents

Append to any coding task prompt:

```
After completing the implementation, create a proof-spec.yaml that:
1. Starts the app with the appropriate command for this project
2. Navigates to the relevant pages
3. Demonstrates the feature with clicks/fills as needed
4. Asserts the expected outcome is visible
5. Takes before/after screenshots

Then run:
  node <skill-path>/scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts

Commit proof-artifacts/ with your changes.
```

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
- `wait` 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)