screenshot-generator

Automate web application screenshots across device viewports using Playwright.

Updated Jan 25, 2026

Search Tags:#automation #testing #documentation #web development #playwright #screenshot

Ready to run

npx skills add https://github.com/acidsound/acidApps --skill screenshot-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: screenshot-generator
Source: https://github.com/acidsound/acidApps/tree/main/skills/screenshot-generator
Command: npx skills add https://github.com/acidsound/acidApps --skill screenshot-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, http-server, and includes scripts (resource) and examples (resource) components.

What problem does it solve?

This Skill automates the process of capturing screenshots for web applications, eliminating the need for manual intervention and ensuring consistent visual documentation.

Core Features & Use Cases

Automated Screenshot Generation: Captures desktop, mobile landscape, and mobile portrait views of web applications.
Component-Level Capture: Generates screenshots of specific UI elements like headers, pads, and knobs for detailed documentation.
Use Case: When updating your project's README, use this Skill to quickly generate up-to-date screenshots of your application's main interface and key components, ensuring your documentation is always current.

Quick Start

Run the screenshot generator script from your project's root directory to capture default screenshots.

Frequently Asked Questions about screenshot-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate web app screenshots for documentation?▼

To automate web app screenshots, you can use this Skill to capture desktop, mobile landscape, and mobile portrait views automatically. It eliminates manual intervention, ensuring your README and visual documentation remain consistently up-to-date.

Can I capture individual UI components like headers and knobs with Playwright?▼

Yes, you can capture individual UI components using this Skill. It supports component-level capture for specific elements like headers, pads, and knobs, generating detailed screenshots for your project documentation.

What is the best way to generate multi-viewport screenshots for local web development?▼

The best way to generate multi-viewport screenshots is by using this Skill, which utilizes Playwright for browser automation and http-server for local development simulation, capturing desktop and mobile views automatically.

Does the screenshot generator support both mobile portrait and landscape formats?▼

Yes, the screenshot generator supports both mobile portrait and landscape formats. It also captures standard desktop views, allowing you to automate visual documentation across multiple device viewports simultaneously.

Do I need a local development server running to capture web application screenshots?▼

You need a local development environment to capture web application screenshots effectively. This Skill includes http-server to simulate your local development environment, enabling Playwright to accurately capture your application's interface.