microsim-screen-capture

This skill provides a robust automated workflow for capturing high-fidelity screenshots of dynamic JavaScript-based visualizations, specifically designed for MicroSims. It addresses the common challenges of rendering web content in a non-interactive environment, ensuring that complex graphics from libraries like p5.js, vis-network.js, and Chart.js are fully loaded and rendered before the capture process occurs. By utilizing the power of Google Chrome in headless mode, the skill ensures that visual assets used for social media metadata (og:image), academic documentation, and quality assurance are consistent, professional, and optimized for performance.

• Automated capture of dynamic HTML content via Chrome headless mode with support for modern flags including --headless=new.

• Intelligent handling of asynchronous rendering, allowing for configurable timeout and render-time budgets for heavy visualizations.

• Seamless integration with MicroSim directory structures, ensuring images are correctly mapped to main.html files and saved in standardized formats.

• Enhanced browser security bypasses, specifically designed to permit cross-origin resource loading from external CDNs, essential for interactive educational simulations.

• Quality score alignment, providing direct support for the microsim-standardization workflow to ensure educational materials achieve high-quality metrics.

• Use this skill to generate social media previews for interactive textbooks to boost visual engagement.

• Generate archival screenshots for archival purposes or academic portfolios when building or maintaining intelligent textbooks.

• Integrate with CI/CD pipelines to verify that interactive simulations render correctly across different visual states.

• Practical constraints: Ensure Chrome or Chromium is correctly installed and referenced in the environment paths. If captures appear blank, increase the timeout parameter to accommodate network latency or library loading times. Use local servers for local development if file protocol restrictions impede external asset loading.