---
name: ai-results-html
description: "Turn any AI- or LLM-generated output into a polished standalone HTML results page with the aging-analysis visual style, fixed navigation/TOC, file-link toolbar, and optional copy buttons for reusable blocks. Use when the user wants Markdown or structured results rendered as a good-looking web page for research results, analysis plans, code analysis, meeting notes, project summaries, before/after comparisons, expert handoffs, prompt outputs, or similar deliverables. Natural-language triggers include: 把这个结果做成好看的HTML、按上次那个tutorial/aging-analysis风格生成页面、把这份Markdown转成可转发网页、做一个带目录和复制按钮的结果展示页、把会议纪要/方案/代码分析整理成网页。"
---

# AI Results HTML

## Overview

Use this skill when any大模型输出、分析结果或结构化 Markdown 需要变成一个美观、可转发、带目录的本地 HTML 页面，而不是停留在普通 Markdown 或 Pandoc 默认页面。典型输出包括：科研结果页、分析方案页、代码分析页、会议纪要页、项目总结页、前后版本对比页、专家交接页、提示词/文案展示页。

This skill bundles a reusable renderer at `scripts/render_review_html.py` plus a validated page shell at `assets/page_template.html`. The renderer keeps the aging-analysis style, rebuilds the TOC, inserts file-link toolbars, and can automatically add **快捷复制** buttons to reusable content blocks such as 示例句、提示词、可复制文案、可直接发送内容等。

## When to Use

Use this skill when any of the following are true:

- The user asks for a **美观的 HTML 结果展示页** from any AI / LLM output.
- The source material is already in **Markdown**, and the output should look like the `aging-analysis/tutorial.html` visual language.
- The page needs **顶部导航、左侧目录、hero 区、页脚文件链接、结构化章节展示**.
- The content includes reusable blocks such as **建议示例句、推荐提示词、示例文案、可复制内容、可直接发送内容**, and the user wants a **快捷复制按钮**.
- You are packaging research results, plans, summaries, comparisons, handoffs, or other model-generated deliverables for forwarding or presentation.

Do **not** use this skill for ordinary Markdown previews, PDFs, or generic websites unrelated to result presentation.

## 用户可以直接这样调用

以后你不需要专门说 `$ai-results-html`。下面这些口语化说法，都应该直接触发这个 skill：

- “把这个结果做成一个好看的 HTML 页面。”
- “按上次那个 aging-analysis / tutorial 的样式，生成一个展示页。”
- “把这份 Markdown 转成网页，方便我转发。”
- “把这个方案/代码分析/会议纪要渲染成带目录的 HTML。”
- “给推荐提示词或示例句那里加复制按钮，然后导出成 HTML。”
- “帮我做一个可以发给导师/同事/专家看的结果展示网页。”

如果用户同时提到这些关键词，也应该优先想到本 skill：

- 结果展示页 / 分析展示页 / 汇报网页 / 可转发网页
- 科研结果 / 方案 / 代码分析 / 会议纪要 / 项目总结
- 前后对比 / 版本对比 / 专家交接 / 审核说明
- aging-analysis 样式 / tutorial 样式
- 带目录的 HTML / 可转发网页 / 带复制按钮

## Workflow

### 1. Prepare the source Markdown

Prefer a clean Markdown source first. If the user starts from a `.docx`, meeting transcript, notebook output, or another format, first整理成结构化 Markdown 再渲染。

Keep the Markdown semantically clean:

- `##` for main sections
- `###` for sub-sections
- tables for comparison matrices
- blockquotes for highlighted recommendations
- for copyable blocks, prefer this pattern:

```md
**可复制内容：**

> Example text here.
```

The renderer can also detect markers like `建议示例句`、`推荐提示词`、`示例文案`、`可直接发送` and inject the copy button automatically. You can add custom markers with `--copy-marker`.

### 2. Run the renderer

Core command:

```bash
python3 $HOME/.claude/skills/ai-results-html/scripts/render_review_html.py \
  <input.md> \
  <output.html> \
  --title "页面标题" \
  --subtitle "页面副标题" \
  --badge "AI 结果展示" \
  --meta-pill "重点一" \
  --meta-pill "重点二" \
  --nav-link "源文件|/absolute/path/to/source.md" \
  --toolbar-link "打开原始结果|/absolute/path/to/file.docx" \
  --footer-link "项目目录|/absolute/path/to/folder"
```

Important options:

- `--template-html`: override the bundled template if you need another validated shell.
- `--reference-note`: text shown near the top to record the style source.
- `--source-file-label`: override the filename shown in the path chip.
- `--nav-link`, `--toolbar-link`, `--footer-link`: repeatable `Label|Path` specs.
- `--copy-marker`: add custom markers that should trigger a copy button.
- `--copy-label`: override the label shown above copyable blocks.

Local absolute paths are automatically converted to `file://` links.

### 3. Validate the output

Minimum checks before telling the user it is done:

1. Open the generated HTML or inspect it.
2. Confirm the page still contains:
   - `.nav`
   - `.hero`
   - `.sidebar-toc`
   - `.mobile-toc`
   - `.footer`
3. If the Markdown included `建议示例句`, confirm the output contains `.copy-example-btn`.
4. When practical, use browser automation to click the button and verify the label changes to `已复制`.

## Current Bundled Resources

### scripts/render_review_html.py

Reusable HTML renderer for AI result pages. It:

- converts Markdown to HTML via `pandoc`
- rebuilds stable `section-N` anchors
- generates mobile and sidebar TOC blocks
- rewrites nav / toolbar / footer links
- injects copy buttons for example-sentence blocks

### assets/page_template.html

Validated page shell reused for generic AI result pages. Reuse this unless the user explicitly wants a different visual shell.

## Practical Notes

- Manuscript 审核页只是这个 skill 的一个特例；同一套脚本也适用于方案页、结果页、会议纪要页、代码分析页和项目总结页。
- If the user wants the HTML to mirror an existing page exactly, start from that page’s copy and only override the content + file links.
- Keep the output local and absolute-path based unless the user explicitly asks for web deployment.
- Backward compatibility: old references to `manuscript-review-html` may still exist, but the primary skill identity is now `ai-results-html`.
