Webreel
Record scripted product walkthroughs and landing-page demos as shareable videos from JSON configs instead of manual screen capture.
Overview
Webreel is an agent skill most often used in Launch (also Build docs, Grow content) that turns declarative JSON step lists into scripted browser demo videos for product distribution.
Install
npx skills add https://github.com/vercel-labs/webreel --skill webreelWhat is this skill?
- JSON schema at webreel.dev with per-video viewport, zoom, waitFor, and step sequences
- Step actions include pause, click (selector or text), type with charDelay, and drag-and-drop flows
- Minimal hello-world, form-filling, and kanban drag-drop config patterns in the skill readme
- Local file URLs (e.g. ./web/index.html) for repeatable demos without live staging dependencies
- defaultDelay and per-step delay/ms for timing control in marketing-grade recordings
- 3 config examples in skill readme: hello-world, form-filling, drag-and-drop
Adoption & trust: 102 installs on skills.sh; 883 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need consistent product demo footage every time the UI changes, but manual screen recording is slow and hard to reproduce.
Who is it for?
Solo builders shipping web UIs who want README, landing-page, or social clips driven by config files beside their static demo HTML.
Skip if: Teams needing cross-browser E2E test suites, flaky-selector debugging at scale, or native mobile app capture without a web surface.
When should I use this skill?
You need a repeatable browser demo video defined as JSON steps (navigate, wait, click, type, drag) for marketing or docs.
What do I get? / Deliverables
You get check-in friendly webreel configs that replay the same clicks, typing, and pauses so agents or CI can regenerate launch-ready reels on demand.
- webreel.json video definitions
- Rendered demo reel video output from configured steps
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Promo reels and launch clips are the primary shelf; the same configs also support grow-phase content and build-phase docs demos. Distribution covers shipping narrative assets to social, README embeds, and launch channels—exactly what declarative web-reel steps produce.
Where it fits
Script a short reel over a local index.html to show investors a clickable prototype without deploying.
Regenerate README embed demos whenever form copy or CTA selectors change in your static demo site.
Export a hello-world or sign-in flow clip for Product Hunt or social posts from the same config as your docs.
Refresh onboarding videos after a UI refresh by editing JSON steps instead of re-filming.
How it compares
Use for scripted marketing reels from JSON—not as a Playwright/Cypress replacement for ship-phase QA gates.
Common Questions / FAQ
Who is webreel for?
Indie and solo web builders who maintain their own demo pages and want agent-assisted authoring of repeatable video walkthrough configs for launch and content.
When should I use webreel?
At launch for distribution clips, during grow for content refresh, or in build/docs when you need embedded demos—anytime you can express the flow as pause, click, type, or drag steps on a URL.
Is webreel safe to install?
Treat it like any community skill: review the Security Audits panel on this Prism page and inspect what URLs and local paths your configs load before running automated browser sessions.
SKILL.md
READMESKILL.md - Webreel
# webreel config examples ## Minimal hello-world The simplest possible config. Navigates to a page, waits for it to load, then clicks a link. ```json { "$schema": "https://webreel.dev/schema/v1.json", "videos": { "hello-world": { "url": "./web/index.html", "viewport": { "width": 1920, "height": 1080 }, "zoom": 2, "waitFor": ".cta", "steps": [ { "action": "pause", "ms": 500 }, { "action": "click", "selector": "a.cta", "delay": 1000 } ] } } } ``` ## Form filling Type into inputs with character-by-character animation, then click submit. ```json { "$schema": "https://webreel.dev/schema/v1.json", "videos": { "form-filling": { "url": "./web/index.html", "viewport": { "width": 1920, "height": 1080 }, "zoom": 2, "waitFor": "#email", "defaultDelay": 300, "steps": [ { "action": "pause", "ms": 500 }, { "action": "type", "text": "user@example.com", "selector": "#email", "charDelay": 40 }, { "action": "type", "text": "supersecret123", "selector": "#password", "charDelay": 30, "delay": 500 }, { "action": "click", "text": "Sign In" }, { "action": "pause", "ms": 2500 } ] } } } ``` ## Drag and drop Move items between containers on a kanban board. ```json { "$schema": "https://webreel.dev/schema/v1.json", "videos": { "drag-and-drop": { "url": "./web/index.html", "viewport": { "width": 1920, "height": 1080 }, "zoom": 2, "waitFor": ".board", "steps": [ { "action": "pause", "ms": 500 }, { "action": "moveTo", "text": "Write unit tests", "delay": 400 }, { "action": "drag", "from": { "text": "Write unit tests", "within": ".column-todo" }, "to": { "selector": ".card-list", "within": ".column-in-progress" }, "delay": 600 }, { "action": "drag", "from": { "text": "Build API endpoints", "within": ".column-in-progress" }, "to": { "selector": ".card-list", "within": ".column-done" }, "delay": 1000 } ] } } } ``` ## Keyboard shortcuts Demonstrate key combos in a text editor. ```json { "$schema": "https://webreel.dev/schema/v1.json", "videos": { "keyboard-shortcuts": { "url": "./web/index.html", "viewport": { "width": 1920, "height": 1080 }, "zoom": 2, "waitFor": ".editor", "defaultDelay": 600, "steps": [ { "action": "pause", "ms": 500 }, { "action": "click", "selector": ".editor" }, { "action": "key", "key": "cmd+a" }, { "action": "key", "key": "cmd+b", "delay": 800 }, { "action": "click", "selector": ".editor p:first-of-type" }, { "action": "key", "key": "cmd+s", "delay": 1200 }, { "action": "key", "key": "cmd+k", "delay": 1000 }, { "action": "key", "key": "Escape", "delay": 800 }, { "action": "pause", "ms": 500 } ] } } } ``` ## Custom theme Override the cursor image and keystroke HUD appearance. ```json { "$schema": "https://webreel.dev/schema/v1.json", "theme": { "cursor": { "image": "./cursor.svg", "size": 32, "hotspot": "center" }, "hud": { "background": "rgba(30, 41, 59, 0.85)", "color": "#e2e8f0", "fontSize": 48, "fontFamily": "\"SF Mono\", \"Fira Code\", monospace", "borderRadius": 12, "position": "top" } }, "videos": { "custom-theme": { "url": "./web/index.html", "viewport": { "width": 1920, "height": 1080 }, "zoom": 2, "waitFor": ".editor", "defaultDelay": 400, "steps": [ { "action": "pause", "ms": 500 }, { "action": "click", "text": "config.ts" }, { "action": "click", "text": "utils.ts", "delay": 800 }, { "action": "key", "