skills.rest
dsatpm
dsatpmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

before-and-after

Captures before and after screenshots of web pages for visual comparison in pull requests.

1|Updated Sep 16, 2026
Search Tags:#markdown#pull request#screenshots#github#vercel#ui testing#visual comparison
One-click install
npx skills add https://github.com/dsatpm/factory-skills --skill before-and-after-dsatpm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/dsatpm/factory-skills/tree/main/plugins/before-and-after/skills/before-and-after
Command: npx skills add https://github.com/dsatpm/factory-skills --skill before-and-after-dsatpm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/before-and-after, and includes scripts (resource) components.

What problem does it solve? Documenting UI changes for code review requires manually taking screenshots, uploading them to a host, and formatting markdown tables for pull requests, which is repetitive and error-prone. ## Core Features & Use Cases - Automated Screenshot Capture: Captures before and after screenshots of web pages or specific CSS selectors using the @vercel/before-and-after CLI, with mobile, tablet, and full-page viewport options. - Pluggable Image Upload: Uploads screenshots via interchangeable storage adapters (0x0.st, GitHub Gist, or a custom blob endpoint) and generates a ready-to-paste markdown comparison table. - PR Integration: Appends the generated before/after markdown table directly to a GitHub pull request body using the gh CLI. - Use Case: After restyling a landing page, ask the agent to capture the production URL against your local dev server and post the visual comparison to the open PR. ## Quick Start Take before and after screenshots comparing https://mysite.com with http://localhost:3000 and add the markdown table to my current pull request.

Frequently Asked Questions about before-and-after

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

FAQPage Schema
How do I take before and after screenshots of a website?▼

Run the before-and-after CLI with two URLs, such as a production URL and a local dev server URL. It captures both pages and outputs PNG files, which can then be uploaded and formatted as a markdown comparison table.

How do I add screenshot comparisons to a GitHub pull request?▼

Upload the before and after images with the upload script using the --markdown flag to generate a markdown table, then use gh pr edit to append that table to the PR body. Without the gh CLI, paste the markdown manually.

Can I capture screenshots at mobile or tablet viewport sizes?▼

Yes, the --mobile flag captures at 375x812 and the --tablet flag captures at 768x1024. A custom viewport size is also supported with the --size WxH option.

Why do I get a 401 or 403 error on a .vercel.app URL?▼

Vercel deployment protection blocks unauthenticated requests, returning 401 or 403. Use vercel inspect with an authenticated Vercel CLI to obtain a bypass token, or ask the user to provide one or disable protection.

What image hosting options are available for uploaded screenshots?▼

Three adapters are included: 0x0.st for free uploads without signup, GitHub Gist via the gh CLI for persistent hosting, and a custom blob adapter configured through the BLOB_UPLOAD_URL environment variable.

Related Skills

Explore More Software Engineering Skills→
imbue-aiimbue-ai
213

openhost-frontend-preview

Run a Vite dev server with hot-reloading for the Sculptor WEB frontend.

Official
Intermediate
hirokimryhirokimry
1

pr

Create and update GitHub pull requests from branch diffs and issue context.

Community
Advanced
Himanshu040604Himanshu040604

dogfood

Explore and test web applications to document bugs with screenshots and videos.

Community
Advanced
anton-abyzovanton-abyzov
156

visual-regression

Detect unintended visual changes in web applications via screenshot comparison and pixel-diff analysis.

Community
Advanced