Docs to Dual-View Visual HTML

The Problem

When you have a PDF, Word(.docx), or Excel(.xlsx) report, reading the full text is time-consuming, while screenshots lose structure. This skill converts a single document into an offline, self-contained HTML page: an outline on the left and a resizable split view on the right, showing source text and chart-based interpretation side by side. You can keep both panes visible, drag the divider, or switch to text-only / chart-only mode.

How It Works

The workflow starts by extracting content into doc.json, then plans it offline into plan.json:
- PDF: chapters are split by bookmarks when available
- Word: chapters are split by heading styles
- Excel: worksheets are split by blank rows

The planner maps numbers and tables to bar, line, or pie charts, process text to Mermaid flow / timeline, and hierarchical concepts to mindmap; plain prose becomes summary cards instead of forced visualizations. Before building the final HTML, it shows a visualization checklist and eight style presets such as tech-blue, forest-green, and night-dark. After confirmation, it inlines ApexCharts, Mermaid, and other dependencies into one file. The generated page offers top-level views for text and charts, text only, and charts only. The outline starts with an Overview that aggregates key metrics, a structure mind map, and core conclusions. Export is split into two independent entries: text to Word, PDF, Markdown, or TXT; charts to PDF or PPT.

Limits to Know

Only one file is processed at a time, with a 40 MB size cap. .doc and .xls files must be saved as .docx or .xlsx first. Pure-image PDFs or Word documents can use the runtime's built-in cloud OCR to backfill text; if OCR is unavailable, it safely falls back to text-only display. Editing synchronization applies only to data charts; Mermaid flow and mindmap structures must be regenerated after content changes.