Web Render Screenshot

Generate ultra-high-resolution screenshots from HTML content using Playwright. Default 4x device scale factor produces crisp, pixel-perfect output ideal for...

Security Scan

The skill's code and instructions match its stated purpose (rendering HTML to high‑resolution screenshots with Playwright); there are no disproportionate permissions or hidden endpoints, though dependencies are not declared and rendering remote/untrusted pages has the usual risks.

Purpose & Capability

Name/description describe converting HTML to high-resolution screenshots. The included script uses Playwright Chromium and Pillow (optional) to produce PNG/JPEG output, which is directly aligned with the stated purpose. No unrelated credentials, binaries, or capabilities are requested.

Instruction Scope

SKILL.md and the script limit actions to loading HTML (file:// or http/https), rendering in headless Chromium, waiting, and saving an image. There are no instructions to read unrelated system files, access secrets, or transmit captures to third-party endpoints. The guidance to use Telegram's --force-document is platform-specific but expected for delivery.

Install Mechanism

This is an instruction-only skill with no install spec. The runtime requires Python packages (playwright and its browser install step; PIL/Pillow is optional). The SKILL.md and script mention how to install Playwright but do not declare dependencies formally—this is not malicious but is a missing packaging detail you should be prepared to handle (pip install playwright; playwright install chromium; pip install pillow if you want image metadata).

Credentials

No environment variables, credentials, or config paths are requested or accessed. The script does not read secrets or external credentials.

Persistence & Privilege

The skill does not request persistent/system privileges and does not set always:true. It only runs when invoked and does not modify other skills or global agent settings.

Assessment

This skill appears to do what it says: render HTML to high-resolution images. Before installing/use: (1) Be prepared to install Playwright and run 'playwright install chromium' and optionally Pillow; the skill does not declare these dependencies formally. (2) Rendering remote or untrusted HTML will execute that page's JavaScript inside headless Chromium and may cause network requests—avoid rendering sensitive pages or pages that require logged-in sessions unless you understand the risk. (3) The script writes output files to disk (ensure sufficient disk/CPU for large images). (4) If you need stricter guarantees, review the script (it's small and readable) and consider running it in an isolated environment/container to limit side effects.

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use

Scenario	Use This Skill	Use AI Image Gen Instead
Website UI / mockup	✅	❌
Dashboard / data viz	✅	❌
Text-heavy infographic	✅	❌
Weather/finance/news page	✅	❌
Artistic illustration	❌	✅
Photorealistic scene	❌	✅

Rule: If it has text that must be readable → use this skill.

Quick Start

Step 1: Create the HTML

Write a self-contained HTML file with inline CSS. Guidelines:

• Use system fonts or Google Fonts CDN for Chinese support: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
• All styles inline (no external CSS files)
• Design for the target viewport (default: 1920×1080)
• Use emoji for icons when appropriate (universally supported)
• Ensure overflow: hidden on body if single-viewport capture is desired

Step 2: Take the Screenshot

Use the bundled script:

python3 scripts/screenshot.py <input.html> [output.png] [options]

Or inline Python when the script cannot be invoked directly:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1920, "height": 1080},
        device_scale_factor=4,  # 4x ultra-high res (default)
    )
    page.goto("file:///path/to/input.html", wait_until="networkidle")
    page.wait_for_timeout(1000)
    page.screenshot(path="output.png", full_page=True)
    browser.close()

Step 3: Deliver

Output MEDIA:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters

Parameter	Default	Description
device_scale_factor	4	Ultra-high resolution (4x). Output = viewport × 4
viewport.width	1920	CSS pixel width
viewport.height	1080	CSS pixel height
full_page	true	Capture entire scrollable content
wait	1000ms	Wait after page load for rendering
format	png	Lossless output (use jpeg for smaller files)

Resolution Reference

Scale	Output for 1920×1080 viewport	File Size (typical)	Use Case
1x	1920×1080	~100KB	Draft / preview
2x	3840×2160	~1-2MB	Standard high-res
3x	5760×3240	~3-5MB	High-quality print
4x	7680×4320	5-8MB	Ultra-high (default)

Script Options

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips

1. Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
2. Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3. Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
4. Chinese fonts: Always include fallback chain for cross-platform rendering
5. Emoji icons: Use emoji for weather/status/category icons — they render at any scale
6. Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.