skills.rest
quanngynx
quanngynxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

before-and-after

Capture before-and-after screenshots from URLs and generate markdown comparisons.

Updated Mar 27, 2026
Search Tags:#markdown#pull request#screenshot comparison#before-after#web deployment#ui regression#visual diff
One-click install
npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill before-and-after-quanngynx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI/tree/main/servexa-warranty-ai/.agents/skills/before-and-after
Command: npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill before-and-after-quanngynx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It helps you document and verify UI changes by producing reliable before/after visual evidence that can be shared in reviews and PRs.

Core Features & Use Cases

  • Before/After screenshot capture: Generates two screenshots from two provided URLs or image paths for direct comparison.
  • Targeted element screenshots: Supports capturing specific page elements via CSS selectors rather than entire pages.
  • Responsive and full-page options: Allows mobile/tablet viewport captures or full-scroll captures for more complete UI validation.
  • Upload + share as markdown: Uploads the images and can output a markdown table suitable for PR descriptions, including optional clipboard copying.

Quick Start

Provide the production (before) and updated (after) URLs and ask the AI to generate a before/after screenshot comparison with markdown output for PR use.

Frequently Asked Questions about before-and-after

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

FAQPage Schema
How do I generate before and after screenshots for a pull request?▼

You can generate before and after screenshots for a pull request by providing the production and updated URLs, which captures both versions and outputs a markdown table for the PR body.

Can I capture specific UI elements instead of a full page for visual regression?▼

Yes, you can capture specific UI elements for visual regression by providing CSS selectors, targeting only the chosen components rather than rendering the entire web page.

What is the best way to document UI changes for release verification?▼

Documenting UI changes for release verification is best done by rendering two versions of a page side-by-side, capturing visual before-and-after evidence that can be shared directly in reviews.

Does the screenshot comparison tool support mobile and tablet viewports?▼

Yes, the screenshot comparison tool supports mobile and tablet viewports, alongside full-page scroll captures, allowing you to validate responsive UI changes across different screen sizes.

How do I create a visual diff for a Vercel deployment preview?▼

You create a visual diff for a Vercel deployment by providing the production and preview URLs, running preflight installation and Vercel protection checks before capturing the comparison screenshots.

Can I use existing image paths instead of URLs for a before-after comparison?▼

Yes, you can use existing image paths instead of URLs for a before-after comparison, generating a direct visual diff from the provided local or hosted image files.

Related Skills

Explore More Design & Creative Skills→
JoaquinCampoJoaquinCampo
3

before-and-after

Capture paired screenshots from two URLs or image paths for comparison.

Community
Intermediate
vercel-labsvercel-labs
210

before-and-after

Capture before-and-after screenshots from two URLs or image paths.

Official
Advanced
MacPhobosMacPhobos

Screenshot-Based UI Verification

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

Community
Intermediate
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced