full-page-screenshot
作者 alirezarezvanifull-page-screenshot 可透過 CDP 將完整 Chrome/Chromium 頁面擷取為 PNG，支援長頁面、SPA、lazy-loaded content 與已登入分頁。可搭配 Node.js 22+、Chrome remote debugging、--check、--list、existing-tab capture，或 --url mode 使用。
這個 skill 評分為 82/100，對需要可靠完整網頁截圖的目錄使用者來說，是相當穩健的上架候選。它提供清楚的觸發情境、實用 commands 與可執行 script；不過使用者需留意 Chrome remote-debugging 與 Node.js 22+ 的設定需求。
- 觸發條件清楚：frontmatter 明確涵蓋網頁的 full-page、長頁面與完整頁面截圖。
- 操作流程具體，提供環境檢查、列出既有分頁、擷取已登入／已開啟分頁，以及在背景分頁擷取 URL 的 commands。
- 包含使用 Chrome DevTools Protocol 的獨立 Node.js script，讓代理不只依賴一般提示，也能重複運用實作能力。
- 需要 Node.js 22+，並啟用 Chrome/Chromium 的 remote debugging，因此不是單一指令即可安裝並開始使用的體驗。
- skill 路徑中沒有 install command 或 README，使用者可能需要仰賴目錄工具或 repository 結構，才能正確放置 SKILL_DIR。
full-page-screenshot skill 概覽
full-page-screenshot 的用途
full-page-screenshot 是一個 Browser Automation skill，可將完整網頁擷取成單一 PNG，包含首屏以下的內容。它以獨立的 Node.js script 為核心，透過 Chrome DevTools Protocol 與 Chrome 溝通，因此能處理長頁面、lazy-loaded content、single-page apps，以及一般 viewport screenshot 會漏掉大部分內容的頁面。
最適合的使用者與工作情境
如果你需要讓 AI agent 在 QA、視覺審查、文件製作、設計稽核、bug 回報、競品研究，或需要登入的產品導覽中穩定產出 full-page screenshots，這個 skill 很值得安裝。當目標頁面已經在 Chrome 中開啟時特別好用，因為 skill 可以列出可用分頁並擷取指定分頁，不需要要求使用者重新建立登入狀態。
主要差異化優勢
full-page-screenshot skill 的核心價值是操作上的可靠性：它直接使用 Chrome DevTools Protocol，除了 Node.js 22+ 和 Chrome/Chromium 之外不需要任何外部 package dependencies，並同時支援 existing-tab capture 與 URL-based capture。對 authenticated dashboards、staging environments，以及位於 SSO 後方的頁面來說，existing-tab workflow 是最重要的差異化能力。
採用前先確認的限制
安裝前，請先確認你的環境能執行 Node.js 22+，且可使用 Chrome remote debugging。這個 skill 不是 hosted screenshot API，也不會繞過 authentication、CAPTCHAs、local network restrictions、cookie banners，或刻意阻擋自動化的頁面。它最適合的情境是使用者可以在 Chrome 中正常開啟頁面，然後讓 agent 從該分頁擷取畫面。
如何使用 full-page-screenshot skill
full-page-screenshot 安裝與就緒檢查
從 repository path 安裝 skill：
npx skills add alirezarezvani/claude-skills --skill full-page-screenshot
安裝後，先從 SKILL.md 開始，再檢視 scripts/full-page-screenshot.mjs。這個 script 是實際執行層，因此在受限環境或類似 CI 的環境中使用前，很值得先讀過。
執行就緒檢查：
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check
如果 Chrome debugging 無法使用，請開啟 chrome://inspect/#remote-debugging，並為該 browser instance 啟用 remote debugging；或依照你的本機政策，以 debugging port 啟動 Chrome/Chromium。
已登入頁面的 existing-tab 使用方式
對於 authenticated pages、admin panels，或任何依賴目前瀏覽器 session 的頁面，請使用 existing-tab workflow。先列出已開啟的分頁：
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
用 title 或 URL 找到目標分頁，然後擷取：
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1
這樣可以避免遺失 session cookies，通常也比在背景開啟全新的 URL 更可靠。請使用符合你想檢查的設計 breakpoint 的寬度，例如 390 代表接近手機版 layout，768 代表平板，1200/1440 則代表桌面版。
公開頁面的 URL 使用方式
對公開頁面、文件、行銷頁，或不需要登入的頁面，請使用 URL mode：
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000
當頁面仰賴 delayed rendering、client-side routing、analytics-triggered content，或 lazy-loaded sections 時，請增加 --wait。為了實用的檔案大小與審查速度，建議維持 --dpr 1；只有在 pixel density 比輸出大小更重要時，才使用較高的 DPR。
讓呼叫更準確的 prompt 寫法
較弱的 prompt 是：「幫這個頁面截圖。」更好的 full-page-screenshot 使用 prompt 會包含 URL 或分頁脈絡、登入狀態、viewport width、等待需求與輸出路徑：
Use the full-page-screenshot skill to capture the already-open Chrome tab for
staging.example.com/dashboard. I am logged in. Use desktop width1440, DPR1, wait long enough for lazy charts to render, and save the PNG to/tmp/dashboard-full-page.png. If multiple matching tabs exist, list them first and ask me which target ID to use.
這能提供 agent 足夠資訊，在 --list、existing-tab capture 與 --url mode 之間做選擇，而不需要猜測。
full-page-screenshot skill 常見問題
full-page-screenshot 會比一般截圖 prompt 更好嗎？
會，前提是需求是擷取完整頁面，而不是只擷取目前可見的 viewport。一般 prompt 可能會依賴環境提供的截圖能力，最後常常只產出目前螢幕畫面。full-page-screenshot skill 則提供 agent 一套明確的 CDP-based workflow、command structure，以及針對已開啟分頁的 fallback path。
初學者可以使用這個 skill 嗎？
可以，只要能安裝 skills，並能在啟用 remote debugging 的狀態下執行 Chrome。指令本身很直接，但設定上比 browser extension 更偏技術。初學者建議先從 --check 開始，接著執行 --list，再先擷取既有分頁，最後才嘗試 URL mode。
什麼情況不適合使用這個 skill？
當你需要 scheduled screenshot monitoring、cross-browser rendering comparison、screenshot diffing、OCR、PDF export，或大規模 cloud execution 時，不適合使用它。這個 skill 會從 Chrome/Chromium 擷取 PNG screenshots；它不能取代 Playwright test suites、visual regression platforms，或 hosted screenshot APIs。
它適合 Browser Automation workflows 嗎？
適合。當 agent 在 navigation、login、套用 filters，或等待某個 UI state 之後，需要一個 deterministic capture step 時，full-page-screenshot for Browser Automation 很合適。它最適合作為更完整 browser workflow 中的最後擷取工具，而不是單獨作為完整 navigation 或 testing framework。
如何改進 full-page-screenshot skill 的使用效果
改善 full-page-screenshot inputs
更好的 inputs 會產出更好的 screenshots。請指定頁面狀態，而不只是頁面網址：logged-in account、selected filters、modal state、viewport width、預期已載入的 elements，以及 output filename。如果頁面是動態的，請指出擷取前必須可見的 element 或 section，讓 agent 知道何時需要更長的等待時間或人工確認。
降低常見擷取失敗
最常見的阻礙包括 Chrome remote debugging 未啟用、對需要登入的頁面使用 URL mode、在 lazy content 載入完成前就擷取，以及使用錯誤的 viewport width。修正方式是執行 --check、對 authenticated pages 優先使用 existing-tab mode、針對 public SPAs 增加 --wait，並讓 --width 符合你實際想檢查的 layout。
第一張 PNG 之後持續調整
檢查第一個輸出是否缺少底部內容、sticky headers 是否遮住 sections、是否有 cookie banners、圖片尚未載入，或出現非預期的 responsive layout。接著以不同 width、更長 wait，或已預先準備好的分頁重新執行。如果出現 cookie banner 或 modal，請先在 Chrome 中關閉，再擷取 existing tab，而不是依賴全新的背景 URL。
擴充前先閱讀 script
如果你想自訂這個 skill，請先閱讀 scripts/full-page-screenshot.mjs，再修改 prompts。這個 script 控制 tab discovery、viewport width、DPR、waiting behavior，以及 CDP capture。實用的改進方向可能包括更清楚的 error messages、額外的 wait strategies、output naming conventions，或在 workflow 允許時加入可選的 CSS handling，用來隱藏 sticky overlays。