skills.rest
vercel-labs
vercel-labsOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

before-and-after

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

210|9|Updated Jan 20, 2026
Search Tags:#automation#ui-testing#screenshot#upload#visual-diff#before-after#pr-integration
One-click install
npx skills add https://github.com/vercel-labs/before-and-after --skill before-and-after-vercel-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/vercel-labs/before-and-after/tree/main/skill
Command: npx skills add https://github.com/vercel-labs/before-and-after --skill before-and-after-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Automates capturing before-and-after screenshots to document UI changes in PRs and design reviews, saving time and reducing manual steps.

Core Features & Use Cases

  • Captures two URLs or two image paths to produce a before/after comparison.
  • Supports selectors for targeted element screenshots and viewport options (mobile/tablet/full).
  • Outputs a ready-to-share Markdown table and uploads images via pluggable adapters (default 0x0st) for easy PR integration.
  • Useful for visual diffs in PR descriptions, design handoffs, and UI regression checks.

Quick Start

Provide two URLs or two image paths; I will capture the before and after screens, upload them, and return a ready-to-paste markdown table.

Frequently Asked Questions about before-and-after

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

FAQPage Schema
How do I capture before and after screenshots for a PR description?▼

To capture before and after screenshots for a PR description, provide two URLs or image paths and the tool outputs a ready-to-paste markdown table with uploaded images for visual diffs.

Can I take targeted element screenshots instead of full page captures?▼

Yes, you can take targeted element screenshots by providing CSS selectors, and you can also specify viewport options like mobile, tablet, or full to control the capture area.

What is the best way to automate visual regression checks for web pages?▼

Automating visual regression checks is best done by providing two URLs to capture before and after screens, upload them via pluggable adapters, and generate a markdown table for comparison.

Does this screenshot tool work with local image paths or only URLs?▼

Yes, the screenshot tool works with both local image paths and URLs, accepting two inputs to produce a before and after comparison for design reviews and UI changes.

How do visual diffs work when uploading screenshots for design comparisons?▼

Visual diffs work by capturing two screens, uploading them via pluggable adapters like the default 0x0st, and returning a markdown table to document UI changes for design comparisons.

Do I need to configure an upload adapter to generate a before and after markdown table?▼

No, you do not need to configure an upload adapter manually because it uses a default 0x0st adapter, though gist or blob adapters are supported if you need custom image hosting.

Related Skills

Explore More Software Engineering Skills→
supersterlingsupersterling
1

before-and-after

Capture before-and-after screenshots from two URLs or image paths to compare UI changes.

Community
Intermediate
acmelemeacmeleme

pr-screenshots

Automates embedding screenshots from playscript into pull-request descriptions.

Official
Intermediate
dylanfeltusdylanfeltus
178

visual-qa

Automate visual QA of UI screenshots with vision models for design conformance.

Community
Advanced
krutikJainkrutikJain
14

android-testing-ui

Automate Compose UI tests and Espresso checks for Android applications.

Community
Advanced