web-screenshot

What This Skill Does

The web-screenshot skill is a professional-grade automated tool designed for OpenClaw agents to capture visual documentation of web applications. Built on top of Puppeteer and headless Chromium, it enables agents to take high-resolution snapshots of local or remote web interfaces. Unlike simple scrapers, this tool includes robust support for Single Page Applications (SPAs) built with frameworks like Vue, React, or Angular. It features a specialized login handler that manages form-based authentication, ensuring the agent can bypass gated content and capture protected dashboards, project management portals, or administration panels. Every execution produces a standardized collection of PNG files coupled with a metadata-rich 'result.json' file, which includes page titles, URLs, and custom descriptions for systematic reporting.

Installation

To deploy this skill, ensure your environment has Node.js and Chromium installed. You can verify your dependencies by running 'which chromium-browser' and 'npm ls -g puppeteer-core'. Install the skill using the OpenClaw command: 'clawhub install openclaw/skills/skills/aowind/sjht-web-screenshot' Once installed, you can trigger the script directly via 'node <skill_dir>/scripts/screenshot.js <config.json>'. Ensure that your configuration file accurately maps the selectors for your target application's login form to prevent automation failure.

Use Cases

This skill is perfect for automated QA reporting, where a developer needs to visualize the current state of a build. It is also highly effective for creating technical documentation, allowing agents to capture interface changes during a deployment pipeline. Teams can use it to maintain 'live' visual records of project management dashboards for stakeholders who lack direct system access, or to document web application states for audit trails and compliance tracking.

Example Prompts

1. 'Please run a screenshot capture for the staging environment using the login credentials stored in the project config file and output the results to my docs folder.'
2. 'I need to generate a visual report of the current dashboard and the user settings page; can you trigger the web-screenshot agent for me?'
3. 'Generate a documentation package including screenshots of the primary project list view and verify that the UI components render correctly.'

Tips & Limitations

For complex SPAs, always ensure your selectors are precise; use stable IDs or specific CSS attributes rather than dynamic classes. If you experience timing issues, increase the 'waitMs' property in the page config to account for slow API responses or hydration delays. Note that this skill requires direct network access to the target URL; ensure your network configuration allows the agent to reach the specified base URL. Always store credentials in a secure configuration environment, as this skill performs direct form interactions.