microsim-screen-capture
CommunityCapture high-quality MicroSim screenshots automatically.
Authorvishalsachdev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Manually taking screenshots of interactive, JavaScript-heavy MicroSims is inconsistent, time-consuming, and often fails to capture the fully rendered state or handle external CDN resources. This skill automates the process using Chrome headless, ensuring perfect, consistent captures.
Core Features & Use Cases
- Automated Screenshot Capture: Uses Chrome headless mode to capture high-quality PNG images of MicroSims.
- JavaScript & CDN Handling: Ensures visualizations with dynamic content and external libraries (p5.js, Chart.js) are fully rendered.
- Standardized Output: Saves screenshots with consistent naming (
{microsim-name}.png) and optimal dimensions for social media and documentation. - Use Case: A content creator needs a preview image for a new interactive physics MicroSim to share on social media and embed in documentation. This skill can generate a perfect screenshot with a single command.
Quick Start
Use the microsim-screen-capture skill to capture a screenshot of the 'bouncing-ball' MicroSim located at docs/sims/bouncing-ball.
Dependency Matrix
Required Modules
google-chrome
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: microsim-screen-capture Download link: https://github.com/vishalsachdev/database-management/archive/main.zip#microsim-screen-capture Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.