cloudflare-browser
Automates headless browser tasks in Cloudflare Workers environments using the Chrome DevTools Protocol.
Install
mkdir -p .claude/skills/cloudflare-browser && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/6222" && unzip -o skill.zip -d .claude/skills/cloudflare-browser && rm skill.zipInstalls to .claude/skills/cloudflare-browser
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Controls headless Chrome page navigation via CDP
- →Captures visual assets including full-page screenshots
- →Streams multi-page browser sessions into video formats
- →Executes arbitrary JavaScript within the headless context
How it works
Communicates via WebSocket using the Chrome DevTools Protocol (CDP) to issue browser commands to the Cloudflare rendering service.
Inputs & outputs
When to use cloudflare-browser
- →Capture screenshots of web pages
- →Record multi-page browser sessions
- →Automate site navigation in Workers
- →Scrape dynamic content
About this skill
Cloudflare 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
When not to use it
- →Environments lacking Cloudflare Browser Rendering access
- →Applications requiring direct local browser interaction
Prerequisites
Limitations
- →Requires cloud rendering infrastructure and secret configuration
- →Limited by the Cloudflare Worker execution time boundaries
How it compares
Uses cloud-based rendering infrastructure instead of local browser automation (like standard Puppeteer/Playwright setups).
Compared to similar skills
cloudflare-browser side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| cloudflare-browser (this skill) | 1 | 6mo | Review | Advanced |
| dev-browser | 53 | 4mo | Review | Intermediate |
| opencode-cli | 14 | 7mo | Review | Advanced |
| claude-automation-recommender | 47 | 2mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by cloudflare
View all by cloudflare →You might also like
dev-browser
SawyerHood
Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.
opencode-cli
SpillwaveSolutions
This skill should be used when configuring or using the OpenCode CLI for headless LLM automation. Use when the user asks to "configure opencode", "use opencode cli", "set up opencode", "opencode run command", "opencode model selection", "opencode providers", "opencode vertex ai", "opencode mcp servers", "opencode ollama", "opencode local models", "opencode deepseek", "opencode kimi", "opencode mistral", "fallback cli tool", or "headless llm cli". Covers command syntax, provider configuration, Vertex AI setup, MCP servers, local models, cloud providers, and subprocess integration patterns.
claude-automation-recommender
anthropics
Analyze a codebase and recommend Claude Code automations (hooks, subagents, skills, plugins, MCP servers). Use when user asks for automation recommendations, wants to optimize their Claude Code setup, mentions improving Claude Code workflows, asks how to first set up Claude Code for a project, or wants to know what Claude Code features they should use.
mcp-integration
anthropics
This skill should be used when the user asks to "add MCP server", "integrate MCP", "configure MCP in plugin", "use .mcp.json", "set up Model Context Protocol", "connect external service", mentions "${CLAUDE_PLUGIN_ROOT} with MCP", or discusses MCP server types (SSE, stdio, HTTP, WebSocket). Provides comprehensive guidance for integrating Model Context Protocol servers into Claude Code plugins for external tool and service integration.
hook-development
anthropics
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.
agent-factory
alirezarezvani
Claude Code agent generation system that creates custom agents and sub-agents with enhanced YAML frontmatter, tool access patterns, and MCP integration support following proven production patterns