skills.rest
vercel-labs
vercel-labsOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

webreel

Create scripted browser demo videos from JSON step configs.

904|49|Updated Feb 27, 2026
Search Tags:#browser automation#ffmpeg#chrome#screen recording#keystrokes#cursor overlay#webreel
One-click install
npx skills add https://github.com/vercel-labs/webreel --skill webreel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webreel
Source: https://github.com/vercel-labs/webreel/tree/main/skills/webreel
Command: npx skills add https://github.com/vercel-labs/webreel --skill webreel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

webreel removes the manual effort of capturing browser demonstrations by turning a structured JSON step plan into a finished video with realistic cursor movement, keystroke overlays, sound effects, and encoding handled for you.

Core Features & Use Cases

  • Scripted browser recordings: Drive a headless Chrome session through clicks, typing, drags, scrolling, navigation, and pauses to create reproducible demos.
  • Professional video output: Render recordings as MP4, GIF, or WebM with overlays, themes, thumbnails, and frame-rate control.
  • Workflow support: Preview steps in a visible browser, validate configs, composite overlays onto existing captures, and reuse shared step files for repeatable production.
  • Use case: Create product walkthroughs, onboarding videos, feature teasers, UI tutorials, and mobile or desktop app demos without manually editing screen recordings.

Quick Start

Create a webreel config for your target site, preview the steps to confirm the interaction flow, and then record the final video.

Frequently Asked Questions about webreel

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

FAQPage Schema
How do I automate browser screen recording for product demos?▼

Yes, you can add keystroke overlays and cursor animation to browser recordings by defining interaction steps in a JSON config, which automatically renders realistic cursor movement and keystroke visuals during the video encoding process.

What is the best way to create scripted UI walkthrough videos?▼

The best way to create scripted UI walkthrough videos is using deterministic browser automation that processes JSON step configs to control navigation, pauses, and viewport size, outputting consistent MP4, GIF, or WebM files every time.

Can I use headless Chrome and ffmpeg to generate onboarding clips?▼

Yes, you can use headless Chrome and ffmpeg to generate onboarding clips by driving a headless browser session with structured configurations and letting the integrated encoding handle the final video output with overlays and themes.

How do I validate browser interaction steps before recording a video?▼

You can validate browser interaction steps before recording by previewing the configured flow in a visible browser window, allowing you to confirm the interaction sequence and viewport control before rendering the final MP4, GIF, or WebM output.

Does deterministic browser automation support drag-and-drop and scrolling for tutorials?▼

Deterministic browser automation supports drag-and-drop and scrolling for tutorials by executing structured JSON step configs that explicitly define these actions, ensuring the resulting UI tutorial recordings are perfectly reproducible.

Related Skills

Explore More Software Engineering Skills→
MCERQUAMCERQUA
1

browser-automation

Automate website navigation, screenshots, form filling, and content scraping with Puppeteer.

Community
Intermediate
exiaoexiao
37

demo-video

Record browser interactions and encode frames into MP4, GIF, or WebM videos.

Community
Intermediate
FreedomLabNYCFreedomLabNYC

programmatic-video

Generate deterministic video content using Three.js, Remotion, and FFmpeg.

Official
Advanced
digitalsambadigitalsamba
1.9k

elevenlabs

Generate AI voiceovers, sound effects, and music via ElevenLabs APIs.

Official
Intermediate