Cloudflare Browser Agent Skill
Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser automation is needed in a Cloudflare Workers environment. Requires CDP_SECRET env var and cdpUrl configured in browser.profiles.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/cloudflare/moltworker --skill cloudflare-browserWhat comes with it
12 276 bytes besides the instructionThe instruction itself
13 sections, as written by the authorCloudflare Browser Rendering
Control headless browsers via Cloudflare's Browser Rendering service using CDP (Chrome DevTools Protocol) over WebSocket.
Prerequisites
CDP_SECRETenvironment variable set- Browser profile configured in openclaw.json with
cdpUrlpointing to the worker endpoint:
"browser": {
"profiles": {
"cloudflare": {
"cdpUrl": "https://your-worker.workers.dev/cdp?secret=..."
}
}
}
Quick Start
Screenshot
node /path/to/skills/cloudflare-browser/scripts/screenshot.js https://example.com output.png
Multi-page Video
node /path/to/skills/cloudflare-browser/scripts/video.js "https://site1.com,https://site2.com" output.mp4
CDP Connection Pattern
The worker creates a page target automatically on WebSocket connect. Listen for Target.targetCreated event to get the targetId:
const WebSocket = require('ws');
const CDP_SECRET = process.env.CDP_SECRET;
const WS_URL = `wss://your-worker.workers.dev/cdp?secret=${encodeURIComponent(CDP_SECRET)}`;
const ws = new WebSocket(WS_URL);
let targetId = null;
ws.on('message', (data) => {
const msg = JSON.parse(data.toString());
if (msg.method === 'Target.targetCreated' && msg.params?.targetInfo?.type === 'page') {
targetId = msg.params.targetInfo.targetId;
}
});
Key CDP Commands
| Command | Purpose |
|---------|---------|
| Page.navigate | Navigate to URL |
| Page.captureScreenshot | Capture PNG/JPEG |
| Runtime.evaluate | Execute JavaScript |
| Emulation.setDeviceMetricsOverride | Set viewport size |
Common Patterns
Navigate and Screenshot
await send('Page.navigate', { url: 'https://example.com' });
await new Promise(r => setTimeout(r, 3000)); // Wait for render
const { data } = await send('Page.captureScreenshot', { format: 'png' });
fs.writeFileSync('out.png', Buffer.from(data, 'base64'));
Scroll Page
await send('Runtime.evaluate', { expression: 'window.scrollBy(0, 300)' });
Set Viewport
await send('Emulation.setDeviceMetricsOverride', {
width: 1280,
height: 720,
deviceScaleFactor: 1,
mobile: false
});
Creating Videos
- Capture frames as PNGs during navigation
- Use ffmpeg to stitch:
ffmpeg -framerate 10 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
Troubleshooting
- No target created: Race condition - wait for Target.targetCreated event with timeout
- Commands timeout: Worker may have cold start delay; increase timeout to 30-60s
- WebSocket hangs: Verify CDP_SECRET matches worker configuration
Other skills for the same job
different authors, same section of the catalogue
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
Automate Anchor Browser tasks via Rube MCP (Composio). Always search tools first for current schemas.
Automate Browser Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.
Get Image [from] Internet Link - Zero-setup CLI for downloading full-resolution images from iCloud, Dropbox, Google Photos, and Google Drive share links. Four-tier capture strategy, browser automation, HEIC conversion, album support. Node.js/Playwright.
Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.
How to use it
Take cloudflare/cloudflare-browser from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.