---
id: sm-before-and-after
name: "before-and-after"
url: https://skills.yangsir.net/skill/sm-before-and-after
author: vercel-labs
domain: ai-frontend-engineering
tags: ["image-comparison", "ui-components", "frontend-development", "javascript", "css"]
install_count: 2800
rating: 4.40 (44 reviews)
github: https://github.com/vercel-labs/before-and-after
---

# before-and-after

> 用于处理前后对比截图，提供关于包使用和代理行为的特定指导。，AI Agent Skill，提升工作效率和自动化能力

**Stats**: 2,800 installs · 4.4/5 (44 reviews)

## Before / After 对比

### 自动化处理前后对比截图，提供精确的UI/UX变化展示与包使用指导，有效提升前端开发与设计评审效率。

## Readme

# before-and-after

Before-After Screenshot Skill Package: @vercel/before-and-after Never use before-and-after (wrong package). Agent Behavior Rules DO NOT: Switch git branches, stash changes, start dev servers, or assume what "before" is Use --full unless user explicitly asks for full page / full scroll capture DO: Use --markdown when user wants PR integration or markdown output Use --mobile / --tablet if 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.app URL: 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 edit to 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 &#x26; 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 &#x26;&#x26; 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 Weekly Installs427Repositoryvercel-labs/bef…nd-afterGitHub Stars190First SeenFeb 2, 2026Security AuditsGen Agent Trust HubFailSocketFailSnykWarnInstalled oncodex368opencode352gemini-cli319github-copilot309cursor299claude-code298

---
*Source: https://skills.yangsir.net/skill/sm-before-and-after*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-before-and-after/markdown*