Add headless Chrome automation with Puppeteer/Playwright on Cloudflare Workers. Use when: taking screenshots, generating PDFs, web scraping, crawling sites, browser automation, or troubleshooting XPath errors, browser timeouts, binding not passed errors, or session limits.
Auto-Discovery Skill for Claude Code CLI
Complete knowledge domain for Cloudflare Browser Rendering - Headless Chrome automation with Puppeteer and Playwright on Cloudflare Workers.
Claude will automatically suggest this skill when you mention any of these keywords:
| Issue | Error Message | How Skill Prevents | |-------|---------------|-------------------| | XPath Not Supported | "XPath selector not supported" | Templates use CSS selectors or page.evaluate() workaround | | Missing Browser Binding | "Cannot read properties of undefined (reading 'fetch')" | Always passes env.MYBROWSER to puppeteer.launch() | | Browser Timeout | Browser closes after 60s | Documents keep_alive option to extend up to 10 minutes | | Concurrency Limits | "Rate limit reached" | Session reuse patterns, limit checks before launching | | Local Dev Limit | Requests > 1MB fail in dev | Documents remote: true for local development | | Bot Protection | Website blocks requests | Explains bot identification, WAF skip rule workaround |
Savings: ~62% token reduction (5,600 tokens saved)
# Configure wrangler.jsonc
{
"browser": { "binding": "MYBROWSER" },
"compatibility_flags": ["nodejs_compat"]
}
# Install
npm install @cloudflare/puppeteer
import puppeteer from "@cloudflare/puppeteer";
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.goto("https://example.com");
const screenshot = await page.screenshot();
await browser.close();
return new Response(screenshot, {
headers: { "content-type": "image/png" }
});
}
};
~/.claude/skills/cloudflare-browser-rendering/
├── SKILL.md # Complete reference
├── README.md # This file (auto-trigger keywords)
├── templates/
│ ├── basic-screenshot.ts # Minimal screenshot example
│ ├── screenshot-with-kv-cache.ts # Screenshot + KV caching
│ ├── pdf-generation.ts # PDF generation from HTML/URL
│ ├── web-scraper-basic.ts # Basic web scraping
│ ├── web-scraper-batch.ts # Batch scraping multiple URLs
│ ├── session-reuse.ts # Session reuse pattern
│ ├── ai-enhanced-scraper.ts # Scraping + Workers AI
│ ├── playwright-example.ts # Playwright alternative
│ └── wrangler-browser-config.jsonc # Browser binding config
├── references/
│ ├── session-management.md # Session optimization guide
│ ├── pricing-and-limits.md # Complete pricing breakdown
│ ├── common-errors.md # All known issues + solutions
│ └── puppeteer-vs-playwright.md # Feature comparison
└── scripts/
└── check-versions.sh # Verify package versions
cloudflare-worker-base - Base Worker + Hono setupcloudflare-kv - KV caching for screenshotscloudflare-r2 - R2 storage for generated filescloudflare-workers-ai - AI-enhanced scrapingcloudflare-agents - Agent SDK with browser renderingFree Tier:
Paid Tier:
See references/pricing-and-limits.md for detailed breakdown.
Status: Production Ready ✅ Last Updated: 2025-10-22 Maintainer: Jeremy Dawes (Jezweb)
npx skills add ovachiever/cloudflare-浏览器渲染下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer