How does this skill capture screenshots?

It utilizes integrated browser automation tools to resize the viewport, navigate to specific pages, and take snapshots of either the full screen or specific UI components.

What viewport sizes are supported?

The skill includes standard recommendations for Mobile (320px), Tablet (768px), Desktop (1280px), and Wide (1440px) to ensure your UI looks great on all devices.

Where are the screenshots stored?

The skill provides workflows for uploading images to ephemeral hosting like 0x0.st or permanent project-specific storage, providing URLs that can be embedded directly into GitHub PRs.

Does this work with my existing PR workflow?

Yes, it is designed to complement standard git commands and works best when used immediately before creating a pull request to provide visual context for your changes.

PR Screenshot Documenter

Name: PR Screenshot Documenter
Author: majesticlabs-dev

bymajesticlabs-dev

•

Collaboration Tools

Captures and documents UI changes with before-and-after screenshots to streamline visual reviews in pull requests.

This skill enhances the code review process by automating the capture of UI modifications across various viewports. It provides a standardized workflow for taking consistent 'before' and 'after' screenshots, ensuring that design changes are clearly communicated to reviewers without requiring them to run the application locally. By integrating directly into the pull request workflow, it helps maintain a visual record of project evolution while facilitating faster, asynchronous design approvals through organized markdown templates and responsive design testing presets.

Key Features

01Automated before-and-after visual comparison capture

02Ready-to-use Markdown templates for PR descriptions

03Element-specific screenshot targeting via browser automation

049 GitHub stars

05Standardized viewport presets for Mobile, Tablet, and Desktop testing

06Seamless integration with git-based pull request workflows

Use Cases

01Documenting frontend UI/UX changes for professional code reviews

02Visual regression testing during the development of responsive components

03Building a historical record of design evolution within project documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add majesticlabs-dev/majestic-marketplace pr-screenshot-docs

For use in Claude.ai and ChatGPT

Download Skill