custom-html-research-report

Generate self-contained offline HTML research reports with inline SVG diagrams and bilingual support.

1|Updated Apr 3, 2021
One-click install
npx skills add https://github.com/NaoyaMiyagawa/dotfiles --skill custom-html-research-report-naoyamiyagawa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: custom-html-research-report
Source: https://github.com/NaoyaMiyagawa/dotfiles/tree/main/.ai/skills/custom-html-research-report
Command: npx skills add https://github.com/NaoyaMiyagawa/dotfiles --skill custom-html-research-report-naoyamiyagawa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Long research findings delivered as plain markdown walls are hard to read and fail to communicate flows, architectures, and comparisons visually. This Skill turns completed research into a single styled HTML page with hand-written SVG diagrams, comparison tables, and optional bilingual content. ## Core Features & Use Cases - Self-contained HTML output: Produces one .html file with all CSS/JS inlined, zero network dependencies, dark-mode support, and offline rendering from disk. - Visual-first structure: Maps findings to the right form — inline SVG diagrams for flows and architectures, tables for comparisons, timelines for sequences — with labeled arrows and sourced claims. - Bilingual EN/JA pages: Ships a drop-in language switcher (assets/lang-switch.html) with paired lang markup, persisted preference, an "s" keyboard shortcut, and scroll anchoring to prevent layout drift. - Use Case: After finishing a deep-research task on a new protocol, render the findings as a living HTML reference page at ~/dotfiles/.ai/research/ that you extend in later sessions instead of minting new files. ## Quick Start Render the research findings from our conversation as a self-contained HTML report page with an architecture diagram and comparison tables.

Frequently Asked Questions about custom-html-research-report

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn research findings into an HTML report page?

Finish the research first, then map each finding to a visual form: SVG diagrams for flows and architectures, tables for comparisons, timelines for sequences. Write one self-contained .html file with all CSS and JS inlined so it renders offline.

How do I create a bilingual English Japanese HTML page?

Ship both languages as real lang="en" and lang="ja" markup pairs with CSS hiding one side, never machine-translated at view time. The bundled lang-switch.html snippet provides the switcher markup, persisted preference, the "s" shortcut, and scroll anchoring.

Can the HTML report use CDNs, web fonts, or mermaid diagrams?

No. The page must render offline from disk with zero network access, so all CSS and JS are inlined and diagrams are hand-written as inline SVG. External CDNs, web fonts, and mermaid are explicitly disallowed.

Why does text jump when switching languages on a bilingual page?

Layout drift happens when column widths use ch or em units or when per-language font-size and line-height overrides change the type metrics. Use rem widths, one shared type scale, and anchor the scroll position across the switch.

When should research stay as markdown instead of an HTML page?

If no finding earns a visual form — no flow, architecture, comparison, or sequence — the skill says to deliver markdown instead of decorating plain text. Diagrams that merely restate section headings should be cut.