Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Productivity
Video Proof
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...
skill openclawclawhub Free
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...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, references/proof-spec.md, scripts/api-proof.js, scripts/package-lock.json, scripts/package.json, scripts/record-proof.js
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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.
Upgrade existing
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.2
Provenance
- Publisher
- rikisann
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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 scripts/setup.sh Installs Playwright (Chromium), ffmpeg, and the yaml npm package.
Option A: YAML Proof Spec (recommended)
Create a proof-spec.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: node scripts/record-proof.js --spec proof-spec.yaml --output ./proof-artifacts
Option B: Inline CLI (simple cases)
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: 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: Stackstart_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)โ
Step Actions
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
API-Only Proof (No Browser)
For backend/API changes with no UI, use api-proof.js: node scripts/api-proof.js --spec api-spec.yaml --output ./proof-artifacts 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)
Category context
Workflow acceleration for inboxes, docs, calendars, planning, and execution loops.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs2 Scripts2 Config
- SKILL.md
- references/proof-spec.md
- scripts/api-proof.js
- scripts/record-proof.js
- scripts/package-lock.json
- scripts/package.json