vercel-labs/before-and-after
Overview
This skill captures paired before/after screenshots of whole pages or specific elements to produce a visual diff for reviews and PRs. It automates preflight checks, protected-site handling, capture, upload, and optionally generates Markdown suitable for PR bodies. Use it to document UI changes, verify responsive behavior, or produce sharable comparison images.
How this skill works
The skill runs a preflight check to ensure the screenshot tool is available, then verifies accessibility for protected Vercel deployments. It captures screenshots for the provided before and after inputs (URLs or image paths), supports viewport presets and selectors, uploads the resulting images, and can output Markdown for easy PR integration. If only one URL is provided, the skill prompts for the missing "before" state.
When to use it
- When you say: "take before and after", "screenshot comparison", "visual diff", or "PR screenshots"
- To document UI changes between two deployments or builds
- When reviewing a pull request and you need visual evidence of layout or style changes
- To compare different viewports (mobile/tablet/desktop) or specific page elements
- When you need sharable Markdown with embedded images for a PR or report
Best practices
- Run the preflight check first; install the CLI if missing (npm or npx usage)
- Assume the current environment is the after state unless the user specifies otherwise
- Use --mobile or --tablet when the user mentions phone/tablet/responsive testing
- Provide explicit CSS selectors for element-level captures to avoid "element not found" errors
- For .vercel.app URLs, perform a protection check and request a bypass token if 401/403 is returned
- Only use --full when the user explicitly asks for a full-page (scroll) capture
Example use cases
- Compare production and staging URLs to confirm a bugfix visually resolved the issue
- Generate PR screenshots and append Markdown to the PR body for reviewer context
- Capture a specific component before and after a refactor using CSS selectors
- Validate responsive changes by running mobile and tablet viewport captures
- Upload before/after PNGs to a short-hosting service and copy Markdown for sharing
FAQ
Two URLs (file://, http://, https://) or two local image paths; if only one URL is provided, it will ask for the other.
How does it handle protected Vercel deployments?
It performs an HTTP status check; on 401/403 it can try Vercel CLI inspection if available or ask you for a bypass token or alternate approach.
Can I get Markdown for a PR automatically?
Yes — the skill can upload images and output Markdown, and it will attempt to append it to the PR if the GitHub CLI is present; otherwise it returns the Markdown for manual pasting.
