{ "schemaVersion": "1.0", "item": { "slug": "demo-video", "name": "Demo Video Creator", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/0xs4m1337/demo-video", "canonicalUrl": "https://clawhub.ai/0xs4m1337/demo-video", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/demo-video", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=demo-video", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "references/demo-planning.md", "scripts/frames-to-video.sh", "scripts/record-demo.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/demo-video" }, "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/demo-video", "agentPageUrl": "https://openagent3.xyz/skills/demo-video/agent", "manifestUrl": "https://openagent3.xyz/skills/demo-video/agent.json", "briefUrl": "https://openagent3.xyz/skills/demo-video/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": "Demo Video Creator", "body": "Create polished product demo videos by automating browser interactions." }, { "title": "Overview", "body": "Plan the demo sequence (pages, interactions, timing)\nRecord frames using Playwright CDP screencast\nEncode to video with FFmpeg" }, { "title": "Prerequisites", "body": "Clawdbot browser running (browser action=start profile=clawd)\nApp accessible via browser (localhost or remote)\nFFmpeg installed for encoding" }, { "title": "Recording Workflow", "body": "Start the Clawdbot browser if not running\nNavigate to the app manually or via browser action=open\nCustomize scripts/record-demo.js for the target app\nRun: node scripts/record-demo.js\nEncode: bash scripts/frames-to-video.sh" }, { "title": "Planning a Demo", "body": "See references/demo-planning.md for guidance on:\n\nStructuring demo sequences\nTiming and pacing\nInteraction patterns\nWhat makes demos compelling" }, { "title": "scripts/record-demo.js", "body": "Template Playwright script that:\n\nConnects to Clawdbot browser via CDP\nStarts screencast capture (JPEG frames)\nExecutes demo sequence (navigation, clicks, hovers, typing)\nSaves frames to output directory\n\nCustomize for each demo:\n\nDEMO_SEQUENCES array - define pages and interactions\nOUTPUT_DIR - where to save frames\nFRAME_SKIP - skip every Nth frame (lower = more frames)" }, { "title": "scripts/frames-to-video.sh", "body": "FFmpeg encoding script with presets:\n\nmp4 - H.264, good quality/size balance (default)\ngif - Animated GIF for embedding\nwebm - VP9, smaller files\n\nUsage: ./frames-to-video.sh [input_dir] [output_name] [format]" }, { "title": "Interaction Patterns", "body": "// Navigation\nawait page.goto('http://localhost/dashboard');\nawait page.waitForTimeout(2000);\n\n// Click element\nawait page.locator('button:has-text(\"Create\")').click();\nawait page.waitForTimeout(500);\n\n// Hover (show tooltips, hover states)\nawait page.locator('.card').first().hover();\nawait page.waitForTimeout(1000);\n\n// Type text\nawait page.locator('input[placeholder=\"Search\"]').fill('query');\nawait page.waitForTimeout(500);\n\n// Press key\nawait page.keyboard.press('Enter');\nawait page.keyboard.press('Escape');\n\n// Scroll\nawait page.evaluate(() => window.scrollBy(0, 300));" }, { "title": "Tips", "body": "Timing: 2s on page load, 0.5-1s between interactions, 1.5s to show results\nFrame skip: Use 3-5 for smooth video, 8-10 for smaller files\nQuality: 85-90 JPEG quality balances size and clarity\nResolution: Browser window size determines output resolution\nLoops: GIFs should loop seamlessly - end where you started" } ], "body": "Demo Video Creator\n\nCreate polished product demo videos by automating browser interactions.\n\nOverview\nPlan the demo sequence (pages, interactions, timing)\nRecord frames using Playwright CDP screencast\nEncode to video with FFmpeg\nQuick Start\nPrerequisites\nClawdbot browser running (browser action=start profile=clawd)\nApp accessible via browser (localhost or remote)\nFFmpeg installed for encoding\nRecording Workflow\nStart the Clawdbot browser if not running\nNavigate to the app manually or via browser action=open\nCustomize scripts/record-demo.js for the target app\nRun: node scripts/record-demo.js\nEncode: bash scripts/frames-to-video.sh\nPlanning a Demo\n\nSee references/demo-planning.md for guidance on:\n\nStructuring demo sequences\nTiming and pacing\nInteraction patterns\nWhat makes demos compelling\nScripts\nscripts/record-demo.js\n\nTemplate Playwright script that:\n\nConnects to Clawdbot browser via CDP\nStarts screencast capture (JPEG frames)\nExecutes demo sequence (navigation, clicks, hovers, typing)\nSaves frames to output directory\n\nCustomize for each demo:\n\nDEMO_SEQUENCES array - define pages and interactions\nOUTPUT_DIR - where to save frames\nFRAME_SKIP - skip every Nth frame (lower = more frames)\nscripts/frames-to-video.sh\n\nFFmpeg encoding script with presets:\n\nmp4 - H.264, good quality/size balance (default)\ngif - Animated GIF for embedding\nwebm - VP9, smaller files\n\nUsage: ./frames-to-video.sh [input_dir] [output_name] [format]\n\nInteraction Patterns\n// Navigation\nawait page.goto('http://localhost/dashboard');\nawait page.waitForTimeout(2000);\n\n// Click element\nawait page.locator('button:has-text(\"Create\")').click();\nawait page.waitForTimeout(500);\n\n// Hover (show tooltips, hover states)\nawait page.locator('.card').first().hover();\nawait page.waitForTimeout(1000);\n\n// Type text\nawait page.locator('input[placeholder=\"Search\"]').fill('query');\nawait page.waitForTimeout(500);\n\n// Press key\nawait page.keyboard.press('Enter');\nawait page.keyboard.press('Escape');\n\n// Scroll\nawait page.evaluate(() => window.scrollBy(0, 300));\n\nTips\nTiming: 2s on page load, 0.5-1s between interactions, 1.5s to show results\nFrame skip: Use 3-5 for smooth video, 8-10 for smaller files\nQuality: 85-90 JPEG quality balances size and clarity\nResolution: Browser window size determines output resolution\nLoops: GIFs should loop seamlessly - end where you started" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/0xs4m1337/demo-video", "publisherUrl": "https://clawhub.ai/0xs4m1337/demo-video", "owner": "0xs4m1337", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/demo-video", "downloadUrl": "https://openagent3.xyz/downloads/demo-video", "agentUrl": "https://openagent3.xyz/skills/demo-video/agent", "manifestUrl": "https://openagent3.xyz/skills/demo-video/agent.json", "briefUrl": "https://openagent3.xyz/skills/demo-video/agent.md" } }