szoloth/before-and-after
skills/before-and-after/SKILL.md
Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.
development
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add szoloth/skills before-and-afterInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 3:03 AM41.2s6 files scanned
SKILL.md
- name:
- before-and-after
- description:
- Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.
Before-After Screenshot Skill
Package:
@vercel/before-and-afterNever usebefore-and-after(wrong package).
Agent Behavior Rules
DO NOT:
- Switch git branches, stash changes, start dev servers, or assume what "before" is
- Use
--fullunless user explicitly asks for full page / full scroll capture
DO:
- Use
--markdownwhen user wants PR integration or markdown output - Use
--mobile/--tabletif user mentions phone, mobile, tablet, responsive, etc. - Assume current state is After
- If user provides only one URL or says "PR screenshots" without URLs, ASK: "What URL should I use for the 'before' state? (production URL, preview deployment, or another local port)"
Execution Order (MUST follow)
- Pre-flight —
which before-and-after || npm install -g @vercel/before-and-after - Protection check — if
.vercel.appURL:curl -s -o /dev/null -w "%{http_code}" "<url>"(401/403 = protected) - Capture —
before-and-after "<before-url>" "<after-url>" - Upload —
./scripts/upload-and-copy.sh <before.png> <after.png> --markdown - PR integration — optionally
gh pr editto append markdown
Never skip steps 1-2.
Quick Reference
# Basic usage
before-and-after <before-url> <after-url>
# With selector
before-and-after url1 url2 ".hero-section"
# Different selectors for each
before-and-after url1 url2 ".old-card" ".new-card"
# Viewports
before-and-after url1 url2 --mobile # 375x812
before-and-after url1 url2 --tablet # 768x1024
before-and-after url1 url2 --full # full scroll
# From existing images
before-and-after before.png after.png --markdown
# Via npx (use full package name!)
npx @vercel/before-and-after url1 url2
| Flag | Description |
|------|-------------|
| -m, --mobile | Mobile viewport (375x812) |
| -t, --tablet | Tablet viewport (768x1024) |
| --size <WxH> | Custom viewport |
| -f, --full | Full scrollable page |
| -s, --selector | CSS selector to capture |
| -o, --output | Output directory (default: ~/Downloads) |
| --markdown | Upload images & output markdown table |
| --upload-url <url> | Custom upload endpoint (default: 0x0.st) |
Image Upload
# Default (0x0.st - no signup needed)
./scripts/upload-and-copy.sh before.png after.png --markdown
# GitHub Gist
IMAGE_ADAPTER=gist ./scripts/upload-and-copy.sh before.png after.png --markdown
Vercel Deployment Protection
If .vercel.app URL returns 401/403:
- Check Vercel CLI:
which vercel && vercel whoami - If available:
vercel inspect <url>to get bypass token - If not: Tell user to provide bypass token, take manual screenshots, or disable protection
PR Integration
# Check for gh CLI
which gh
# Get current PR
gh pr view --json number,body
# Append screenshots to PR body
gh pr edit <number> --body "<existing-body>
## Before and After
<generated-markdown>"
If no gh CLI: output markdown and tell user to paste manually.
Error Reference
| Error | Fix |
|-------|-----|
| command not found | npm install -g @vercel/before-and-after |
| could not determine executable | Use npx @vercel/before-and-after (full name) |
| 401/403 on .vercel.app | See Vercel protection section |
| Element not found | Verify selector exists on page |
Related Skills
szoloth/youtube-transcript
content-media
VerifiedTrustedCommunity
Fetch transcripts from YouTube videos for summarization and analysis.
SKILL.mdUpdated Apr 15, 2026
szoloth/writing-editor
documentation
VerifiedTrustedCommunity
This skill should be used when reviewing or editing written drafts to ensure they match Sam's personal style guide. It prioritizes voice preservation and anti-beige detection while catching structural gaps. Triggers on requests to review, edit, or improve written content.
SKILL.mdUpdated Apr 15, 2026
szoloth/webapp-testing
tools
VerifiedTrustedCommunity
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
SKILL.mdUpdated Apr 15, 2026
szoloth/web-research
development
VerifiedTrustedCommunity
Web search and content extraction using Brave Search. Use when researching topics, finding documentation, extracting article content, or gathering information from the web. No browser required - works headlessly.
SKILL.mdUpdated Apr 15, 2026