skills.rest
MacPhobos
MacPhobosCOMMUNITY
Explore all skills by this author →
GitHub

Screenshot-Based UI Verification

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

Updated Jan 30, 2026
Search Tags:#code review#pull request#responsive design#playwright#visual testing#screenshot#ui verification
One-click install
npx skills add https://github.com/MacPhobos/research-mind --skill screenshot-based-ui-verification
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Screenshot-Based UI Verification
Source: https://github.com/MacPhobos/research-mind/tree/main/.claude/skills/universal-verification-screenshot
Command: npx skills add https://github.com/MacPhobos/research-mind --skill screenshot-based-ui-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the code review process by providing a standardized way to visually verify UI changes, catching responsive design issues and design discrepancies early without requiring reviewers to set up a local development environment.

Core Features & Use Cases

  • Automated Screenshot Capture: Generate screenshots across multiple viewports (desktop, tablet, mobile) using browser DevTools or CLI tools like Playwright/Puppeteer.
  • PR Description Template: Provides a structured Markdown template to easily embed screenshots and document visual changes, responsive behavior, and accessibility notes.
  • CI Integration: Offers examples for integrating screenshot testing into CI/CD pipelines using GitHub Actions and tools like Playwright or Chromatic for Storybook.
  • Use Case: When submitting a pull request for a new feature that modifies the user interface, use this skill to automatically capture screenshots of the changes on desktop, tablet, and mobile, and embed them directly into the PR description for immediate reviewer feedback.

Quick Start

Use the screenshot skill to capture desktop, tablet, and mobile screenshots of the provided URL and generate a PR description.

Frequently Asked Questions about Screenshot-Based UI Verification

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

FAQPage Schema
How do I visually verify UI changes in a pull request without local setup?▼

You can visually verify UI changes by capturing screenshots across multiple viewports and embedding them directly into a structured PR description template, allowing reviewers to check responsive design without local setup.

Can I use Playwright and Puppeteer for automated screenshot capture in CI pipelines?▼

Playwright and Puppeteer support automated screenshot capture in CI pipelines by using CLI commands and browser DevTools to generate viewport screenshots for consistent visual regression testing.

What is the best way to document responsive design behavior in pull requests?▼

The best way to document responsive design behavior is using a structured Markdown template to embed desktop, tablet, and mobile screenshots alongside accessibility notes directly in the pull request description.

Does this visual testing workflow integrate with GitHub Actions and Storybook?▼

This visual testing workflow integrates with GitHub Actions and tools like Chromatic for Storybook, providing CI/CD pipeline examples to automate screenshot capture and visual regression checks.

How do I add visual regression testing to catch design discrepancies early?▼

Add visual regression testing by automating screenshot capture across desktop, tablet, and mobile viewports, then embedding the results in PR descriptions to identify design discrepancies early.

Related Skills

Explore More Software Engineering Skills→
probationer070probationer070

browse

Automate web application testing with Playwright headless browser interactions.

Community
Advanced
assertchrisassertchris
2

custom-submit-pr

Create a GitHub pull request with the gh CLI and assign it to assertchris.

Community
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate