URL → Research Report

Overview

Turn any public web article or research-report page into two deliverables: a self-contained HTML
report (inline CSS/JS + SVG, no CDN, opens offline) and a parallel Markdown version. The HTML
leads with a full-text mind map and key-information callouts, preserves the article's structure and
data, and recreates the key figures as SVG charts when the source page has no usable content
images. The Markdown mirrors the structure (mermaid mind map + tables) for archival / version control.

This skill captures the proven workflow used to convert a 证券之星 IPO research article into
汽车零件工程塑料行业分析_研报_V1_20260816.{html,md}.

When to use

• User pastes a single article/report URL and asks for HTML, MD, 研报, 行业分析, or 归档.
• User wants brain-map + highlights + data visualization, not a raw copy-paste.
• Source is text/data-heavy (financials, market size, CAGR, rankings) — the skill's chart
  re-rendering adds the most value here.

Do not use for: authenticated/paywalled pages, multi-URL crawling jobs, or when the user only
wants the plain text extracted.

Workflow

Step 1 — Fetch content and probe for images

Fetch the article body with WebFetch (prompt: full title, author/source, date, all paragraphs,
sub-headings, and every image src + caption). In parallel, download the raw HTML with curl and
run scripts/extract_images.sh (url) to list all image URLs and separate site chrome
(logos, QR codes, banner ads) from likely content images (charts/figures hosted on image CDNs).

Note: Many syndicated reprints strip the original charts, leaving only site chrome. Treat "no content
images found" as the normal case — it is the signal to recreate charts from the data instead
of embedding the source's logos/QR codes.

Step 2 — Inspect target folder and naming

Locate or ask for the destination folder (e.g. 行业研究/行业基础研究/). Match the workspace's
existing version-naming convention (common pattern: (主题)_研报_V1_YYYYMMDD.{html,md}). Never
overwrite or delete existing files in that folder — only add new ones.

Step 3 — Confirm design decisions (ask if ambiguous)

Before building, confirm two choices when not obvious from context:
1. Visual style — default 清爽研报风 (light); offer 静奢风 (dark + red) if the user's brand
leans that way.
2. Image/chart handling — default recreate key numbers as SVG charts; offer tables only if
the user prefers minimal rendering.

Use AskUserQuestion with ≤2 questions; skip if the request already specifies.

Step 4 — Build the HTML report

Copy references/template.html as the base. It already contains:
- A report header (title, source/date, related ticker, one-line core conclusion, source link).
- A mind-map SVG (edit node text/positions for the actual article tree).
- A key-info card grid + conclusion card.
- Section scaffolding for the article body (keep the original hierarchy and every data point).
- Six chart-render functions (barChart, lineChart, donut, hBars) driven by inline data —
call them with the article's real numbers; mark forecast years (e.g. 2026E) in red.
- A data summary table + footer with source declaration and conversion notes.

Keep the file fully self-contained: inline all CSS/JS, no external CDN, so it renders offline.
Recreate charts from the numbers you extracted; do not embed site logos/QR codes.

Step 5 — Build the parallel Markdown

Copy references/template.md and mirror the same structure: a mermaid mindmap block + text
outline, the key-info callouts, the four article sections, the chart list (pointing to the HTML for
visuals), and the data summary tables. This gives a diff-friendly archival copy.

Step 6 — Validate the HTML

Run scripts/validate_html.js (file.html) (Node, DOM-stub). It asserts the embedded chart script
executes without errors and that all chart container IDs exist. Fix any thrown errors before saving.

Step 7 — Save and report

Write both files to the target folder with the agreed names. Present both via present_files.
Append a one-line note to the workspace daily memory log ((workspace)/.workbuddy/memory/YYYY-MM-DD.md)
recording source URL, deliverable names, and key figures.

Key rules & pitfalls

• Unit normalization: source articles mix 百万元 / 亿元 / 万吨 / 万元·吨. Normalize to one unit
  per table and state the convention in a footnote ("1 亿元 = 100 百万元"). Never silently mix.
• Forecast vs history: render 2026E / 预测 values in a distinguishing color (red) and label
  CAGR on each chart; note that intermediate years are interpolated when only endpoints are given.
• Self-contained only: no CDN script src or link to external CSS — the report must open
  from disk with no network.
• Preserve data fidelity: every CAGR, market-size, and ranking number from the source must appear
  in the report. If a figure is uncertain, mark it "待验证" rather than drop it.
• No destructive actions in the target folder; add-only.

Resources

references/template.html

Full self-contained HTML skeleton: light research-report theme, inline SVG mind map, key-info cards,
article section scaffolding, and the four SVG chart-render functions (bar / line / donut / h-bars).
Edit text + data; reuse the chart functions as-is.

references/template.md

Markdown mirror: mermaid mindmap, key-info callouts, article sections, chart list, data tables.

scripts/extract_images.sh

bash scripts/extract_images.sh (url) — curl the page, list all img src (deduped), and flag
content-image candidates vs site chrome. Use to decide chart-recreation vs image embedding.

scripts/validate_html.js

node scripts/validate_html.js (file.html) — DOM-stub validation that runs the embedded chart
script and checks all chart container IDs exist; exits non-zero on failure.