/page-reduce

name: page-reduce
license: Apache-2.0
compatibility: Requires playwright-cli on PATH. Run `playwright-cli --help` for usage.
description: >-
  Reduce a webpage to a structural skeleton with semantic tokens. Two-phase
  pipeline: Phase 1 injects a browser script that tokenizes content
  ({TEXT}, {HEADING:n}, {IMAGE:WxH}, {CTA:label}, {LINK:label}, {INPUT:type},
  {VIDEO}, {ICON}). Phase 2 applies LLM structural reasoning to collapse
  repeated patterns ({REPEAT:N}), remove decorative wrappers, strip utility
  classes, and produce skeleton.html + manifest.json. Use when migrating
  pages to EDS, analyzing page structure, extracting page blueprints, or
  preparing input for GenAI block generation. Triggers on: reduce page,
  page skeleton, page blueprint, extract structure, tokenize page, page
  reduction, structural skeleton, reduce URL.

page-reduce

Reduce any webpage to a minimal structural skeleton by combining browser-based content tokenization (Phase 1) with LLM structural reasoning (Phase 2).

**Phase 1** (browser script): Injects the blueprint detector + tokenizer into the live page. Detects sections, cleans the DOM (removes scripts, invisible elements, styling tags, comments, tracking attributes), then replaces content with tokens. Output: JSON with `tokenizedHtml` per section.

**Phase 2** (you, the agent): Applies structural reasoning to the tokenized HTML — collapses repeated patterns, removes decorative wrappers, strips utility CSS classes, and generates the final skeleton + manifest.

Input

/page-reduce <URL>

Optional flags the user may provide:

• `--phase1-only` — stop after Phase 1, output raw tokenized JSON
• `--output <dir>` — write files to a specific directory (default: cwd)

Script Location

if [[ -n "${CLAUDE_SKILL_DIR:-}" ]]; then
  BUNDLE="${CLAUDE_SKILL_DIR}/scripts/page-reduce-bundle.js"
else
  BUNDLE="$(find ~/.claude \
    -path "*/page-reduce/scripts/page-reduce-bundle.js" \
    -type f 2>/dev/null | head -1)"
fi

Verify the path is non-empty before continuing. If missing, report an error: the skill's scripts directory needs the combined bundle.

Workflow

Step 1 — Open the URL

Uses `playwright-cli` as the browser layer. Run `playwright-cli --help` for the command reference.

Step 2 — Navigate and prepare the page

After the page is open (Step 3 handles the actual `playwright-cli open` call with the bundle config):

1. Wait for network idle 2. If the `page-prep` skill is available, invoke it to dismiss cookie banners, GDPR consent modals, and other overlays 4. Scroll the full page to trigger lazy-loaded content:

• Scroll to bottom, wait 1-2s
• Scroll back to top, wait 500ms

5. Fix fixed/sticky elements to prevent them from obscuring content:

   [...document.body.querySelectorAll('*')].forEach(el => {
     const s = window.getComputedStyle(el);
     if (s.position === 'fixed' || s.position === 'sticky')
       el.style.position = 'relative';
   });

Step 3 — Inject the bundle and run Phase 1

Inject the bundle via `initScript` in a playwright-cli `--config` JSON, along with a bootstrap script that runs detection asynchronously after the page loads and stores the result in `window.__reduceResult`. Then read it via a synchronous `eval` expression.

REDUCE_CONFIG="/tmp/reduce-config-$$.json"
BOOTSTRAP="/tmp/reduce-bootstrap-$$.js"

# Bootstrap: runs async detection after page load, stores result
cat > "$BOOTSTRAP" << 'EOF'
window.addEventListener('load', async () => {
  await window.xp.detectSections(document.body, window, {
    autoDetect: true,
    highlightBoxes: false,
    highlightSections: false,
  });
  window.__reduceResult = window.__reduceForSkill(document.body, window);
});
EOF

# Config: inject bundle first (exposes window.xp + window.__reduceForSkill),
# then bootstrap (runs detection after load)
echo "{\"browser\":{\"initScript\":[\"$BUNDLE\",\"$BOOTSTRAP\"]}}" > "$REDUCE_CONFIG"

# Open page — initScripts run before any page JS
URL="<target URL from /page-reduce input>"
playwright-cli open "$URL" --config="$REDUCE_CONFIG"
sleep 3  # wait for load + async detection to complete

# Read result — pure expression, no await needed
RESULT=$(playwright-cli eval "JSON.stringify(window.__reduceResult)")

rm -f "$REDUCE_CONFIG" "$BOOTSTRAP"

Parse the returned JSON:

{
  "url": "...", "title": "...", "viewport": { "width": 1280 }, "templateHash": "...",
  "sections": [{ "index": 0, "sectionType": "hero", "xpath": "...", "tokenizedHtml": "...",
    "layout": { "numCols": 2, "numRows": 1 }, "features": ["hasHeading", "hasCTA"] }]
}

If `--phase1-only` was requested, write this JSON to `phase1-output.json` and stop.

Step 4 — Phase 2: Structural reasoning

Read [the Phase 2 rules](references/PHASE2-RULES.md) and apply them to each section's `tokenizedHtml`.

Process each section:

1. **Collapse repeated patterns** — find 3+ structurally identical siblings, keep 2, add `{REPEAT:N}` 2. **Collapse decorative wrappers** — remove classless single-child divs 3. **Strip utility classes** — remove spacing, grid, display, animation classes; keep semantic classes 4. **Strip tracking attributes** — remove `data-analytics-*`, etc. 5. **Collapse complex forms** — >3 fields → `{FORM:N-fields}` 6. **Collapse complex navs** — >5 links → 2 + `{NAV:N-items}` 7. **Preserve table structure** — thead + 2 rows + `{REPEAT:N}` 8. **Strip cookie/overlay panels** — collapse or remove entirely 9. **Re-type sections** — assign accurate types based on structure (e.g., `unknown` with tab panels → `tabs`)

Step 5 — Generate output files

**skeleton.html** — all sections with comment separators:

<!-- section:0 type:hero xpath:/html/body/main/section[1] -->
<section class="hero">
  <h1>{HEADING:1}</h1>
  <p>{TEXT}</p>
  {CTA:Get Started}
  {IMAGE:1200x600}
</section>

<!-- section:1 type:cards xpath:/html/body/main/div[2] -->
<div class="cards-container">
  <div class="