From sundial-org-awesome-openclaw-skills-4
Creates product demo videos by automating browser interactions with Playwright CDP screencast and encoding frames via FFmpeg. Use for web app demos, walkthroughs, showcases, or interactive recordings.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-2 --plugin sundial-org-awesome-openclaw-skills-4This skill uses the workspace's default tool permissions.
Create polished product demo videos by automating browser interactions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Create polished product demo videos by automating browser interactions.
browser action=start profile=clawd)browser action=openscripts/record-demo.js for the target appnode scripts/record-demo.jsbash scripts/frames-to-video.shSee references/demo-planning.md for guidance on:
scripts/record-demo.jsTemplate Playwright script that:
Customize for each demo:
DEMO_SEQUENCES array - define pages and interactionsOUTPUT_DIR - where to save framesFRAME_SKIP - skip every Nth frame (lower = more frames)scripts/frames-to-video.shFFmpeg encoding script with presets:
mp4 - H.264, good quality/size balance (default)gif - Animated GIF for embeddingwebm - VP9, smaller filesUsage: ./frames-to-video.sh [input_dir] [output_name] [format]
// Navigation
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// Click element
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// Hover (show tooltips, hover states)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// Type text
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// Press key
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// Scroll
await page.evaluate(() => window.scrollBy(0, 300));