skills.rest
The-Focus-AI
The-Focus-AIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

webreel

Record scripted browser demos as MP4, GIF, or WebM videos from JSON configs.

Updated Jul 16, 2026
Search Tags:#browser automation#gif#mp4#screen recording#headless chrome#demo video#webreel
One-click install
npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill webreel-the-focus-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webreel
Source: https://github.com/The-Focus-AI/walking-thoughts/tree/main/.agents/skills/webreel
Command: npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill webreel-the-focus-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires webreel, and includes references (resource) components.

What problem does it solve? Manually recording polished browser demo videos is repetitive and hard to reproduce. This Skill automates scripted browser recordings with cursor animation, keystroke overlays, and sound effects, producing deterministic MP4, GIF, or WebM output from a JSON config. ## Core Features & Use Cases - Scripted Recordings: Define steps (click, type, drag, scroll, key combos) in a JSON config and let webreel drive headless Chrome to capture frames and encode with ffmpeg. - Overlays and Themes: Add animated cursors, keystroke HUDs, and sound effects, then re-apply them to existing footage with the composite command without re-recording. - Preview and Validation: Run steps in a visible browser with preview, check configs with validate, and debug with --verbose or --dry-run. - Use Case: Record a product walkthrough video showing a login flow, form filling, and navigation, then export it as a GIF for documentation or an MP4 for a landing page. ## Quick Start Ask the AI to scaffold a webreel config for your app's URL, preview the steps in a visible browser, and then record the demo video.

Frequently Asked Questions about webreel

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

FAQPage Schema
How do I record a browser demo video with webreel?▼

Scaffold a config with npx webreel init --name my-demo --url https://example.com, edit the steps in webreel.config.json, then run npx webreel record my-demo. Output lands in the videos/ directory by default.

How do I preview webreel steps before recording?▼

Run npx webreel preview followed by the video name to execute the steps in a visible browser without recording. Add --verbose to log each step and debug timing or selector issues.

Do I need to install Chrome or ffmpeg for webreel?▼

No. webreel automatically downloads Chrome and ffmpeg to ~/.webreel on first run. You can force a re-download with npx webreel install --force or override paths with CHROME_PATH and FFMPEG_PATH environment variables.

What output formats does webreel support?▼

webreel supports MP4, GIF, and WebM output. Set the output field's file extension in the video config, such as demo.gif or demo.webm, to control the format.

Why does my webreel recording fail with no inspectable targets?▼

This error almost always indicates a config problem, such as a wrong waitFor selector, a missing element, or bad timing, not a missing browser. Check the config and run with --verbose to debug step execution.

Can I re-apply cursor and HUD overlays without re-recording?▼

Yes. The webreel composite command re-applies cursor, HUD, and sound effect overlays to existing raw video. This lets you iterate on theme settings without recording again.

Related Skills

Explore More Marketing & Sales Skills→
Pika-LabsPika-Labs
38

explainer

Create browser-driven explainer videos from URLs or GitHub repositories.

Official
Advanced
MoizIbnYousafMoizIbnYousaf
31

marketing-demo

Record product demos and walkthrough videos using ply screenshots, ffmpeg stitching, or Remotion compositions.

Community
Intermediate
mia-cxmia-cx

test-webapp

Automate browser-based testing of local web applications with Playwright.

Official
Intermediate
codatacodata
8

photograph

Capture web page screenshots and record screen activity using Playwright and ffmpeg.

Official
Intermediate