AgentToolHub
Skill

webreel

webreel — a Claude Code skill from vercel-labs/webreel

Features

  • ✓Record browser actions as MP4 videos
  • ✓Customize cursor and keystroke overlays
  • ✓Automatically download Chrome and ffmpeg
  • ✓Define steps with JSON config for precise recording
  • ✓Explore examples for diverse use cases
  • ✓Check out [webreel on GitHub](https://github.com/vercel-labs/webreel)

Installation Guide

Download Chrome and ffmpeg to ~/.webreel. Both are also auto-downloaded on first run. Use --force to fix corrupted or broken binaries.

bash
webreel install
webreel install --force

Validate

Check config files for errors without running them:

bash
webreel validate
webreel validate -c custom.config.json

Help and Version

bash
webreel --help
webreel --version
webreel record --help

Actions

| Action | Fields | Description |
| ------------ | ------------------------------------------------------ | ------------------------------------ |
| pause | ms | Wait for a duration |
| click | text or selector, optional within, modifiers | Move cursor to an element and click |
| key | key (e.g. "cmd+z"), optional label | Press a key or key combo |
| type | text, optional target, charDelay | Type text character by character |
| scroll | optional x, y, selector | Scroll the page or an element |
| wait | selector or text, optional timeout | Wait for an element to appear |
| screenshot | output | Capture a PNG screenshot |
| drag | from and to (each with text/selector/within) | Drag from one element to another |
| moveTo | text or selector, optional within | Move cursor to an element |
| navigate | url | Navigate to a new URL mid-video |
| hover | text or selector, optional within | Hover over an element (triggers CSS) |
| select | selector, value | Select a value in a dropdown |

All steps (except pause) accept an optional delay field (ms to wait after the step). Use defaultDelay at the top-level or per-video to set a default.

Config options

#### Top-level

| Field | Default | Description |
| -------------- | --------- | -------------------------------------------- |
| $schema | - | JSON Schema URL for IDE autocompletion |
| outDir | videos/ | Default output directory for videos |
| baseUrl | "" | Prepended to relative video URLs |
| viewport | 1080x1080 | Default browser viewport dimensions |
| theme | - | Default cursor and HUD overlay customization |
| include | - | Array of step files prepended to all videos |
| defaultDelay | - | Default delay (ms) after each step |
| videos | required | Object mapping video names to their configs |

#### Per-video

| Field | Default | Description |
| -------------- | ------------- | ------------------------------------------------------ |
| url | required | URL to navigate to |
| baseUrl | inherited | Prepended to relative URLs |
| viewport | inherited | Browser viewport dimensions |
| zoom | - | CSS zoom level applied to the page |
| waitFor | - | CSS selector to wait for before start |
| output | <name>.mp4 | Output file path (.mp4, .gif, or .webm) |
| thumbnail | { time: 0 } | Object with time (seconds) or enabled: false |
| include | inherited | Array of paths to JSON files whose steps are prepended |
| theme | inherited | Cursor and HUD overlay customization |
| defaultDelay | inherited | Default delay (ms) after each step |

Reviews