/page-prep

name: page-prep
license: Apache-2.0
compatibility: Requires playwright-cli on PATH. Run `playwright-cli --help` for usage.
description: >-
  Prepare any webpage for clean interaction by detecting and removing disruptive
  overlays (cookie banners, GDPR consent, modals, popups, newsletter signups,
  paywalls, login walls). Uses a cached database of 300+ known CMPs
  (Consent-O-Matic + EasyList) combined with heuristic DOM scanning. Injects
  a self-contained script via playwright-cli. ALWAYS use this skill before
  taking screenshots, scraping content, or automating interaction on any
  webpage that might have overlays blocking the view or preventing interaction.
  Triggers on: page prep, clean page, remove overlays, dismiss cookie banner,
  page blocked, overlay cleanup, consent banner, prepare page, unblock page,
  clear popups, cookie popup.

Page Prep

Detect and remove overlays (cookie banners, GDPR consent, modals, paywalls, login walls) before screenshots, scraping, or browser automation. Uses `playwright-cli` as the browser layer. Node 22+ required. No npm dependencies. Run `playwright-cli --help` for the command reference.

Mode

The `mode` parameter controls dismiss strategy and verification depth. Default is `thorough`. Callers can request `quick` mode in natural language ("use page-prep in quick mode") or the agent infers from context.

| Mode | Dismiss | Verification | Use case | |------|---------|--------------|----------| | `thorough` (default) | Click-first, hide as fallback | DOM check + viewport screenshot | Persistent sessions, interactive work | | `quick` | Hide-only (CSS injection) | DOM check only | Ephemeral sessions, repeated evaluations |

Script Location

if [[ -n "${CLAUDE_SKILL_DIR:-}" ]]; then
  PAGE_PREP_DIR="${CLAUDE_SKILL_DIR}/scripts"
else
  PAGE_PREP_DIR="$(dirname "$(command -v overlay-db.js 2>/dev/null || \
    find ~/.claude -path "*/page-prep/scripts/overlay-db.js" -type f 2>/dev/null | head -1)")"
fi

Store in `PAGE_PREP_DIR` and prefix all commands below with `node "$PAGE_PREP_DIR/overlay-db.js"`.

Workflow

Step 1 — Locate scripts

Resolve `PAGE_PREP_DIR` using the block above. Verify the path is non-empty before continuing.

Step 2 — Refresh the database

node "$PAGE_PREP_DIR/overlay-db.js" refresh

Updates the local overlay database. Skips if cache < 7 days old; use `--force` to refresh now.

Step 3 — Bundle the injectable script

BUNDLE="$(node "$PAGE_PREP_DIR/overlay-db.js" bundle)"

Step 4 — Inject via playwright-cli

Evaluate `$BUNDLE` in the active page via `playwright-cli eval`. Returns a detection report.

playwright-cli eval "$(node "$PAGE_PREP_DIR/overlay-db.js" bundle)"

Step 5 — Read the detection report

Parse the detection report. Each overlay has a `source` field: `"cmp-match"` or `"heuristic"`.

Step 6 — Resolve dismiss strategy per overlay

• **cmp-match**: the report includes a complete `dismiss` recipe. Use it directly.
• **heuristic** (`dismiss: null`): compose a dismiss sequence — try Escape key,

then close buttons, then element removal (see Agent Fallback).

Step 7 — Produce a recipe manifest

Combine hide and dismiss recipes for all detected overlays into a single manifest (see Recipe Manifest Format). Include the global `scroll_fix` if `scroll_locked` is true.

Step 8 — Execute the recipe

**Thorough mode (default) — click-first:**

1. For each **cmp-match** overlay: execute `dismiss.steps` sequentially. Clicking sets consent cookies that persist across all tabs — overlay will not reappear. 2. For each **heuristic** overlay (`dismiss: null`): run the Agent Fallback sequence (see below). 3. Apply `scroll_fix` if `scroll_locked` is true. 4. If any click fails or times out after 5 seconds: fall back to the hide path for that overlay (batch-evaluate its `hide.js` rule).

**Quick mode — hide-only:**

1. Batch-evaluate all `hide.js` rules in one `playwright-cli eval` call. 2. Apply `scroll_fix` if `scroll_locked` is true. 3. Skip interactive dismiss entirely.

Step 9 — Verify the page is clean

Step 9a — DOM residual check (both modes)

Find remaining `position:fixed` blockers the script didn't catch:

playwright-cli eval "JSON.stringify([...document.querySelectorAll('*')].filter(el => { var s = getComputedStyle(el); var r = el.getBoundingClientRect(); return s.position === 'fixed' && parseInt(s.zIndex, 10) > 1000 && (el.offsetWidth > 100 || el.offsetHeight > 100) && r.right > 0 && r.bottom > 0 && r.left < window.innerWidth && r.top < window.innerHeight; }).map(el => { var s = getComputedStyle(el); return { tag: el.tagName, id: el.id, cls: (el.className || '').slice(0, 50), z: s.zIndex, w: el.offsetWidth, h: el.offsetHeight }; }))"

This returns `position:fixed` elements with `z-index > 1000`, non-trivial dimensions, and **within the visible viewport** — off-screen elements (e.g. slide-in panels in their closed state) are excluded by the `getBoundingClientRect()` bounds check. Ignore legitimate elements (navigation bars, toolbars) and remove the rest:

1. For each suspicious element, evaluate `document.querySelector('<selector>')?.remove()`. 2. Re-run the check. 3. Repeat until only legitimate page elements remain.

In quick mode, stop here. In thorough mode, continue to Step 9b.

Step 9b — Viewport screenshot verification (thorough mode only)

1. Take a **viewport screenshot** (not fullpage):

   playwright-cli -s <session> screenshot --filename .playwright-cli/page-prep-check.png

Then use the Read tool on `.playwright-cli/page-prep-check.png` to view it. Note: `--filename` must be a path within the project root or `.playwright-cli/` — `/tmp/` paths are not allowed. Do not pass the path as a positional argument; that is interpreted as a CSS selector, not a file path. 2. Visually analyze the screenshot: are there visible overlays, banners, modals, or backdrop