Interactive Doc 是一个文档产出技能，核心是“同一内容、两种呈现”：以 Obsidian 友好的 Markdown 文件（.md）为权威来源，再派生出一份自包含 HTML 页面，供人直接阅读而非 grep 检索。
用途与主要能力
- 为已有 Markdown 研究笔记、Obsidian 页面或长分析生成配套 HTML 页面。
- 从零创建新文档时，先写出可独立成立的 .md，再从它派生 HTML。
- 支持三类一等文档类型：架构/模块图（组件通信的方框与箭头，标注热路径和入口点）、概念讲解（含可交互演示、对比表和术语表）、并排对比（两三种方案或仓库并列，附“各自借鉴了什么”的综合段落）；特性说明（TL;DR + 可折叠步骤 + 标签页代码 + FAQ）受支持但非一等。
- HTML 可加入交互、手绘 SVG 图、配色与布局，但不增加 .md 之外的实质内容。
- 用户有 3 份以上文档时，可提议生成 index.html 索引页，按类型分组链接所有文档。
- 可将 HTML 作为 Claude Code Artifact 发布为托管页面；此时 .md 仍是权威来源，发布页只是共享视图。
使用方式
- 工作流 A（渲染已有研究）：完整阅读源 .md（含 frontmatter、正文、链接、内嵌图），识别文档类型，阅读 house-style 与对应类型参考，构建忠实渲染的 HTML，把发现的缺口（如引用了未定义的组件、未展示的图、指向不存在笔记的 wiki 链接）在结尾以“我注意到的事项”列出而非静默修补；HTML 与源 .md 同 slug 存放在同目录。源 .md 默认只读，若渲染发现真实缺口可提议修改，但需用户同意。
- 工作流 B（从零创建）：先确认要记录的具体内容（组件名、文件路径、真实数据），选定文档类型并阅读相关参考，先写 Obsidian 原生 .md（YAML frontmatter、callout 块、wiki 链接、Mermaid 图、带文件路径的代码块、完整散文），再从 .md 派生 HTML，HTML 中每个小节都能追溯到 .md 的小节，两份文件同 slug 保存。
- 文件命名：docs/<topic-slug>.md 与 docs/<topic-slug>.html 成对；Obsidian 库中 .md 放入相应文件夹，.html 并排放置（Obsidian 忽略它）；无库的项目仓库默认放 docs/ 目录。
- .md 的 frontmatter 至少包含 title、tags、type、html（配套文件路径），可选 date。
- wiki 链接用 [[双括号]] 形式，渲染 HTML 时转为普通 <a href> 锚点，例如 [[skill-md-explainer]] 转为指向 ./skill-md-explainer.html 的链接。
- callout 用 Obsidian 语法（如 > [!tldr]、> [!warning]），在 HTML 中映射为 .tldr / .callout 组件。
- 代码块围栏同时标注语言和路径，HTML 中路径显示为代码块下方的小徽章。
- 图：.md 用 Mermaid（便于 Obsidian 渲染和检索），HTML 用独立手绘 SVG；两者必须方框、连接、标签、颜色一致，改动需同一次编辑同步；工作流 A 中源 .md 的 Mermaid 要精确对应，若无图但架构明显需要，作为“注意到”的缺口提出并先征得同意。
House style 要点
- HTML 单文件自包含：CSS 在 <style>、JS 在 <script>，首次加载后可离线使用；图表库可用 CDN，但优先手写 SVG。
- 所有颜色和字体经 :root 中的 CSS 变量控制。
- 排版：正文衬线字体、界面无衬线、代码等宽，系统字体栈，正文约 70ch 行宽。
- 图片一律用内联 SVG 而非位图；超过两屏的文档顶部提供页内导航。
- 在 H1 上方列出本文实际引用的文件（“Files read”/“Sources”）以建立可信度。
- 按层次或状态用色，而非装饰；克制使用渐变、玻璃拟态、无教学意义的动画。
适用场景与限制
- 适用于项目仓库或 Obsidian 库中的独立手工文档，不适用受项目设计 token 体系约束的产品 UI；不应接入应用的设计 token 管线或框架 CSS。
- 不使用 Bootstrap、Tailwind 等框架 CSS，倾向约 200 行的 <style> 块。
- 不要用通用示例代替用户真实仓库和组件名，缺失具体信息时应询问。
- HTML 中不得保留 [[双括号]] 链接，渲染时须转为锚点；HTML 不得出现 .md 中没有的内容，若想添加应先加到 .md 再渲染。