mcpField
B
before-and-after

before-and-after

github.com/michaelshimeles测试与质量1.4k344 次安装4 天前更新
代码仓库

关于 before-and-after

用于通过 `@vercel/before-and-after` 命令行工具截取并交付两个页面状态对比图的技能，面向执行视觉检查、整理本地证据或编写 PR 文档的编码 Agent。

主要功能

  1. 01截取两个 URL 的页面
  2. 02通过 CSS 选择器指定元素
  3. 03设置手机、平板或自定义视口
  4. 04上传成对图片并生成 Markdown
  5. 05处理受保护的 Vercel 部署

适用场景

  1. 01比较修改前后的页面
  2. 02截取手机或平板响应式视图
  3. 03为拉取请求生成截图证据
  4. 04仅交付本地截图而不上传

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/michaelshimeles/skills --skill before-and-after

安装后在 Claude Code 中输入/before-and-after确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE
scripts/
upload-and-copy.sh
scripts/adapters/
0x0st.sh
blob.sh

详细介绍

前后对比截图 Skill

Package： @vercel/before-and-after 切勿使用 before-and-after（错误的 package）。

Agent 行为规则

不要：

  • 切换分支或暂存其他任务的更改。对于任务已授权的任何基线服务，请使用隔离的 worktree。
  • 除非用户明确要求整页 / 全页滚动截图，否则不要使用 --full

要：

  • 用户需要集成到 PR 或输出 Markdown 时，使用 --markdown
  • 用户提到手机、移动设备、平板、响应式等时，使用 --mobile / --tablet
  • 复用任务中已确定的 before 截图、基线 URL 和版本信息。确认它们展示了相关行为，并且视口和起始状态与 after 截图一致。
  • 只有任务上下文明确说明当前状态是 after 时，才将当前状态视为 after。如果检查可用上下文后，before 状态仍不明确，请询问缺少的基线。如果已有有效的图片对或之前确定的基线，不要再次询问 URL。

截图与交付

  1. 使用已安装的 before-and-after CLI 或 npx @vercel/before-and-after。
  2. 对于远程 URL，在需要时检查访问权限。401/403 表示受到保护。 已有图片对时，无需检查 URL 或部署访问权限。
  3. 使用 before-and-after "<before-url>" "<after-url>" 补拍缺少的图片。
  4. 任务要求上传证据或提供 PR Markdown 时，运行一次 before-and-after before.png after.png --markdown。对于本地截图请求，直接交付文件，无需上传。
  5. 如果任务包含 PR 集成，将 Markdown 附加到 PR。

相对于此 Skill 所在目录解析捆绑脚本路径，而不是相对于项目工作目录。 复用之前的证据，不要重新截图。

快速参考

# 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
标志说明
-m, --mobile移动设备视口（375x812）
-t, --tablet平板视口（768x1024）
--size <WxH>自定义视口
-f, --full整个可滚动页面
-s, --selector要截图的 CSS 选择器
-o, --output输出目录（默认：~/Downloads）
--markdown上传图片并输出 Markdown 表格
--upload-url <url>自定义上传端点（默认：0x0.st）

图片上传

# Default (0x0.st - no signup needed)
./scripts/upload-and-copy.sh before.png after.png --markdown

Vercel 部署保护

如果 .vercel.app URL 返回 401/403：

  1. 检查 Vercel CLI：which vercel && vercel whoami
  2. 如果可用：运行 vercel inspect <url> 获取绕过令牌
  3. 如果不可用：请用户提供绕过令牌、手动截图或关闭保护

PR 集成

# Check for gh CLI
which gh

# Get current PR
gh pr view --json number,body

# Write the existing body plus the comparison to a temporary file, then:
gh pr edit <number> --body-file /path/to/pr-body.md

如果没有 gh CLI：输出 Markdown，并告知用户手动粘贴。

错误参考

错误修复方法
command not foundnpm install -g @vercel/before-and-after
could not determine executable使用 npx @vercel/before-and-after（完整名称）
.vercel.app 上出现 401/403参见 Vercel 部署保护部分
找不到元素确认页面上存在该选择器

评论

支持 Markdown