Screenshot-Based UI Verification

Community

Visually verify UI changes in PRs.

AuthorMacPhobos
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Screenshot-Based UI Verification
Download link: https://github.com/MacPhobos/research-mind/archive/main.zip#screenshot-based-ui-verification

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.