skills.rest
bobmatnyc
bobmatnycCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

screenshot

Capture desktop, tablet, and mobile screenshots for UI verification.

68|19|Updated Nov 21, 2025
Search Tags:#ui#code review#screenshots#responsive design#verification#visual testing
One-click install
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill screenshot-bobmatnyc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot
Source: https://github.com/bobmatnyc/claude-mpm-skills/tree/main/universal/verification/screenshot
Command: npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill screenshot-bobmatnyc

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines UI development by providing a robust workflow for capturing and documenting visual changes through screenshots, accelerating code reviews and catching design inconsistencies early.

Core Features & Use Cases

  • Automated Screenshot Capture: Generate screenshots for desktop, tablet, and mobile viewports using tools like Playwright or Puppeteer.
  • PR Documentation: Provides a template for embedding screenshots and detailing visual changes in pull requests.
  • Use Case: When you update a website's header component, use this Skill to capture screenshots of the header on desktop, tablet, and mobile, then include them in your PR description to show reviewers exactly how the changes look across different devices.

Quick Start

Use the screenshot skill to capture desktop, tablet, and mobile views of the provided URL.

Frequently Asked Questions about screenshot

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

FAQPage Schema
How do I capture screenshots across multiple viewport sizes for responsive design verification?▼

To capture screenshots for responsive design verification, you can automate visual testing across desktop, tablet, and mobile viewports using Playwright or Puppeteer. This generates standardized visual documentation for your UI changes.

What is the best way to document UI changes in a pull request?▼

The best way to document UI changes in a pull request is to embed screenshots of desktop, tablet, and mobile views alongside a detailed description. This provides visual verification and shows reviewers exactly how the changes look across devices.

Does this screenshot tool require Playwright or Puppeteer?▼

Yes, this screenshot tool requires either Playwright or Puppeteer as a dependency. These frameworks are necessary for programmatic screenshot generation and automated visual testing across different viewport sizes.

Can I automate visual testing for code review?▼

Yes, you can automate visual testing for code review by capturing screenshots across multiple viewport sizes and embedding them in PR descriptions. This standardizes visual documentation and catches design inconsistencies early.

How do I validate responsive design changes across different devices?▼

You validate responsive design changes by automating screenshot capture across desktop, tablet, and mobile viewports. This process generates visual documentation that facilitates code review and catches design inconsistencies early.

Related Skills

Explore More Design & Creative Skills→
byeSystem32byeSystem32

agent-browser

Automate web interactions via command-line browser automation commands.

Community
Advanced
MacPhobosMacPhobos

Screenshot-Based UI Verification

Capture UI screenshots across multiple viewports and generate pull request descriptions.

Community
Intermediate
NVIDIA-NeMoNVIDIA-NeMo
58

visual-dev

Automate visual regression testing and UI implementation with Playwright MCP browser automation.

Official
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate