Imported from schizophrenicmaniac/Brand-AI-Readiness-Audit-Adobe (skills/render-extraction-audit/SKILL.md). Install upstream with npx skills add schizophrenicmaniac/Brand-AI-Readiness-Audit-Adobe --skill render-extraction-audit. Copyright stays with the author (MIT).

Render-Extraction Audit

Diagnostic question: Can the machine read what's there?

This skill maps to Appendix C of the Brand AI Readiness framework. It identifies facts and content that a human visitor can see on the rendered page but that a simple text extractor (no JS engine, no OCR) would miss entirely. A failure at this layer means the content is technically reachable (crawl-access passed) but the machine cannot extract or quote the actual facts.

When to Use

Invoke this skill when:

• Auditing a website's readiness for AI-driven discovery and citation.
• Diagnosing why a brand's specific facts (pricing, specs, contact) are missing from AI assistant answers even though the pages are crawlable.
• The audit orchestrator invokes it as step 2 in the pipeline (after crawl-access-audit confirms the pages are reachable).

This skill receives the list of reachable pages from the orchestrator. Pages flagged as unreachable/blocked by crawl-access-audit are skipped.

Inputs

Checks

Group A — JS Rendering Gap (Content only appears after JS execution)

Group B — Opaque Media (Facts locked in non-text formats)

Group C — DOM-Present but Interaction-Gated

Group D — Signal-to-Noise

Procedure

Runtime target: < 2 minutes for a typical site (homepage + up to 10 pages).

Step 1 — Fetch raw HTML and perform static analysis

Run the bundled script:

python3 scripts/html_fetcher.py --url <site_root_url> [--pages <paths>] [--max-pages 10]

From the JSON output, extract per page:

• raw_text and raw_text_length — baseline for JS diff
• spa_detection — framework, shell status, noscript quality
• text_ratio — boilerplate analysis
• images, svgs, canvases, videos, audios, iframes, pdf_links — media inventory
• tabs_accordions, infinite_scroll_markers — interaction-gated patterns
• icon_font_elements, css_content_declarations — pseudo-text patterns
• key_facts_in_raw_text — facts already extractable without JS

Save the output to a temporary file for Step 2.

Step 2 — Render pages in headless browser

Run the bundled script, passing the raw data for diff computation:

python3 scripts/rendered_dom_extractor.py --url <site_root_url> [--pages <paths>] [--max-pages 10] [--raw-data <path_to_step1_output.json>]

From the JSON output, extract per page:

• rendered_text and rendered_text_length — post-JS text
• js_content_diff — text present only after JS execution
• ajax_content_delta — text that arrived between DOMContentLoaded and network-idle
• shadow_dom_components — shadow DOM hosts with inner text
• hidden_panels — tab/accordion panels that are hidden
• lazy_loaded_images — images with lazy loading
• load_more_patterns — infinite scroll / load-more buttons

Step 3 — Generate findings from analysis

For each page, compare Step 1 and Step 2 outputs to generate findings:

RE-01 (JS rendering gap):

• If js_content_diff.js_dependent_text_length > 50 chars: flag.
• Run key-fact detection on js_dependent_text. Escalate severity if key facts found.
• Severity: high if key facts, medium if general content.

RE-02 (SPA shell):

• If spa_detection.is_shell is true: flag.
• Severity: high if noscript_quality is "missing" or "insufficient", medium if noscript is "adequate".

RE-03 (AJAX-loaded content):

• If ajax_content_delta > 500 chars: flag.
• Severity: medium (content arrives late, fragile for crawlers).

RE-04 (Images without alt):

• For each image where is_decorative is false AND alt_quality is "missing", "empty", "generic", or "filename": flag.
• Severity: per key-fact escalation (check if image context suggests key facts) or medium default.

RE-05 (SVG text):

• For each SVG without aria_label and without adjacent text equivalent: flag.
• Severity: medium (exact content unknown without rendered inspection).

RE-06 (Canvas without fallback):

• For each canvas where has_fallback_content is false AND not decorative: flag.
• Severity: high if context suggests content (id/class contains "chart", "product", "config").

RE-07 (Video/audio without transcript):

• For each video/audio where is_background is false AND has_track_captions is false AND has_transcript_link is false: flag.
• Severity: high (information locked in media).

RE-08 (PDF-only facts):

• For each PDF link where surrounding text is thin (<50 chars summary): flag.
• Severity: medium default, high if link text suggests key facts.

RE-09 (Icon fonts / CSS pseudo-text):

• For icon fonts with ligature_risk true: flag (pollutes extracted text).
• For CSS content declarations with meaningful text: flag.
• Severity: low (noise pollution, not content hiding).

RE-10 (Tabs/accordions):

• For each hidden_panels entry where isCssHidden is true: low severity (content in DOM).
• For tabs/accordions detected in Step 1 but with NO matching rendered DOM content: high severity (content absent from DOM).

RE-11 (Shadow DOM):

• For each shadow DOM component with innerTextLength > 50: flag.
• Severity: high if text contains key facts, medium otherwise.

RE-12 (Iframes):

• For each iframe where is_suppressed is false: flag.
• Severity: high if cross-origin and content-bearing, medium if same-origin, low if same-origin and independently indexable.

RE-13 (Infinite scroll):

• If infinite_scroll_markers found in Step 1 OR load_more_patterns found in Step 2: flag.
• Severity: medium (initial DOM shows partial content).

RE-14 (Boilerplate ratio):

• If text_ratio.ratio < 0.30: flag.
• If text_ratio.main_content_identified is false: flag (medium — can't isolate content).
• Severity: low for ratio < 0.30, medium if no main content area identifiable.

Step 4 — Apply false-positive suppression

Before finalizing findings, suppress false positives using the rules in references/render-checks-detail.md §8:

• Don't flag decorative images (role="presentation", aria-hidden="true", tracking pixels).
• Don't flag screen-reader-only hidden text (.sr-only, .visually-hidden) — this is GOOD practice.
• Don't flag JS-dependent content if <noscript> provides an adequate equivalent.
• Don't flag PDF links with adequate HTML summary (>50 chars).
• Don't flag icon fonts used for decorative/navigational icons.
• Don't flag tabs/accordions where hidden content IS in the DOM (just CSS-hidden) — downgrade to low.
• Don't flag iframes from suppressed sources (analytics, ads, social, chat widgets).
• Don't flag canvas used for background effects (no controls, decorative classes).
• Don't flag background videos (autoplay + muted + loop + no controls).

Step 5 — Compile and return findings

Assemble all findings into the output schema below. Assign a unique finding_id (re-001, re-002, ...) to each. Sort by severity (critical → info). Return the findings list to the audit orchestrator.

Output (shared finding contract)

Findings use the marketplace-wide contract defined in lib/report.py (see the root README.md). The deterministic compiler scripts/render_analyzer.py turns the raw static (and optional rendered-DOM) JSON into contract findings. When Playwright is not installed the compiler runs the static heuristics only and still emits valid findings.

{
  "id": "re-8b1c04",
  "title": "3 content image(s) lack usable text alternatives",
  "severity": "high",
  "skill": "render-extraction-audit",
  "evidence": {
    "url": "https://example.com/pricing",
    "source": "html",
    "locator": "img[alt]",
    "observed": "alt missing/generic on: /img/pricing-table.png, /img/tiers.png"
  },
  "suggested_action": {
    "summary": "Add descriptive alt text (or an HTML text equivalent); if the image carries facts like a pricing table, also provide those facts as HTML.",
    "priority": "P1"
  }
}

Required per finding: id, title, severity, evidence{url, source, observed}, suggested_action{summary, priority}.

Severity Guide

See references/render-checks-detail.md for the full severity decision tree and override rules.