skills.rest
acidsound
acidsoundCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

screenshot-generator

Automate web application screenshots across device viewports using Playwright.

Updated Jan 25, 2026
Search Tags:#automation#testing#documentation#web development#playwright#screenshot
One-click install
npx skills add https://github.com/acidsound/acidApps --skill screenshot-generator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
AkhilGurrapuAkhilGurrapu
1

webapp-testing

Automate end-to-end testing of local web applications with Python Playwright.

Community
Intermediate
DexploarerDexploarer
6

visual-regression-test-setup

Configure screenshot-based visual regression testing pipelines for web applications.

Community
Intermediate
ddmanyesddmanyes

webapp-testing

Automate end-to-end testing of local web applications with Playwright.

Community
Intermediate
gsarmaonlinegsarmaonline

screenshotify

Automate full-page screenshots across viewports using Puppeteer or Playwright for frontend applications.

Community
Advanced