catalan-adobe/reduce-page

reduce-page

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

/reduce-page <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/reduce-page-bundle.js"
else
  BUNDLE="$(find ~/.claude \
    -path "*/reduce-page/scripts/reduce-page-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 — Detect browser layer

Use the browser-universal skill to detect what browser tool is available (playwright-cli, cmux-browser, or CDP). If browser-universal is not available, fall back to playwright-cli directly.

Step 2 — Navigate and prepare the page

1. Open the URL in the browser
2. Wait for network idle (or equivalent for the browser layer)
3. 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 script found in Step 0 into the page. The bundle contains both the blueprint detector and the reducer.

After injection, execute in the page context:

// Run detection
await window.xp.detectSections(document.body, window, {
  autoDetect: true,
  highlightBoxes: false,
  highlightSections: false,
});

// Run Phase 1 reduction (on clones — non-destructive)
const result = window.__reduceForSkill(document.body, window);
JSON.stringify(result);

Parse the returned JSON. This is the Phase 1 output:

{
  "url": "https://example.com",
  "title": "Page Title",
  "viewport": { "width": 1280 },
  "templateHash": "...",
  "sections": [
    {
      "index": 0,
      "sectionType": "hero",
      "xpath": "/html/body/main/section[1]",
      "xpathWithDetails": "//section[@class='hero']",
      "tokenizedHtml": "<section class='hero'>...</section>",
      "layout": { "numCols": 2, "numRows": 1 },
      "features": ["hasHeading", "hasBackgroundImage", "hasCTA"],
      "section": null
    }
  ]
}

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 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="card">
    {IMAGE:400x300}
    <h3>{HEADING:3}</h3>
    <p>{TEXT}</p>
    <a>{LINK:Read more}</a>
  </div>
  <div class="card">
    {IMAGE:400x300}
    <h3>{HEADING:3}</h3>
    <p>{TEXT}</p>
    <a>{LINK:Read more}</a>
  </div>
  {REPEAT:4}
</div>

Pretty-print with 2-space indentation.

manifest.json — structured metadata per section. See Phase 2 rules for the full schema.

Write both files to the output directory.

Step 6 — Report summary

Print:

• Number of sections detected
• Section types (with any re-typings noted)
• Size stats: original HTML → Phase 1 → Phase 2 skeleton
• Paths to output files

Phase 1 Token Reference

These tokens are produced by the browser script (Phase 1):

| Token | Source Signal | |-------|-------------| | {TEXT} | Non-empty text node | | {HEADING:n} | <h1>-<h6> tag | | {IMAGE:WxH} | <img> with both dimensions > 64px | | {ICON} | <img>/<svg> with either dimension ≤ 64px | | {VIDEO} | <video> or iframe with video domain src | | {CTA:label} | <a> with styled background/border | | {LINK:label} | <a> with href (plain style) | | {INPUT:type} | <input> or <textarea> | | {SELECT:N} | <select> with N options |

Dependencies

• A browser layer: playwright-cli (preferred), cmux-browser, or CDP
• Sibling skills (optional, degrade gracefully if missing):
  • browser-universal — browser layer detection
  • page-prep — overlay dismissal

Updating the Bundle

The bundle at scripts/reduce-page-bundle.js is built from the site-transfer-blueprint-detector repo. To update:

cd <detector-repo>
npm run build        # builds dist/detect.js
npm run build:skill  # builds dist/reduce-for-skill.js
cat dist/detect.js dist/reduce-for-skill.js > <skills-repo>/skills/reduce-page/scripts/reduce-page-bundle.js