skills.rest
obispobruno
obispobrunoCOMMUNITY
Explore all skills by this author →
GitHub

before-and-after

Captures before and after screenshots of web pages for visual comparison and PR documentation.

1|Updated Aug 1, 2024
Search Tags:#markdown#pull request#github#vercel#ui testing#screenshot#visual comparison
One-click install
npx skills add https://github.com/obispobruno/dotfiles --skill before-and-after-obispobruno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/obispobruno/dotfiles/tree/main/dot_agents/skills/before-and-after
Command: npx skills add https://github.com/obispobruno/dotfiles --skill before-and-after-obispobruno

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Documenting UI changes for pull requests or design reviews requires manually taking screenshots, uploading them, and formatting comparison tables, which is repetitive and error-prone. ## Core Features & Use Cases - Automated Screenshot Capture: Capture before/after screenshots of two URLs or existing image files using the @vercel/before-and-after CLI, with support for CSS selectors, mobile/tablet viewports, and full-page capture. - Image Upload & Markdown Generation: Upload screenshots via pluggable storage adapters (0x0.st, GitHub Gist, custom blob endpoint) and generate a ready-to-paste markdown comparison table. - PR Integration: Append the generated before/after markdown table directly to a GitHub pull request body using the gh CLI. - Use Case: You just restyled a landing page on localhost:3000. Run the skill against the production URL and your local server to produce a side-by-side screenshot table, then attach it to your PR automatically. ## 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 web page?▼

Run the before-and-after CLI with two URLs: before-and-after "<before-url>" "<after-url>". You can also pass two existing image files, or add a CSS selector to capture only a specific element on each page.

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

Capture screenshots with the --markdown flag, then use gh pr view to get the current PR body and gh pr edit to append the generated markdown table. If the gh CLI is unavailable, copy the markdown output and paste it manually.

Can I capture mobile or tablet viewport screenshots?▼

Yes, use the --mobile flag for a 375x812 viewport or --tablet for 768x1024. A custom size is available via --size <WxH>, and --full captures the entire scrollable page.

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

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 a token or disable protection.

What image hosting options are available for uploaded screenshots?▼

Three pluggable adapters exist: 0x0.st (default, no signup, files expire), GitHub Gist via the gh CLI (persistent, requires authentication), and a custom blob endpoint configured through the BLOB_UPLOAD_URL environment variable.

Related Skills

Explore More Software Engineering Skills→
rezosndrezosnd

mockup-sandbox

Generate isolated Vite dev server previews for React UI components.

Community
Advanced
kpabkpab

safe-formatter

Generate Markdown release notes from categorized pull request titles.

Community
Basic
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

visual-regression-test-setup

Set up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.

Official
Intermediate
anton-abyzovanton-abyzov
156

visual-regression

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

Community
Advanced