Back to Details

screenshot

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

screenshot — render a local page and capture it

screenshot — 渲染本地页面并完成截图

Contributor dev skill. Drives the container's pre-installed Chromium (no 
playwright install
, no browser download) via 
playwright-core
to full-page-screenshot a locally-served page. Built from the hard-won gotchas of doing this by hand (see below).
贡献者开发技能。通过
playwright-core
调用容器中预安装的Chromium（无需执行
playwright install
，无需下载浏览器），对本地服务的页面进行全页截图。该技能源于手动操作过程中积累的经验教训（详见下文）。

When to use

使用场景

  • "screenshot the landing page / site", "how does the report look", "render 
    site/
    and show me".
  • Verifying a UI change in 
    site/
    (the landing) or 
    report/
    (the audit report) before committing.
  • “为着陆页/站点截图”、“看看报告的外观”、“渲染
    site/
    并展示给我”。
  • 在提交代码前，验证
    site/
    （着陆页）或
    report/
    （审计报告）中的UI变更。

Procedure

操作步骤

  1. Build the target (if it's a Vite app, you need 
    dist/
    ):
    • Landing: 
      cd site && npm install && npm run build
      → 
      site/dist/
    • Report: it builds with the root 
      npm run build
      → 
      dist/audit-report.template.html
  2. Serve it on a port (relative asset refs need the dir as web root):
    bash
    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. Ensure the driver (no browser download — uses 
    PLAYWRIGHT_BROWSERS_PATH
    ):
    bash
    node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core
  4. Shoot with the bundled script → writes 
    <outDir>/<name>-desktop.png
    + 
    -mobile.png
    :
    bash
    node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing
    Override viewports with 
    SHOT_WIDTHS="1440x900,768x1024,390x844"
    .
  5. Look before sending: 
    Read
    the desktop PNG to sanity-check it rendered, THEN 
    SendUserFile
    (display: render) so the user sees it. Send to the scratchpad dir, not the repo.
  1. 构建目标项目（如果是Vite应用，需要生成
    dist/
    目录）:
    • 着陆页：执行
      cd site && npm install && npm run build
      → 生成
      site/dist/
      目录
    • 报告：执行根目录下的
      npm run build
      即可构建 → 生成
      dist/audit-report.template.html
  2. 在端口上启动服务（相对资源引用需要将目录作为Web根目录）:
    bash
    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/   # 预期返回200
  3. 确保驱动可用（无需下载浏览器——使用
    PLAYWRIGHT_BROWSERS_PATH
    ）:
    bash
    node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core
  4. 使用捆绑脚本截图 → 生成
    <outDir>/<name>-desktop.png
    和
    <outDir>/<name>-mobile.png
    :
    bash
    node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing
    可通过
    SHOT_WIDTHS="1440x900,768x1024,390x844"
    覆盖默认视口尺寸。
  5. 发送前检查：先读取桌面端PNG文件确认渲染正常，再通过
    SendUserFile
    （显示方式：render）发送给用户查看。发送至临时目录，而非代码仓库。

Gotchas this skill encodes (don't relearn them)

该技能解决的常见问题（无需重复踩坑）

  • Scroll-reveal = blank cards. Sections that fade in on scroll (
    opacity-0
    + IntersectionObserver) are captured INVISIBLE by a naive 
    fullPage
    screenshot — the hero renders, everything below the fold is blank. The script scrolls top→bottom to trigger the reveals, then returns to top before shooting. If cards are blank, this is why.
  • Chromium is pre-installed at 
    /opt/pw-browsers/chromium-*/chrome-linux/chrome
    ; pass it as 
    executablePath
    + 
    --no-sandbox
    . NEVER run 
    playwright install
    (blocked; wastes time).
  • CJS-from-ESM import: 
    playwright-core
    's entry is CJS, and a script run from the scratchpad can't resolve the repo's 
    node_modules
    by a bare import — use 
    createRequire(cwd + '/package.json')
    (the script does this).
  • Mobile uploads sometimes 400 on 
    SendUserFile
    — retry once, or send desktop alone.
  • 滚动显示导致卡片空白：滚动时渐入的区域（使用
    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')
    （本脚本已实现此逻辑）。
  • 移动端截图上传有时返回400：可重试一次，或仅发送桌面端截图。

Not shipped

未发布说明

This is a 
.claude/
contributor skill (this repo's own harness), not a published consumer skill.
这是一个
.claude/
目录下的贡献者技能（仅适用于本仓库的工具链），并非面向普通用户发布的技能。