A. Scope and Operating Contract
This skill governs authoring and converting HTML into print-quality PDF .
Primary output goals:
- Stable pagination and predictable layout on Linux runtime. Searchable/selectable text (no screenshot-based fallback). Professional, citation-safe long-form documents.
B. Hard Constraints (Do Not Violate)
B1. Conversion entrypoint
For HTML->PDF, use html_to_pdf only.
Forbidden:
- Screenshot/print hacks or manual browser printing Direct invocation of low-level local scripts for conversion
Reason: image-stitch paths degrade text quality and create pagination discontinuity.
B2. Rendering safety rules
- Do not inject Paged.js manually. The runtime pipeline handles loading. Do not rely on CSS counters (counter-reset, counter-increment, counter()). Do not use runtime charting engines (ECharts, Chart.js, D3, Plotly, etc.). Charts should be pre-rendered as static images and prefer landscape aspect ratio. Decorative emoji/icon glyphs are disallowed unless explicitly requested.
C Intent Parsing
Classify the task before execution:
Intent Typical user request Pipeline Build "写一份报告并导出 PDF" INLINECODE4 Transform
"把这篇内容翻译后做成 PDF" |
transform-pdf |
| Existing PDF ops | "提取/合并/拆分 PDF" |
process-existing-pdf |
| LaTeX explicit | "请用 LaTeX/.tex/Tectonic" |
latex-compile |
Clarification policy:
- If request is clear, execute directly. If ambiguous, ask once with a compact checklist:
- 文档类型/主题
- 是否要封面
- 字数或页数边界
- 语言与格式偏好
Important clarification behavior:
- Ask at most one clarification round for intent. After that, execute with explicit assumptions rather than repeatedly asking.
D. Content Governance
D1. Language policy
- Chinese user query -> Chinese content English user query -> English content User-specified language -> obey exactly
D2. Outline policy
- User provides outline -> preserve hierarchy/order, no silent restructuring No outline -> choose structure by document type and keep narrative flow consistent
D3. Citation integrity
- Never invent references. Every citation must be verifiable (author/title/year/source). Reused source should keep the same citation index.
Recommended citation style for this skill: IEEE numeric .
Sample reference list:
CODEBLOCK0
E. Conversion Fidelity Checklist
When transforming existing material (translation/rewrite/reformat), preserve source fidelity:
E1. Links
- Keep original destination URL in href. Do not replace links with plain text. Ensure conversion uses preserve_links=true.
E2. Images
Use a three-pass check:
1. Count extracted image assets Count <img> tags in HTML Validate post-conversion image statistics
E3. Structure
- Preserve source section sequence and anchor semantics. Keep figure/table placement and numbering intent. Do not add synthetic cover if source had none.
F. Implementation Blueprint
F1. Forbidden patterns
Pattern Why unstable Replacement CSS content counters for numbering pagination DOM shifts can break numbering explicit labels in markup Dynamic JS chart libraries at render-time
print pagination conflicts | pre-rendered static charts |
| Emoji/icon-heavy typography | Linux fallback inconsistency | plain text labels |
Chart image policy:
- Prefer landscape charts (width > height) to reduce page-break artifacts.
F2. Overflow guards (required baseline)
CODEBLOCK1
F3. Page model setup
CODEBLOCK2
Pagination notes:
- Apply break-inside: avoid only to compact units (single figure, single row, callout box). Never apply it to large wrappers (chapter/section container). Use thead { display: table-header-group; } for multi-page table headers.
F4. Visual direction
Default target is print-academic , not dashboard aesthetics.
Avoid:
- heavy card shells KPI tile walls dark decorative title bars oversized rounded/shadowed ornaments
Prefer:
- plain headings + thin dividers data-dense tables restrained grayscale palette simple, high-contrast typography
Type scale suggestion:
- Body: 11pt Subheading: 14pt Primary heading: 18-20pt Line height: 1.6-1.7
F. Cover page rules
Full-bleed baseline:
CODEBLOCK3
Cover variants:
- Minimal : white background, centered title/meta, no decoration Designed : low-saturation geometry/gradient, keep center area clear for title
If using image background, do not use CSS background-image. Use absolute <img>:
CODEBLOCK4
CODEBLOCK5
F5. Numbering, references, TOC
Use explicit labels in markup, not CSS counters.
CODEBLOCK6
CODEBLOCK7
Anchor placement rule:
- Put id on the highest logical container (figure, table, section wrapper), not on inline caption text.
TOC example with computed page numbers:
CODEBLOCK8
CODEBLOCK9
Optional in-text page reference:
CODEBLOCK10
F6. Formula and diagram policy
- For math, use KaTeX with auto-render. Keep formula color neutral and print-safe. For Mermaid, keep topology simple; if rendering becomes unstable, replace with static image.
F7. Reusable layout patterns
Definition block:
CODEBLOCK11
Procedure block:
CODEBLOCK12
Fixed-size centered badges must use flexbox:
CODEBLOCK13
F8. Citation anchors and footnotes
Reference anchor consistency:
- Every <a href="#ref-n">[n]</a> must map to one <li id="ref-n">. No dangling reference IDs.
CODEBLOCK14
Paged footnote pattern:
CODEBLOCK15
F9. Layout tuning guide
When page count or layout does not meet targets, adjust in this priority order:
Symptom First move Second move Avoid Page count exceeds target reduce heading sizes reduce line-height slightly aggressive body font shrink Page count below target
increase line-height | increase page margins slightly | adding low-value filler text |
| Table overflows page width | reduce cell padding | allow word wrapping on long tokens | forcing fixed table widths |
| Figure breaks layout | reduce figure max-width/max-height | move figure near paragraph boundary |
avoid on large parent containers |
| Text looks cramped | raise line-height | increase side margins slightly | oversized heading jumps |
| Resume too sparse/dense | tune margins first | then adjust heading scale | changing section order silently |
G Fidelity Gates
Run all gates before final delivery.
G1. Hyperlinks
- Ensure external links keep original href. In conversion call, enforce preserve_links=true.
G2. Images (3-pass)
1. Source extraction count (baseline) HTML <img> count and mapping Post-conversion result check
G3. Anchor integrity
- Cross-references must point to real IDs. Place id on top-level containers (figure, section wrapper), not inner text nodes. For TOC and page refs, use print-aware links with page target resolution (target-counter).
G4. Structure parity (for transforms)
- Keep source section order unless user requests restructuring. Do not inject a cover page when source had none (unless user requests one).
A. 范围与操作约定
本技能负责编写 HTML 并将其转换为适合打印的 PDF 。
主要输出目标:
- 在 Linux 运行时实现稳定的分页和可预测的布局。 可搜索/可选择的文本(不采用基于截图的回退方案)。 专业、适合引用的长篇文档。
B. 硬性约束(不得违反)
B1. 转换入口
对于 HTML 转 PDF,仅使用 htmlto pdf。
禁止:
- 截图/打印技巧或手动浏览器打印 直接调用底层本地脚本进行转换
原因:图像拼接路径会降低文本质量并导致分页不连续。
B2. 渲染安全规则
- 不要手动注入 Paged.js。运行时管道会处理加载。 不要依赖 CSS 计数器(counter-reset、counter-increment、counter())。 不要使用运行时图表引擎(ECharts、Chart.js、D3、Plotly 等)。 图表应预渲染为静态图像,并优先采用横向宽高比。 除非明确要求,否则禁止使用装饰性表情符号/图标字形。
C. 意图解析
在执行前对任务进行分类:
意图 典型用户请求 处理流程 构建 写一份报告并导出 PDF build-pdf 转换
把这篇内容翻译后做成 PDF | transform-pdf |
| 现有 PDF 操作 | 提取/合并/拆分 PDF | process-existing-pdf |
| 显式 LaTeX | 请用 LaTeX/.tex/Tectonic | latex-compile |
澄清策略:
- 如果请求明确,直接执行。 如果存在歧义,使用简洁的检查清单询问一次:
- 文档类型/主题
- 是否需要封面
- 字数或页数限制
- 语言与格式偏好
重要澄清行为:
- 对于意图最多询问一轮澄清。 之后,基于明确的假设执行,而不是反复询问。
D. 内容治理
D1. 语言策略
- 中文用户查询 → 中文内容 英文用户查询 → 英文内容 用户指定语言 → 严格遵循
D2. 大纲策略
- 用户提供大纲 → 保留层级/顺序,不擅自重构 无大纲 → 根据文档类型选择结构,保持叙述流程一致
D3. 引用完整性
- 绝不编造参考文献。 每条引用必须可验证(作者/标题/年份/来源)。 重复使用的来源应保持相同的引用索引。
本技能推荐的引用格式:IEEE 数字格式 。
参考文献列表示例:
text
[1] R. Patel and L. Chen, A comparative study on model routing, Journal of Applied AI, vol. 8, no. 3, pp. 44-58, 2025.
[2] M. Rivera, Systems Design Handbook, 2nd ed. New York, NY, USA: Northbridge Press, 2024.
[3] T. Huang, Model evaluation checklist, Research Notes, https://example.org/eval (accessed Feb. 14, 2026).
E. 转换保真度检查清单
在转换现有材料(翻译/重写/重新格式化)时,保留源材料保真度:
E1. 链接
- 在 href 中保留原始目标 URL。 不要用纯文本替换链接。 确保转换使用 preserve_links=true。
E2. 图像
使用三步检查:
1. 统计提取的图像资源数量 统计 HTML 中的 标签数量 验证转换后的图像统计数据
E3. 结构
- 保留源章节顺序和锚点语义。 保持图表/表格的位置和编号意图。 如果源材料没有封面,不要添加合成的封面。
F. 实现蓝图
F1. 禁止的模式
模式 不稳定的原因 替代方案 用于编号的 CSS 内容计数器 分页 DOM 变化可能破坏编号 标记中的显式标签 渲染时的动态 JS 图表库
打印分页冲突 | 预渲染的静态图表 |
| 表情符号/图标密集的排版 | Linux 回退不一致 | 纯文本标签 |
图表图像策略:
- 优先使用横向图表(width > height)以减少分页瑕疵。
F2. 溢出保护(必需基线)
css
/ 将可打印块保持在页面宽度内 /
pre, table, figure, img, svg, .diagram, blockquote, .eq-block {
max-inline-size: 100%;
box-sizing: border-box;
}
pre {
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
figure img, figure svg {
max-inline-size: 82%;
max-block-size: 42vh;
height: auto;
}
table { overflow-x: auto; }
.katex-display { overflow-x: auto; }
code { overflow-wrap: anywhere; }
a { overflow-wrap: anywhere; }
tr { break-inside: avoid; }
body {
text-align: justify;
text-align-last: start;
}
F3. 页面模型设置
css
@page {
size: A4;
margin: 2.4cm 1.9cm;
@top-center { content: string(doc_title); }
@bottom-center { content: counter(page); }
}
@page :first {
@top-center { content: none; }
@bottom-center { content: none; }
}
@page titlepage {
@top-center { content: none; }
@bottom-center { content: none; }
}
@page contents {
@top-center { content: none; }
@bottom-center { content: none; }
}
body { string-set: doc_title ; }
h1 { string-set: doc_title content(); }
.cover-page { page: titlepage; }
.toc-sheet { page: contents; }
分页说明:
- 仅对紧凑单元(单个图形、单行、标注框)应用 break-inside: avoid。 切勿将其应用于大型包装器(章节/节容器)。 对多页表格标题使用 thead { display: table-header-group; }。
F4. 视觉方向
默认目标是打印学术 风格,而非仪表盘美学。
避免:
- 厚重的卡片外壳 KPI 指标墙 深色装饰性标题栏 过大的圆角/阴影装饰
偏好:
- 简洁标题 + 细分隔线 数据密集的表格 克制的灰度调色板 简单、高对比度的排版
字号建议:
- 正文:11pt 副标题:14pt 主标题:18-20pt 行高:1.6-1.7
F. 封面页规则
全出血基线:
css
*,
*::before,
*::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
@page :first {
margin: 0;
}
.cover-page {
inline-size: 210mm;
block-size: 297mm;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
break-after: page;
}
封面变体:
- 极简 :白色背景,居中标题/元信息,无装饰 设计版 :低饱和度几何/渐变,保持中心区域清晰以放置标题
如果使用图像背景,不要使用 CSS background-image。使用绝对定位的 :
html
...
css
.cover-photo {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.cover-layer {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
F5. 编号、参考文献、目录
在标记中使用显式标签,而不是 CSS 计数器。
html
架构概览
$$f(x)=x^2+1$$
css
figcaption::before {
content: