PDF To HTML Skill for Claude

PDF to HTML

Turn a PDF into a single, self-contained, readable HTML file — images, tables,

charts and reading order preserved — and optionally translate it, keeping every

figure in place.

The pipeline is extract → look → (translate) → build → verify. The middle

"look" and final "verify" steps are where faithfulness actually comes from: a PDF

is a layout, not just a text stream, so you read the rendered pages before

building and the rendered HTML before delivering.

This skill runs inline (no context: fork): translation orchestrates a

Dynamic Workflow, and a subagent cannot spawn one.

When to use / not use

• Use when the goal is to *read* a PDF as HTML/web page, to convert a PDF to

a styled HTML document, or to translate a PDF into another language while

keeping its figures and tables.

• doc-to-markdown instead if they want plain Markdown text (no styling, figures optional).
• pdf-creator instead for the reverse direction (Markdown → PDF).

What it does NOT do

• Scanned/image-only PDFs (no text layer): OCR first (e.g. ocrmypdf), then use this.
• Complex multi-column tables: cell *text* is preserved and readable, but column

alignment can flatten into a text flow — PyMuPDF reads a table as text blocks, not a

grid, so the grid lines are gone. Tables that are *images* in the PDF survive as

images. If the table's grid structure is essential, use doc-to-markdown (pandoc

rebuilds real tables) or convert that page separately.

• Pixel-perfect facsimile: output is a clean *re-flow* that keeps images and

reading order, not a 1:1 copy of the original page layout.

• Rewriting: it translates and re-lays-out; it does not summarize, add a TL;DR,

or editorialize. Faithfulness is the point (see Fidelity below).

Dependencies

uv (runs Python with inline deps), Google Chrome or Chromium (visual

verification). Python packages come via uv run --with: PyMuPDF, Pillow, numpy.

Nothing to pre-install beyond Chrome and uv.

Workflow

Copy this checklist and tick as you go:

- [ ] 1. Extract structure + render pages   (extract_pdf.py)
- [ ] 2. Read pages/*.png — SEE the layout, find content vs decorative images
- [ ] 3. (only if translating) run the translation workflow
- [ ] 4. Build the single-file HTML          (build_html.py)
- [ ] 5. Verify visually                      (verify_render.py → Read every segment)
- [ ] 6. Deliver the .html

1. Extract

uv run --with pymupdf python scripts/extract_pdf.py input.pdf

Writes input-build/ with structure.json (text blocks with font sizes + image

blocks flagged decorative), images/, and pages/ (one PNG per page).

2. Look before you build

Read input-build/pages/*.png. This is not optional: you need to see the real

layout, confirm which images are content vs decoration, and spot tables/charts.

For a long PDF, read every page; for a short one it's quick. This is also where

you understand the document well enough to translate it well.

3. Translate (optional)

Only if the user asked for another language. Read

references/translation_workflow.md and

follow it: a Dynamic Workflow translates pages in parallel, captions data charts,

and reconciles terminology. It produces two overlay files (units.json,

caps.json) that step 4 consumes. Do not hand-translate inline for anything

longer than a page — the workflow keeps terminology consistent and is far faster.

4. Build

# original-language HTML
uv run --with Pillow python scripts/build_html.py input-build/structure.json --out output.html

# translated HTML (overlays from step 3)
uv run --with Pillow python scripts/build_html.py input-build/structure.json --out output.html \
    --translation input-build/units.json --captions input-build/caps.json --lang zh-CN

build_html.py is data-driven: it infers heading levels from font size (most

common size = body; larger steps up to h3/h2/h1), drops decorative images, and

inlines content images as compressed base64 → one portable file. It is not

hand-tuned to any document. If a particular PDF has an unusual structure (e.g.

multi-column, sidebars, a figure the size heuristic misreads), read the script and

adjust — it's short and meant to be edited per document.

5. Verify visually (mandatory)

uv run --with Pillow --with numpy python scripts/verify_render.py output.html

Then Read every seg-*.png and check: fonts render (no tofu boxes), no

clipped tables/figures, headings/lists look right, all expected images present.

Text being correct does not mean the render is correct (failure_cases #7). Fix and

re-verify until it's clean.

A quick structural cross-check is fine too, but count occurrences correctly:

grep -o '<figure>' output.html | wc -l — not grep -c (failure_cases #1).

6. Deliver

Hand over the single .html. It's self-contained (images inlined), so it opens

with a double-click and nothing can go missing.

Scripts

| Script | Run with | Purpose |

|--------|----------|---------|

| scripts/extract_pdf.py | uv run --with pymupdf | PDF → structure.json + images/ + page renders |

| scripts/build_html.py | uv run --with Pillow | structure.json (+ optional translation/captions) → single-file HTML |

| scripts/verify_render.py | uv run --with Pillow --with numpy | headless-Chrome render → readable PNG segments |

Fidelity (read before translating)

The deliverable looks authoritative, so wrong content is worse than ugly content.

The non-negotiable rules — and the specific ways this has gone wrong before — are

in references/failure_cases.md. The one that bites

hardest: **never give a real person an inferred translated name, and copy every

number/proper-noun verbatim** (failure_cases #6). Read that file before any

translation run; skim it before any run.

Next Step

After producing the HTML, suggest the natural follow-up:

Conversion complete: output.html (single self-contained file).

Options:
A) Make a PDF of it — run /daymade-docs:pdf-creator if you want a print/share copy (Recommended if they need to send it)
B) Extract the text as Markdown instead — run /daymade-docs:doc-to-markdown (if they wanted editable text, not a reading page)
C) No thanks — the HTML is what I wanted