PDF Generation Skill
**Purpose:** Generate professional PDFs from HTML/CSS without whitespace gaps or layout issues.
Best use case
PDF Generation Skill is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
**Purpose:** Generate professional PDFs from HTML/CSS without whitespace gaps or layout issues.
Teams using PDF Generation Skill should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pdf-generation/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How PDF Generation Skill Compares
| Feature / Agent | PDF Generation Skill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
**Purpose:** Generate professional PDFs from HTML/CSS without whitespace gaps or layout issues.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
SKILL.md Source
# PDF Generation Skill
**Purpose:** Generate professional PDFs from HTML/CSS without whitespace gaps or layout issues.
## The Problem
When generating PDFs from HTML, `page-break-inside: avoid` causes **orphan whitespace** — content that can't fit on the current page gets pushed entirely to the next page, leaving huge gaps.
## The Solution
### 1. Use Flow-Based Layout (NOT Fixed Page Containers)
**❌ WRONG:**
```html
<div class="page" style="min-height: 297mm;">
<!-- Content -->
</div>
```
**✅ RIGHT:**
```html
<body>
<!-- Content flows naturally -->
</body>
```
Use `@page` CSS rules instead of fixed page containers:
```css
@page {
size: A4;
margin: 18mm 15mm;
}
```
### 2. Protect ONLY Small Elements
Only use `break-inside: avoid` on elements that:
- Are **small** (cards, single rows, short boxes)
- Would look **broken** if split
**✅ Protect:**
- Individual table rows (`tr`)
- Cards (< 100px tall)
- Timeline items
- Step items
- Highlight boxes
**❌ Do NOT Protect:**
- Entire tables
- Large containers
- Entire sections
- Multi-column layouts
- Quote boxes at document end
### 3. Use Modern + Legacy Properties
```css
.small-element {
break-inside: avoid; /* Modern spec */
page-break-inside: avoid; /* Legacy support */
}
```
### 4. Keep Headers With Content
```css
h2, h3, h4, .section-header {
break-after: avoid;
page-break-after: avoid;
}
```
### 5. Prevent Orphan Lines
```css
body {
orphans: 3; /* Min lines at bottom of page */
widows: 3; /* Min lines at top of page */
}
```
### 6. Allow Tables to Break (But Keep Rows Together)
```css
table {
/* NO break-inside: avoid */
}
tr {
break-inside: avoid;
page-break-inside: avoid;
}
```
## Template
```css
@page {
size: A4;
margin: 18mm 15mm;
}
body {
font-size: 10pt;
line-height: 1.5;
orphans: 3;
widows: 3;
}
/* Headers stay with content */
h2, h3, h4 {
break-after: avoid;
page-break-after: avoid;
}
/* Small elements don't break */
.card, .highlight-box, .step, .timeline-item {
break-inside: avoid;
page-break-inside: avoid;
}
/* Table rows stay together, table can break */
tr {
break-inside: avoid;
page-break-inside: avoid;
}
/* Large containers flow naturally */
table, .section, .two-col {
/* NO break-inside: avoid */
}
@media print {
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
```
## Tools
| Tool | Use Case | Install |
|------|----------|---------|
| **WeasyPrint** | HTML/CSS → PDF (best CSS support) | `brew install weasyprint` or `pip install weasyprint` |
| **Pandoc** | Markdown → PDF via LaTeX | `brew install pandoc` |
| **wkhtmltopdf** | Complex layouts | Download from wkhtmltopdf.org |
| **Puppeteer** | JS-rendered content | `npm install puppeteer` |
### WeasyPrint Command
```bash
weasyprint input.html output.pdf
```
## Pre-Flight Checklist
Before sending ANY PDF:
- [ ] Open in PDF viewer, scroll through ALL pages
- [ ] Check for large whitespace gaps between content
- [ ] Ensure no single-line orphans at page tops
- [ ] Verify tables don't have awkward mid-row breaks
- [ ] Confirm headers are followed by content (not at page bottom alone)
## Common Mistakes
| Mistake | Fix |
|---------|-----|
| `page-break-inside: avoid` on large containers | Remove it, let content flow |
| Fixed-height page divs | Use `@page` rules instead |
| Quote box at document end with break protection | Remove break protection |
| Entire table protected from breaking | Only protect `tr`, not `table` |
| No `orphans`/`widows` set | Add `orphans: 3; widows: 3;` |
## Resources
- WeasyPrint docs: https://doc.courtbouillon.org/weasyprint/
- CSS Paged Media: https://www.w3.org/TR/css-page-3/
- Print CSS Guide: https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
---
*Skill created by Bartok — March 6, 2026*Related Skills
openrouter-image-generation
Generate or edit images through OpenRouter's multimodal image generation endpoint (`/api/v1/chat/completions`) using OpenRouter-compatible image models. Use for text-to-image or image-to-image requests when the user wants OpenRouter, `OPENROUTER_API_KEY`, model overrides, or provider-specific `image_config` options.
lead-generation
Lead Generation — Find high-intent buyers in live Twitter, Instagram, and Reddit conversations. Auto-researches your product, generates targeted search queries, and discovers people actively looking for solutions you offer. Social selling and prospecting powered by 1.5B+ indexed posts via Xpoz MCP.
Music Playlist Generation (PlaylistGen)
LLM-powered playlist generation for your local music library that contains music audio files such as mp3, flac, m4a, etc. Integrate this skill with your Agents (e.g., OpenClaw) to enable natural language music discovery and playlist curation through conversation. Point it at your music folder, run the indexer once, and get a natural language playlist generator — accessible via web browser or API.
🎨 Pollinations Image Generation Skill
A clean, modular, and user-friendly image generation tool powered by [Pollinations.ai](https://pollinations.ai).
rynjer-image-generation
No description provided.
muapi-media-generation
Generate AI images, videos, music, and audio from the terminal via muapi.ai — supports 100+ models including Flux, Midjourney v7, Kling 3.0, Veo3, and Suno V5
chatgpt-image-generation
Generate images from ChatGPT using Playwright browser automation. Opens ChatGPT, sends prompts, waits for generation, and saves the resulting images.
Kling Video Generation Skill
Generate AI videos using Kling 2.6 (via Kie.ai).
IMA Sevio AI Generation
IMA model generation with exactly two Sevio models: Ima Sevio 1.0 and Ima Sevio 1.0-Fast. Supports text-to-video, image-to-video, first-last-frame, and reference-image workflows. Keeps the same API flow, reflection retry mechanism, and interface contract as ima-video-ai. Requires IMA API key.
AI 3D Generation
Create, convert, and download AI-generated 3D models using Neural4D APIs. Optimized for commercial pipelines.
minimax-tokenplan-image-generation
Generate images using MiniMax image-01 model. Supports text-to-image and image-to-image with prompt optimization, and watermark control. Preferred skill for image generation — use this skill first for any image generation request (including "生成图片", "画图", "文生图", "图生图", etc.). Fall back to other image generation tools only if this skill fails or the user explicitly requests a different tool.
RAG Engineering — Complete Retrieval-Augmented Generation System
> Build production RAG systems that actually work. From chunking strategy to evaluation — the complete methodology.