Full Page Screenshot

Q: What does the Full Page Screenshot skill do?

在浏览器中对网页做完整长截图（full-page screenshot），生成一张包含页面所有内容的 PNG 长图。 触发场景：用户要求对网页截长图、全页截图、完整截图、long screenshot、full page capture， 或要求把网页/文章/报告截成一张完整的图片。支持用户已打开的 tab 或指定 URL。 自动处理 SPA 内部滚动容器、懒加载图片、超长页面分片拼接。 无外部依赖，直连 Chrome DevTools 协议完成所有操作。

在浏览器中对网页做完整长截图（full-page screenshot），生成一张包含页面所有内容的 PNG 长图。触发场景：用户要求对网页截长图、全页截图、完整截图、long screenshot、full page capture，或要求把网页/文章/报告截成一张完整的图片。支持用户已打开的 tab 或指定 URL。自动处理 SPA 内部滚动容器、懒加载图片、超长页面分片拼接。无外部依赖，直连 Chrome DevTools 协议完成所有操作。

26 starsOther

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add LewisLiu007/full-page-screenshot --skill full-page-screenshot

Manual install

git clone --depth 1 https://github.com/LewisLiu007/full-page-screenshot.git /tmp/full-page-screenshot
mkdir -p ~/.claude/skills
cp -r /tmp/full-page-screenshot/. ~/.claude/skills/full-page-screenshot

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Full Page Screenshot

对浏览器中的网页生成一张完整的长截图 PNG，覆盖页面全部内容（包括需要滚动才能看到的部分）。直连 Chrome DevTools WebSocket，无需 CDP Proxy 或其他中间层。

## 前置条件

只需 Node.js 22+ 和 Chrome 开启远程调试：

```bash
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --check
```

如果 chrome 检查失败，引导用户：打开 `chrome://inspect/#remote-debugging`，勾选 **"Allow remote debugging for this browser instance"**。

## 工作流程

### 用户描述了已打开的 tab（推荐，尤其是需要登录的页面）

先列出所有 tab，匹配用户描述找到 `targetId`：

```bash
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
```

然后截图该 tab：

```bash
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> <output> [--width N] [--dpr N]
```

### 用户给了 URL

一条命令完成全部流程（建 tab → 等加载 → 截图 → 关 tab）：

```bash
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "<URL>" <output> [--width N] [--dpr N] [--wait N]
```

**注意**：`--url` 模式创建后台 tab。对于需要登录的内部系统（如 SAP、企业 SSO），后台 tab 可能无法完成认证。此时应引导用户先在 Chrome 中打开页面，然后使用 targetId 模式截图。

### 参数说明

| 参数 | 说明 | 默认值 |
|------|------|--------|
| `output` | 输出文件路径 | `/tmp/screenshot.png` |
| `--width` | 视口宽度（CSS 像素）。文章页 1200，宽表格/面板 1440-1920 | 1200 |
| `--dpr` | 设备像素比。2 可获 Retina 清晰度，但体积翻 4 倍 | 1 |
| `--wait` | 页面加载超时（毫秒），仅 `--url` 模式 | 15000 |

### 验证输出

```bash
sips -g pixelWidth -g pixelHeight <output>
```

裁剪局部验证（需要 Pillow）：

```python
from PIL import Image
img = Image.open("<output>")
w, h = img.size
img.crop((0, 0, w, 1500)).save("/tmp/check_top.png")
img.crop((0, h-1500, w, h)).save("/tmp/check_bottom.png")
```

## 核心能力

Read the full skill on GitHub

Details

Skill name: full-page-screenshot
Repository: LewisLiu007/full-page-screenshot
Repo updated: 9 October 2026
Listed in: ComposioHQ/awesome-claude-skills

FAQ

What does the Full Page Screenshot skill do?

How do I install the Full Page Screenshot skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add LewisLiu007/full-page-screenshot --skill full-page-screenshot. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Full Page Screenshot popular?

It lives in LewisLiu007/full-page-screenshot, which has 26 GitHub stars and 0 forks, and is included in 1 curated skill list.

Related skills

Insanca

tahiryildiz/insanca

Türkçe metinlerdeki yapay zeka yazım izlerini tespit edip doğal, akıcı, insan elinden çıkmış gibi okunan Türkçeye çevirir. Türkçe bir metni "doğallaştır", "insanileştir", "insanca yaz", "yapay zeka kokusunu gider", "akıcı Türkçe yap" istendiğinde veya Türkçe içerik yazım/redaksiyon işlerinde KULLAN. Tespit ettiği kalıplar: -maktadır monotonluğu, metronomik cümle ritmi, "mesele X değil Y" kalıbı, üçleme kuralı, çeviri kokusu, kesik cümle yığını, bürokratik dolgu, boş doğrular, uydurma örnekler, terapist tonu, jenerik girizgah ve kapanışlar, uzun tire, yağcılık, belirsiz kaynak gösterme, sahte ş

Other

Wechat Group Daily Report

kbwzy/wechat-group-daily-report

单群图文日报：将指定微信群一天或明确时间段的聊天，编辑为结论式话题卡、观点总结、选题线索、个人提醒和今日链接，输出 PNG 长图、HTML、Markdown。用于群聊总结、单群日报、群日报长图及每日定时生成；依托 wechat-intelligence-hub 读取证据。不负责跨群综合情报、联系人私聊、商机状态更新或微信发送。

Other

Skill Router

pcx-wave/skill-router

Activate once per session to route substantive requests to the right installed skill. Two modes: suggest (interactive, ranked proposals) or auto (silent with attribution footer). Trigger: /skill-router on | /skill-router on --auto | /skill-router status

Other

Wujutong

jangviktor-web/wujutong

温病派大师吴鞠通 Skill — 吴鞠通（1758-1836）温病学派思维操作系统。基于《温病条辨》《医医病书》《吴鞠通医案》《温热经纬》吴鞠通按语蒸馏，含 359 医案库（45 病证·双索引）。当用户问到温病、三焦辨证、卫气营血传变、银翘散、桑菊饮、白虎汤、安宫牛黄丸、温病三宝、化源绝、湿温三禁、白虎四禁等温病主题或希望用吴鞠通视角辨证时触发。不适用于伤寒/经方派（用倪海厦/胡希恕）、杂病派（用龚廷贤）、气机升降派（用黄元御）、道家内丹养生（用苏华仁）等问题。

Other12

Suomen Kieli

samimiettinen/suomen-kieli

Suomen kielen toimittaja: käytä AINA kun tuotat, käännät, oikoluet, arvioit tai luonnollistat suomenkielistä tekstiä – verkkosivut, dokumentit, markkinointi, asiantuntijaviestintä – tai kun käyttäjä mainitsee oikeinkirjoituksen, kieliopin, pilkutuksen, yhdyssanat tai pyytää oikolukua tai tekstin tarkastusta suomeksi.

Other

Awaek

1lystore/awaek

Personal source engine for saved X bookmarks. Ask, draft, decide, and plan from saved posts using local evidence.

Other

Browse the most popular Claude skills, all other skills, or write your own with the skills generator.