Synthèse automatique
Capture une page web entière en une seule image PNG longue en pilotant Chrome via le protocole DevTools, sans dépendance externe.
Points forts
- Gère les conteneurs de défilement internes des SPA en forçant leur expansion via CSS
- Attend la stabilisation du DOM et déclenche le chargement des images lazy avant la capture
- Découpe et assemble automatiquement les pages dépassant 16000 px avec Pillow
- Permet de cibler un onglet déjà ouvert (utile pour les pages authentifiées) ou une URL directe
Limites
- Nécessite Node.js 22+ et Chrome avec le débogage distant activé manuellement
- Le mode --url crée un onglet en arrière-plan qui peut échouer sur les systèmes à SSO ou authentification interactive
- L'assemblage des très longues pages dépend de Python 3 et Pillow, sinon les fragments sont conservés séparément
À utiliser lorsqu'il faut produire une image unique et complète d'une page web, d'un article ou d'un rapport, y compris son contenu hors écran.
À éviter pour des pages nécessitant une authentification interactive complexe ou lorsque Python/Pillow n'est pas disponible et qu'une image unique est indispensable.
Analyse de sécurité
PrudenceThe skill is a legitimate browser-automation utility: it drives the local Chrome DevTools protocol to resize viewports, inject CSS overrides, scroll, and capture PNGs. Nothing in the instructions exfiltrates data, deletes files, or disables safety. However, it requires enabling remote debugging (exposing full browser control including logged-in sessions), uses an `/eval` proxy fallback, and writes screenshots of possibly sensitive authenticated pages to disk. That warrants 'caution' rather than 'safe', and the unreviewed bundled script prevents a stronger verdict.
- •Connects directly to Chrome's DevTools WebSocket, giving the skill full control over the browser (DOM, tabs, and implicitly any authenticated session); it instructs users to enable 'Allow remote debugging', which is a persistent weakening of the browser's security posture.
- •Falls back to a web-access CDP Proxy `/eval` endpoint, which executes arbitrary JavaScript in the page context — powerful and hard to bound.
- •Can screenshot any open authenticated tab (targetId mode) or navigate to arbitrary URLs, writing potentially sensitive page contents into a plaintext PNG in /tmp.
- •References `${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs` but the script body is not included in SKILL.md, so actual behavior (network calls, file writes, eval usage) cannot be verified from this file alone.
- •No destructive commands, obfuscation, or outbound data transfer are described; the risk stems from legitimate but broad browser-automation privileges.
Exemples
Take a full-page screenshot of the Jira ticket I have open in Chrome and save it to /tmp/ticket.pngCapture a full long screenshot of https://example.com/report at width 1440 and save it to /tmp/report.pngScreenshot the full article at https://blog.example.com/post with dpr 2 for retina qualityname: full-page-screenshot description: | 在浏览器中对网页做完整长截图（full-page screenshot），生成一张包含页面所有内容的 PNG 长图。 触发场景：用户要求对网页截长图、全页截图、完整截图、long screenshot、full page capture， 或要求把网页/文章/报告截成一张完整的图片。支持用户已打开的 tab 或指定 URL。 自动处理 SPA 内部滚动容器、懒加载图片、超长页面分片拼接。 无外部依赖，直连 Chrome DevTools 协议完成所有操作。
Full Page Screenshot
对浏览器中的网页生成一张完整的长截图 PNG，覆盖页面全部内容（包括需要滚动才能看到的部分）。直连 Chrome DevTools WebSocket，无需 CDP Proxy 或其他中间层。
前置条件
只需 Node.js 22+ 和 Chrome 开启远程调试：
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：
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
然后截图该 tab：
node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> <output> [--width N] [--dpr N]
用户给了 URL
一条命令完成全部流程（建 tab → 等加载 → 截图 → 关 tab）：
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 |
验证输出
sips -g pixelWidth -g pixelHeight <output>
裁剪局部验证（需要 Pillow）：
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")
核心能力
- SPA 内部滚动容器：自动检测
overflow-y: auto/scroll的容器，用!important覆盖 CSS 高度约束（含 Tailwindh-[calc(...)]等），展开全部内容后截图 - DOM 稳定等待：
readyState=complete后继续监测 DOM 元素数量变化，直到 SPA 数据渲染完成 - 懒加载处理：逐步滚动触发 IntersectionObserver，等待所有
img.complete - 超长页面分片：>16000px 的页面自动分片截取（每片 8000px），用 Python PIL 拼接
- Proxy 兼容：当 web-access CDP Proxy 运行时，自动检测并通过 proxy API 完成截图（滚动容器分片拼接）
注意事项
- 超长页面（> 20000px）在高 DPR 下可能导致 Chrome 内存问题。遇到此情况降低
--dpr到 1 或减小--width。 --url模式会自动创建后台 tab 并在截图后关闭，不影响用户已有 tab。- 截图期间会临时改变页面视口尺寸和滚动容器样式，完成后自动恢复。
- 脚本通过读取
DevToolsActivePort文件发现 Chrome 调试端口，直连 WebSocket，无需任何代理或中间服务。 - 分片拼接需要 Python 3 + Pillow（macOS 通常已安装）。无 Pillow 时会保留分片文件。
- 当 web-access 的 CDP Proxy 在运行时，脚本先尝试直连，超时后降级到 proxy API（通过 /eval 和 /screenshot 端点操作）。
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/full-page-screenshot-mrwakgnc' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/full-page-screenshot-mrwakgnc/download' --output '.skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md.part' && mv '.skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md.part' '.skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md' && test -s '.skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/full-page-screenshot' && cp -R '.skill-downloads/full-page-screenshot-mrwakgnc' '.claude/skills/full-page-screenshot'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/full-page-screenshot-mrwakgnc'openskills read 'full-page-screenshot-mrwakgnc'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/full-page-screenshot-mrwakgnc/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.