{"skill":{"slug":"video-proof","displayName":"Video Proof","summary":"Record video proof of implemented features after coding tasks complete. Use when a coding agent finishes work and needs to visually verify and demonstrate th...","description":"---\nname: video-proof\ndescription: 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.\nlicense: Apache-2.0\ncompatibility: Requires Node.js 18+, Chromium (installed via Playwright). Optional ffmpeg for mp4 conversion. Works on Linux, macOS, and WSL.\nmetadata:\n  author: rikisann\n  version: \"1.0\"\n---\n\n# Video Proof\n\nRecord 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.\n\nWorks 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.\n\n## Prerequisites\n\nRun once per machine:\n\n```bash\nbash scripts/setup.sh\n```\n\nInstalls Playwright (Chromium), ffmpeg, and the `yaml` npm package.\n\n## Quick Start\n\n### Option A: YAML Proof Spec (recommended)\n\nCreate a `proof-spec.yaml`:\n\n```yaml\nproof:\n  start_command: \"npm run dev\"       # any shell command that starts your app\n  start_port: 3000                   # port to poll before recording begins\n  base_url: \"http://localhost:3000\"\n  steps:\n    - goto: \"/dashboard\"\n    - wait: 2000\n    - screenshot: \"dashboard-loaded\"\n    - click: \"text=Create New\"\n    - wait: 1000\n    - assert_visible: \"text=New Item\"\n    - screenshot: \"item-created\"\n```\n\nRun it:\n\n```bash\nnode scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts\n```\n\n### Option B: Inline CLI (simple cases)\n\n```bash\nnode scripts/record-proof.js \\\n  --start \"python3 -m http.server 8080\" \\\n  --port 8080 \\\n  --url http://localhost:8080 \\\n  --goto \"/\" \\\n  --screenshot \"home\" \\\n  --output ./proof-artifacts\n```\n\n### Option C: Already-running server (no start_command)\n\nOmit `start_command` — the script skips server startup and goes straight to recording:\n\n```yaml\nproof:\n  base_url: \"https://staging.myapp.com\"\n  steps:\n    - goto: \"/login\"\n    - screenshot: \"login-page\"\n```\n\n## Artifacts Produced\n\n```\nproof-artifacts/\n├── video.webm            # Full screen recording\n├── video.mp4             # Chat-friendly version (auto-converted via ffmpeg)\n├── screenshots/          # Named screenshots from steps\n│   ├── dashboard-loaded.png\n│   └── item-created.png\n├── console.log           # Browser console output (errors, warnings, logs)\n└── proof-summary.md      # Markdown report with pass/fail status per step\n```\n\nExit code: `0` if all steps pass, `1` if any step fails. On failure, a `FAILURE.png` full-page screenshot is captured automatically.\n\n## Start Command Examples\n\nThe `start_command` field accepts any shell command. Examples:\n\n| Stack | start_command | start_port |\n|-------|--------------|------------|\n| Next.js | `npm run dev` | 3000 |\n| Vite / React | `npm run dev` | 5173 |\n| Django | `python manage.py runserver 0.0.0.0:8000` | 8000 |\n| Flask | `flask run --port 5000` | 5000 |\n| Rails | `bin/rails server -p 3000` | 3000 |\n| Go | `go run . -addr :8080` | 8080 |\n| Rust (Actix/Axum) | `cargo run` | 8080 |\n| Docker Compose | `docker compose up` | 3000 |\n| Static files | `python3 -m http.server 8080` | 8080 |\n| Already running | *(omit field)* | — |\n\n## Step Actions\n\n| Action | Value | Description |\n|--------|-------|-------------|\n| `goto` | `\"/path\"` or full URL | Navigate to a page |\n| `click` | Playwright selector | Click an element (`text=Submit`, `#btn`, `.class`) |\n| `fill` | `{selector, value}` | Clear and fill an input field |\n| `type` | `{selector, text}` | Type into an element keystroke by keystroke |\n| `wait` | milliseconds | Pause (let animations/data load) |\n| `screenshot` | `\"name\"` | Save `screenshots/<name>.png` |\n| `scroll` | `\"down\"` or `\"up\"` | Scroll 500px in direction |\n| `assert_visible` | Playwright selector | Fail the proof if element isn't visible |\n| `assert_url` | string | Fail if current URL doesn't contain string |\n\n## API-Only Proof (No Browser)\n\nFor backend/API changes with no UI, use `api-proof.js`:\n\n```bash\nnode scripts/api-proof.js --spec api-spec.yaml --output ./proof-artifacts\n```\n\n```yaml\nproof:\n  start_command: \"npm start\"\n  start_port: 3000\n  base_url: \"http://localhost:3000\"\n  requests:\n    - method: GET\n      path: /api/health\n      assert_status: 200\n      assert_body_contains: \"ok\"\n    - method: POST\n      path: /api/users\n      headers:\n        Content-Type: application/json\n      body: '{\"name\": \"test\"}'\n      assert_status: 201\n```\n\nProduces `api-proof.md` and `api-results.json` instead of video.\n\n## Integration with Coding Agents\n\nAppend to any coding task prompt:\n\n```\nAfter completing the implementation, create a proof-spec.yaml that:\n1. Starts the app with the appropriate command for this project\n2. Navigates to the relevant pages\n3. Demonstrates the feature with clicks/fills as needed\n4. Asserts the expected outcome is visible\n5. Takes before/after screenshots\n\nThen run:\n  node <skill-path>/scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts\n\nCommit proof-artifacts/ with your changes.\n```\n\nThe agent writes the proof spec based on what it built, runs it, and the video becomes part of the deliverable.\n\n## Spec Reference\n\nSee `references/proof-spec.md` for the full YAML schema, API proof schema, and a copy-paste PRD template.\n\n## Tips\n\n- Use `assert_visible` to make proofs fail when the feature doesn't work — video of a broken page isn't useful proof\n- Keep specs focused on the specific feature, not the whole app\n- `wait` steps between actions let data load and animations settle — 1-2s is usually enough\n- The video captures real load times — doubles as a basic performance check\n- If ffmpeg isn't available, the script still produces `.webm` (just skips mp4 conversion)\n","topics":["Coding"],"tags":{"latest":"1.0.2"},"stats":{"comments":0,"downloads":868,"installsAllTime":32,"installsCurrent":0,"stars":1,"versions":3},"createdAt":1772133349169,"updatedAt":1779077410484},"latestVersion":{"version":"1.0.2","createdAt":1772135101483,"changelog":"Fix: re-publish with complete package files.","license":null},"metadata":null,"owner":{"handle":"rikisann","userId":"s172b63qqbcgp7vgp9n6w84ww9884w8q","displayName":"rikisann","image":"https://avatars.githubusercontent.com/u/52165646?v=4"},"moderation":{"isSuspicious":false,"isMalwareBlocked":false,"verdict":"clean","reasonCodes":["review.llm_review"],"summary":"Review: review.llm_review","engineVersion":"v2.4.24","updatedAt":1779962720166}}