interactive-doc-builder

name	interactive-doc-builder
description	Converts long technical discussions, documentation, or tutorials into beautiful, interactive, single-file HTML dashboards. Use this skill when the user asks to format a discussion, create a cheat sheet, or summarize documentation into an interactive HTML file to avoid reading long walls of text.

Interactive Doc Builder

Transforms dense technical content into structured, interactive, single-file HTML dashboards with dark mode, search, and dictionary popovers.

Step 1: Analyze Content & Prepare Translation

Read the provided content. Identify:

1. Main Categories — broad topic groups (e.g., "核心交互", "配置管理")
2. Individual Items — specific commands, APIs, or rules per category
3. Technical Jargon — terms needing interactive tooltip explanations

Language: Unless requested otherwise, all non-technical UI text (headings, nav, descriptions) MUST be in natural, fluent Chinese.

Step 2: Read the Template

Read the template to understand all injection targets:

read_file -> assets/template.html

Placeholders to replace:

Placeholder	Purpose	Example
{{DOC_TITLE}}	Browser tab title	"代理网络原理指南"
{{NAV_TITLE}}	Top-left nav brand	"Interactive Doc Builder"
{{VERSION_OR_TAG}}	Pill above heading	"v1.0 · 核心技能"
{{MAIN_HEADING}}	Large h1 heading	"Claude Code 指令全指南"
{{SUBTITLE_DESC}}	Subtitle under h1	"一条命令解决..."
{{SEARCH_PLACEHOLDER}}	Search input text	"搜索特性、配置..."
{{NAV_LINKS}}	Category anchor links	See below
{{CATEGORIES_HTML}}	Main body sections/cards	See below
{{DICTIONARY_JSON}}	Tooltip dictionary JSON	See below

Step 3: Construct HTML Components

Navigation Links ({{NAV_LINKS}})

One <a> per category. First link gets class="active":

<a href="#cat-1" class="active">类别一</a>
<a href="#cat-2">类别二</a>

Dictionary JSON ({{DICTIONARY_JSON}})

Raw JSON string with Chinese descriptions. Keys match data-term attributes:

{
  "gfw": { "title": "GFW (防火墙)", "desc": "中国国家防火墙，检查并拦截不符合规定的网络请求。" },
  "proxy": { "title": "代理 (Proxy)", "desc": "中间服务器，帮你转发请求到目标网站。" }
}

Interactive Terms (in card descriptions)

Wrap jargon with <span class="term" data-term="KEY"> — KEY must match a dictionary entry:

<span class="term" data-term="gfw">防火墙</span>

Categories HTML ({{CATEGORIES_HTML}})

One <section> per category, containing a grid of cards:

<section id="cat-1" class="category">
  <h2 class="section-title">⚡ 类别名称</h2>
  <div class="grid">
    <div class="card" data-search="English Chinese Keywords">
      <div class="card-top">
        <span class="card-title">项目名称</span>
        <span class="badge blue">标签</span>
      </div>
      <p class="card-desc">详细描述。包含 <span class="term" data-term="gfw">防火墙</span>。</p>
      <div class="code-block" data-copy="exact code to copy">显示的代码
        <button class=>复制
      
    
  

Badge colors: blue, green, amber, purple, red.

Step 4: Assemble and Write

Replace ALL placeholders in the template. Write the final HTML to the destination path using write_file.

Step 5: Final Review

• {{DICTIONARY_JSON}} is valid JSON, properly escaped
• All data-term values match dictionary keys
• All data-copy values match displayed code
• All UI text is in Chinese (unless English requested)
• No {{PLACEHOLDERS}} remain in output
• File is saved to user's requested path