before-and-after 是一个用于网页视觉前后对比的截图技能，可对两个 URL 或已有图片进行同视口截图并生成对比结果，适合视觉回归检查与 PR 证据展示。
用途
- 对改动前（before）与改动后（after）的网页进行截图对比，确认视觉变化。
- 截取整页或页面中指定的 CSS 选择器元素。
- 生成 Markdown 表格形式的对比结果，便于提交到 PR。
主要能力
- 命令行传入两个 URL 截图，例如 before-and-after <before-url> <after-url>。
- 支持为前后状态分别指定选择器：before-and-after url1 url2 ".old-card" ".new-card"。
- 视口选项：--mobile（375x812）、--tablet（768x1024）、--size <WxH> 自定义、--full 全页滚动截图。
- 输出目录通过 -o/--output 指定，默认 ~/Downloads。
- --markdown 上传图片并输出 Markdown 表格；--upload-url 可自定义上传端点，默认 0x0.st。
- 可从已有图片生成对比：before-and-after before.png after.png --markdown。
- 提供 upload-and-copy.sh 脚本用于上传并复制 Markdown。
使用方式
- 使用已安装的 CLI 或 npx @vercel/before-and-after（须使用完整包名，不能用 before-and-after 错误包名）。
- 若未安装，npm install -g @vercel/before-and-after；出现 could not determine executable 时改用完整包名 npx。
- 远程 URL 需检查访问权限，401/403 表示存在保护；已有图片对则无需 URL 或部署访问检查。
- 仅当任务需要上传证据或 PR Markdown 时执行一次 --markdown；本地截图请求直接交付文件，不上传。
- PR 集成：检查 gh CLI，gh pr view --json number,body 获取当前 PR，将原正文与对比内容写入临时文件后 gh pr edit <number> --body-file；无 gh CLI 时输出 Markdown 让用户手动粘贴。
- 技能自带脚本路径应相对该技能目录解析，而非项目工作目录。
行为约定
- 不要切换分支或 stash 其他任务的改动；使用隔离 worktree 处理任务已授权的基线服务器。
- 不要在用户未明确要求整页/全滚动截图时使用 --full。
- 用户提及手机、移动端、平板、响应式时使用 --mobile/--tablet。
- 复用任务中已建立的 before 截图、基线 URL 和修订信息，并确认视口与起始状态一致。
- 仅在任务上下文明确时把当前状态视为 after；基线仍不明确时询问缺失的基线，但已有有效图片对或早期基线时不再索要 URL。
适用场景
- 前端 UI 改动的视觉回归验证。
- PR 中展示改动前后对比证据。
- 响应式布局在移动端/平板下的对比检查。
限制
- 上传依赖外部端点（默认 0x0.st）或自定义端点，可用性暂未提供。
- .vercel.app 受保护页面会返回 401/403，需处理 bypass token、手动截图或关闭保护。
- 元素选择器需在页面上存在，否则报 Element not found。
- 具体收费、价格与平台支持范围资料未提供。