mcpField
S
screenshot

screenshot

github.com/zernie测试与质量15337 次安装1 天前更新
代码仓库

关于 screenshot

screenshot 是供仓库贡献者使用的本地网页截图技能，使用预装的 Chromium 和 playwright-core 渲染页面并截取全页图。它会滚动页面触发滚动显示内容，并支持指定视口尺寸。

主要功能

  1. 01使用预装 Chromium 截取本地页面
  2. 02生成桌面和移动视口截图
  3. 03滚动页面触发延迟显示内容
  4. 04支持自定义视口尺寸
  5. 05发送前检查截图渲染结果

适用场景

  1. 01提交前检查落地页的界面改动
  2. 02预览审计报告的页面呈现
  3. 03生成本地站点的桌面和移动截图

安装

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

$npx skills add https://github.com/zernie/vigiles --skill screenshot

安装后在 Claude Code 中输入/screenshot确认已加载。

附带文件scripts/shot.mjs

详细介绍

screenshot — 渲染本地页面并截屏

贡献者开发技能。通过 playwright-core 驱动容器中预装的 Chromium（无需 playwright install，也无需下载浏览器），对本地托管的页面进行全页截屏。该技能总结了手动操作时遇到的棘手问题（见下文）。

适用场景

  • “给首页／网站截屏”“报告看起来怎么样”“渲染 site/ 并展示给我”。
  • 提交前验证 site/（首页）或 report/（审计报告）中的 UI 更改。

流程

  1. 构建目标（如果是 Vite 应用，需要 dist/）：
    • 首页：cd site && npm install && npm run build → site/dist/
    • 报告：运行根目录下的 npm run build 即可构建 → dist/audit-report.template.html
  2. 通过端口提供服务（相对资源引用需要以对应目录为 Web 根目录）： 
    cd site/dist && python3 -m http.server 8899 >/tmp/httpd.log 2>&1 &
sleep 1 && curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8899/   # expect 200
  3. 确保驱动程序就绪（不下载浏览器——使用 PLAYWRIGHT_BROWSERS_PATH）： 
    node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core
  4. 使用内置脚本截屏 → 写入 <outDir>/<name>-desktop.png 和 -mobile.png： 
    node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing
    使用 SHOT_WIDTHS="1440x900,768x1024,390x844" 覆盖视口尺寸。
  5. 发送前先检查：使用 Read 读取桌面 PNG，确认渲染正常，然后使用 SendUserFile （display: render）让用户查看。发送到临时目录，而不是仓库。

此技能涵盖的易错点（别再踩坑）

  • 滚动显示效果导致卡片空白。 滚动时淡入的部分（opacity-0 + IntersectionObserver） 会被简单的 fullPage 截屏捕获为不可见——首屏正常渲染，首屏以下的所有内容都是空白。脚本会从顶部滚动到底部以触发显示效果，然后返回顶部再截屏。 如果卡片是空白的，原因就在这里。
  • Chromium 已预装，位置为 /opt/pw-browsers/chromium-*/chrome-linux/chrome；传入 executablePath + --no-sandbox。绝不要运行 playwright install（操作会被阻止，还浪费时间）。
  • 从 ESM 导入 CJS：playwright-core 的入口是 CJS，从临时目录运行的脚本无法通过裸导入解析仓库的 node_modules——应使用 createRequire(cwd + '/package.json')（脚本已这样处理）。
  • 移动版上传有时会在 SendUserFile 中返回 400——重试一次，或只发送桌面版。

未随项目发布

这是一个 .claude/ 贡献者技能（本仓库自身的工具），不是面向用户发布的技能。

评论

支持 Markdown