{
  "schemaVersion": "1.0",
  "item": {
    "slug": "video-proof",
    "name": "Video Proof",
    "source": "tencent",
    "type": "skill",
    "category": "效率提升",
    "sourceUrl": "https://clawhub.ai/rikisann/video-proof",
    "canonicalUrl": "https://clawhub.ai/rikisann/video-proof",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/video-proof",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=video-proof",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "references/proof-spec.md",
      "scripts/api-proof.js",
      "scripts/package-lock.json",
      "scripts/package.json",
      "scripts/record-proof.js"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/video-proof"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/video-proof",
    "agentPageUrl": "https://openagent3.xyz/skills/video-proof/agent",
    "manifestUrl": "https://openagent3.xyz/skills/video-proof/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/video-proof/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Video Proof",
        "body": "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.\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."
      },
      {
        "title": "Prerequisites",
        "body": "Run once per machine:\n\nbash scripts/setup.sh\n\nInstalls Playwright (Chromium), ffmpeg, and the yaml npm package."
      },
      {
        "title": "Option A: YAML Proof Spec (recommended)",
        "body": "Create a proof-spec.yaml:\n\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\nRun it:\n\nnode scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts"
      },
      {
        "title": "Option B: Inline CLI (simple cases)",
        "body": "node 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"
      },
      {
        "title": "Option C: Already-running server (no start_command)",
        "body": "Omit start_command — the script skips server startup and goes straight to recording:\n\nproof:\n  base_url: \"https://staging.myapp.com\"\n  steps:\n    - goto: \"/login\"\n    - screenshot: \"login-page\""
      },
      {
        "title": "Artifacts Produced",
        "body": "proof-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\nExit code: 0 if all steps pass, 1 if any step fails. On failure, a FAILURE.png full-page screenshot is captured automatically."
      },
      {
        "title": "Start Command Examples",
        "body": "The start_command field accepts any shell command. Examples:\n\nStackstart_commandstart_portNext.jsnpm run dev3000Vite / Reactnpm run dev5173Djangopython manage.py runserver 0.0.0.0:80008000Flaskflask run --port 50005000Railsbin/rails server -p 30003000Gogo run . -addr :80808080Rust (Actix/Axum)cargo run8080Docker Composedocker compose up3000Static filespython3 -m http.server 80808080Already running(omit field)—"
      },
      {
        "title": "Step Actions",
        "body": "ActionValueDescriptiongoto\"/path\" or full URLNavigate to a pageclickPlaywright selectorClick an element (text=Submit, #btn, .class)fill{selector, value}Clear and fill an input fieldtype{selector, text}Type into an element keystroke by keystrokewaitmillisecondsPause (let animations/data load)screenshot\"name\"Save screenshots/<name>.pngscroll\"down\" or \"up\"Scroll 500px in directionassert_visiblePlaywright selectorFail the proof if element isn't visibleassert_urlstringFail if current URL doesn't contain string"
      },
      {
        "title": "API-Only Proof (No Browser)",
        "body": "For backend/API changes with no UI, use api-proof.js:\n\nnode scripts/api-proof.js --spec api-spec.yaml --output ./proof-artifacts\n\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\nProduces api-proof.md and api-results.json instead of video."
      },
      {
        "title": "Integration with Coding Agents",
        "body": "Append to any coding task prompt:\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\nThe agent writes the proof spec based on what it built, runs it, and the video becomes part of the deliverable."
      },
      {
        "title": "Spec Reference",
        "body": "See references/proof-spec.md for the full YAML schema, API proof schema, and a copy-paste PRD template."
      },
      {
        "title": "Tips",
        "body": "Use assert_visible to make proofs fail when the feature doesn't work — video of a broken page isn't useful proof\nKeep specs focused on the specific feature, not the whole app\nwait steps between actions let data load and animations settle — 1-2s is usually enough\nThe video captures real load times — doubles as a basic performance check\nIf ffmpeg isn't available, the script still produces .webm (just skips mp4 conversion)"
      }
    ],
    "body": "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\nPrerequisites\n\nRun once per machine:\n\nbash scripts/setup.sh\n\n\nInstalls Playwright (Chromium), ffmpeg, and the yaml npm package.\n\nQuick Start\nOption A: YAML Proof Spec (recommended)\n\nCreate a proof-spec.yaml:\n\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\nnode scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts\n\nOption B: Inline CLI (simple cases)\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\nOption C: Already-running server (no start_command)\n\nOmit start_command — the script skips server startup and goes straight to recording:\n\nproof:\n  base_url: \"https://staging.myapp.com\"\n  steps:\n    - goto: \"/login\"\n    - screenshot: \"login-page\"\n\nArtifacts Produced\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\nStart Command Examples\n\nThe start_command field accepts any shell command. Examples:\n\nStack\tstart_command\tstart_port\nNext.js\tnpm run dev\t3000\nVite / React\tnpm run dev\t5173\nDjango\tpython manage.py runserver 0.0.0.0:8000\t8000\nFlask\tflask run --port 5000\t5000\nRails\tbin/rails server -p 3000\t3000\nGo\tgo run . -addr :8080\t8080\nRust (Actix/Axum)\tcargo run\t8080\nDocker Compose\tdocker compose up\t3000\nStatic files\tpython3 -m http.server 8080\t8080\nAlready running\t(omit field)\t—\nStep Actions\nAction\tValue\tDescription\ngoto\t\"/path\" or full URL\tNavigate to a page\nclick\tPlaywright selector\tClick an element (text=Submit, #btn, .class)\nfill\t{selector, value}\tClear and fill an input field\ntype\t{selector, text}\tType into an element keystroke by keystroke\nwait\tmilliseconds\tPause (let animations/data load)\nscreenshot\t\"name\"\tSave screenshots/<name>.png\nscroll\t\"down\" or \"up\"\tScroll 500px in direction\nassert_visible\tPlaywright selector\tFail the proof if element isn't visible\nassert_url\tstring\tFail if current URL doesn't contain string\nAPI-Only Proof (No Browser)\n\nFor backend/API changes with no UI, use api-proof.js:\n\nnode scripts/api-proof.js --spec api-spec.yaml --output ./proof-artifacts\n\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\nIntegration with Coding Agents\n\nAppend to any coding task prompt:\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\nSpec Reference\n\nSee references/proof-spec.md for the full YAML schema, API proof schema, and a copy-paste PRD template.\n\nTips\nUse assert_visible to make proofs fail when the feature doesn't work — video of a broken page isn't useful proof\nKeep specs focused on the specific feature, not the whole app\nwait steps between actions let data load and animations settle — 1-2s is usually enough\nThe video captures real load times — doubles as a basic performance check\nIf ffmpeg isn't available, the script still produces .webm (just skips mp4 conversion)"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/rikisann/video-proof",
    "publisherUrl": "https://clawhub.ai/rikisann/video-proof",
    "owner": "rikisann",
    "version": "1.0.2",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/video-proof",
    "downloadUrl": "https://openagent3.xyz/downloads/video-proof",
    "agentUrl": "https://openagent3.xyz/skills/video-proof/agent",
    "manifestUrl": "https://openagent3.xyz/skills/video-proof/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/video-proof/agent.md"
  }
}