skills.rest
vathymut
vathymutCOMMUNITY
Explore all skills by this author →
Website𝕏@vathymutGitHub

ui-screenshots

Capture web and desktop app screenshots with Playwright and section cropping.

Updated Apr 19, 2026
Search Tags:#web development#Playwright#screenshot#UI documentation#image capture
One-click install
npx skills add https://github.com/vathymut/copilot-skills --skill ui-screenshots-vathymut
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-screenshots
Source: https://github.com/vathymut/copilot-skills/tree/main/.github/skills/ui-screenshots
Command: npx skills add https://github.com/vathymut/copilot-skills --skill ui-screenshots-vathymut

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of capturing screenshots of web applications during development, enabling users to document visual changes, capture interactive states, and select specific sections without re-screenshotting.

Core Features & Use Cases

  • Full-Page and Section-Specific Screenshots: Capture the entire page or specific sections for detailed documentation.
  • Interactive States: Support for capturing tooltips, hovers, and selected elements.
  • Iterate-on-Crop Workflow: Efficiently crop images after initial capture for a clean, final output.
  • Web and Desktop App Support: Offers solutions for capturing screenshots from both web and desktop applications.

Quick Start

Run the skill by providing the URL of the web app you want to screenshot: ui-screenshots https://your-app-url.com.

Frequently Asked Questions about ui-screenshots

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

FAQPage Schema
How do I capture screenshots of web apps with interactive states like hovers and tooltips?▼

You can capture interactive states by using Playwright to trigger hovers and tooltips before taking the screenshot. This allows you to document dynamic UI elements accurately without manual cropping.

What is the best way to take section-specific screenshots for UI documentation?▼

The best way to take section-specific screenshots for UI documentation is to use an iterate-on-crop workflow. Capture the full page first, then efficiently crop specific sections to get a clean output without needing to re-screenshot the application.

Do I need Playwright to capture screenshots of web applications?▼

Yes, you need Playwright to capture web app screenshots. It provides the browser automation required to navigate URLs, trigger interactive states, and render pages for image capture.

Can I capture screenshots of desktop applications or is it limited to web apps?▼

You can capture screenshots of desktop applications, but it requires additional tools beyond Playwright. The solution offers support for both web and desktop apps to accommodate different software development workflows.

How do I automate visual change tracking during web development?▼

Automate visual change tracking by capturing full-page screenshots of your web app at different development stages. You can document visual changes over time by capturing specific sections and interactive states without manual re-screenshotting.

Related Skills

Explore More Software Engineering Skills→
thilak0105thilak0105

dev-browser

Automate browser navigation, form interaction, and data extraction via Playwright.

Community
Advanced
seanyofthedeadseanyofthedead

ui-visual-regression

Compare screenshots and network requests between a branch and its merge base.

Community
Advanced
Umbral-BotUmbral-Bot

pillow-imaging

Automate image processing tasks with Pillow for batch resizing and watermarking.

Official
Intermediate
shirulotshirulot

screenshot

Capture desktop screenshots across macOS, Windows, and Linux using native system utilities.

Community
Intermediate