skills.rest
kdlbs
kdlbsOFFICIAL
Explore all skills by this author →
GitHub

product-video-capture

Record, camera-process, encode, and validate Kandev product demo videos and screenshots from isolated demo data.

733|110|Updated Jan 9, 2026
Search Tags:#playwright#FFmpeg#video capture#product demo#Screen Recording#camera motion#Landing Page
One-click install
npx skills add https://github.com/kdlbs/kandev --skill product-video-capture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-video-capture
Source: https://github.com/kdlbs/kandev/tree/main/.agents/skills/product-video-capture
Command: npx skills add https://github.com/kdlbs/kandev --skill product-video-capture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Producing polished product videos, landing-page loops, and screenshots for Kandev requires deterministic demo data, pixel-accurate screen capture, smooth cursor-follow camera motion, and rigorous multi-format QA, which is error-prone to do by hand.

Core Features & Use Cases

  • Isolated Capture Pipeline: Records continuous 1x raw masters from a clean origin/main worktree using Xvfb, Chrome for Testing, Playwright/CDP, and FFmpeg x11grab at exact profiles (3840x2400 desktop, 1290x2796 native mobile, 25 fps).
  • Reversible Semantic Camera: Builds center-biased widen-pan-tighten camera tracks from dense pointer/touch metadata, then encodes WebM, MP4, and WebP through the landing repo's tested camera/encoder scripts with a 2.0x zoom cap.
  • Acceptance Gate: Enforces decoded-pixel dimension proofs, zero duplicated/dropped frames, actual-size readability audits, SHA-256 hashes, provenance records, and full teardown evidence before any promotion to production assets.
  • Use Case: When asked for a new landing-page feature loop, the skill seeds demo data via product-demo-seeding, records desktop and mobile masters, applies the landing-editorial camera profile, and stages validated WebM/MP4/WebP candidates for review.

Quick Start

Ask the agent to capture a new Kandev product demo video of a feature for the landing page, and it will seed demo data, record desktop and mobile masters, and stage encoded WebM, MP4, and WebP deliveries for review.

Frequently Asked Questions about product-video-capture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I record a product demo video for the Kandev landing page?▼

Invoke product-demo-seeding first to create isolated demo data, then this skill records a continuous 1x raw master per form factor, builds a semantic camera config, and encodes WebM, MP4, and WebP through the landing repo's tested scripts. All candidates stay staged outside production assets until explicitly approved.

What video formats and resolutions does the capture pipeline produce?▼

Desktop source is 3840x2400 at 25 fps delivered at 1920x1200, and native mobile source and delivery are 1290x2796 at 25 fps. Deliveries include VP9 WebM, H.264 MP4 with fast start, and a WebP poster, all muted with no audio stream.

Can I get a different zoom or crop without recapturing the video?▼

Yes, alternate framing reuses an approved raw master and changes only the camera config, keeping the camera reversible. The raw is reusable only when its source SHA still equals freshly fetched origin/main; otherwise a recapture is required.

Why was my capture rejected by the QA checklist?▼

Common rejection causes include stale UI not built from current origin/main, duplicated or dropped frames in the FFmpeg log, double or clipped cursors, fixture text, unreadable wide shots at actual size, and camera motion that moves away from the active pointer. The skill recaptures rather than hiding defects with edits or CSS.

Does the skill support mobile product captures?▼

Yes, mobile uses a separate native script with a Playwright isMobile touch context at 430x932 CSS viewport and DPR 3, producing 1290x2796 source and delivery. Desktop footage is never cropped into a mobile deliverable.

What tools are required to run the product video capture pipeline?▼

The pipeline requires Linux with Xvfb, Chrome for Testing, Playwright with CDP, FFmpeg and FFprobe, a Kandev checkout containing scripts/dev-isolated and apps/web/e2e, and the landing repository with product-loop-camera.mjs and product-loop-encoder.mjs scripts.

Related Skills

Explore More Marketing & Sales Skills→
Undertone0809Undertone0809
280

landing-proof-shots-maintainer

Generates Rutger's landing and product screenshots from seeded mock data with manifest output.

Community
Advanced
coroboroscoroboros
2

video-loop

Create seamless looping MP4 and WebM videos with crossfaded loop points.

Official
Intermediate
australiaaustralia
4

visual-audit

Capture screenshots across viewports and modes to audit web design.

Official
Advanced
richardnpaulrichardnpaul

ui-demo

Record web application demo videos with Playwright and a visible cursor overlay.

Community
Advanced