microsim-screen-capture_skill

Overview

This skill automates capturing high-quality screenshots of MicroSim visualizations using Chrome headless mode. It handles JavaScript-heavy renderings and external CDN resources, waits for content to finish rendering, and saves consistent preview images suitable for social metadata, documentation, and quality checks.

How this skill works

The tool validates the MicroSim directory and ensures main.html exists, then launches Chrome in headless mode with flags that allow file access and CDN loading. It waits a configurable timeout for JavaScript to render, captures a 1200x800 PNG named after the microsim directory, and reports the output path and file size. Flags and timeout are adjustable for complex visualizations.

When to use it

• Generate og:image previews for social sharing or metadata
• Create documentation or thumbnail images for MicroSims
• Capture visualizations for QA, archival, or reporting
• Convert main.html visual outputs into standardized PNG files
• Integrate with standardization workflows to improve quality scores

Best practices

• Keep MicroSim directories in docs/sims/{kebab-case-name} and include main.html
• Test main.html in a full browser first to confirm it renders locally
• Increase the timeout or use virtual-time-budget for complex async visualizations
• Use a local HTTP server if file:// loading causes resource issues
• Tune --window-size to match your target preview aspect ratio

Example use cases

• Capture a social preview image for an org-chart MicroSim before publishing
• Batch-generate thumbnails for a gallery of MicroSim visualizations
• Run in CI to verify visualizations render correctly as part of release checks
• Create documentation screenshots showing the finished visualization state
• Produce archival images for reproducibility and QA review