` when present). If the intended capture region differs from the default, tell the user the exact `--selector` (tag / `#id` / `.class`) to use. ### Step 2: Integrate the export button ```bash python3 "$SKILL_DIR/scripts/integrate_screenshot.py" integrate <html> \ --selector <css> --width 760 --scale 2 --title "<下载文件名>" ``` - `--width` sets the fixed capture width (default 760px; `0` follows content). - `--scale` sets output resolution (default 2, suitable for sharing). - Without `--out`, the source file is rewritten in place. Prefer a copy or `--out` when the user wants to keep the original. The script embeds `modern-screenshot` inline (self-contained, offline), wraps the capture region in `<div id="capture">`, and injects the floating button plus a copyable error hint. ### Step 3: Verify end-to-end ```bash python3 "$SKILL_DIR/scripts/integrate_screenshot.py" verify <html> \ --scale 2 --chrome "/path/to/chrome" ``` The verifier renders the page in headless Chrome and asserts that the exported PNG size equals `node.scrollWidth/Height × scale` exactly. A size mismatch is the signal that the container width was measured wrong and text may reflow — fix the `--width` or `--selector` and re-run. Apply every item in `references/acceptance-checklist.md`. Report the real input, the exact command, the `OK out=WxH …` result, and the output path. Do not invent a passing verification or a score. ### Step 4: Report and record Report the output path, selector, width, scale, and verification result. Record a real case in `cases/cases.json` only when a genuine integration occurred; do not manufacture one. ## Output contract Return: - the target HTML path and whether it was rewritten in place or to a new file; - the capture selector, fixed width, and scale used; - the headless-Chrome verification result (`OK out=… node=… expect=…`); - any remaining gaps (e.g. web-font embedding, animated content, cross-origin media). ## Dependencies - Runtime: Python 3.8+ (stdlib only — no PyYAML needed for the CLI itself). - Verification: headless Chrome/Chromium (`--headless=new --dump-dom`). - The target page needs no build step; `modern-screenshot` is embedded inline.

` plus its preceding top-level `

`; otherwise `

`; otherwise `` contents); - any CSS design tokens (`--surface`, `--ink`, `--line`, `--accent`) so the injected button adapts to light/dark theme; the snippet already falls back to neutral colors when tokens are absent; - the download filename (from `` when present). If the intended capture region differs from the default, tell the user the exact `--selector` (tag / `#id` / `.class`) to use. ### Step 2: Integrate the export button ```bash python3 "$SKILL_DIR/scripts/integrate_screenshot.py" integrate <html> \ --selector <css> --width 760 --scale 2 --title "<下载文件名>" ``` - `--width` sets the fixed capture width (default 760px; `0` follows content). - `--scale` sets output resolution (default 2, suitable for sharing). - Without `--out`, the source file is rewritten in place. Prefer a copy or `--out` when the user wants to keep the original. The script embeds `modern-screenshot` inline (self-contained, offline), wraps the capture region in `<div id="capture">`, and injects the floating button plus a copyable error hint. ### Step 3: Verify end-to-end ```bash python3 "$SKILL_DIR/scripts/integrate_screenshot.py" verify <html> \ --scale 2 --chrome "/path/to/chrome" ``` The verifier renders the page in headless Chrome and asserts that the exported PNG size equals `node.scrollWidth/Height × scale` exactly. A size mismatch is the signal that the container width was measured wrong and text may reflow — fix the `--width` or `--selector` and re-run. Apply every item in `references/acceptance-checklist.md`. Report the real input, the exact command, the `OK out=WxH …` result, and the output path. Do not invent a passing verification or a score. ### Step 4: Report and record Report the output path, selector, width, scale, and verification result. Record a real case in `cases/cases.json` only when a genuine integration occurred; do not manufacture one. ## Output contract Return: - the target HTML path and whether it was rewritten in place or to a new file; - the capture selector, fixed width, and scale used; - the headless-Chrome verification result (`OK out=… node=… expect=…`); - any remaining gaps (e.g. web-font embedding, animated content, cross-origin media). ## Dependencies - Runtime: Python 3.8+ (stdlib only — no PyYAML needed for the CLI itself). - Verification: headless Chrome/Chromium (`--headless=new --dump-dom`). - The target page needs no build step; `modern-screenshot` is embedded inline.