# Pdf Html

> >

- **Type:** Skill
- **Install:** `agentstack add skill-slogsdon-skills-design-pdf-html`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [slogsdon](https://agentstack.voostack.com/s/slogsdon)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [slogsdon](https://github.com/slogsdon)
- **Source:** https://github.com/slogsdon/skills-design/tree/main/skills/pdf-html

## Install

```sh
agentstack add skill-slogsdon-skills-design-pdf-html
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Skill: pdf-html

Targeted per-canvas PDF export via headless Chromium. Strips preview-backdrop styles (dark
page background, padding, gap) before rendering so the PDF contains only the canvas itself.

## When to use

- After any `design-*` skill that produces a document-style HTML artifact — audit reports,
  deliverables, spec sheets, long-form cards — and a PDF is the desired leave-behind format.
- When the user says "export as PDF", "capture as PDF", "PDF version of this", etc.

Skip if:

- The artifact is a social-media graphic (LinkedIn, Instagram, YouTube thumbnail, Twitter
  card). Use `screenshot-html` for those — PDFs don't add value and print media mode may
  alter the styling.
- The artifact is a stream overlay or OBS scene pack. Use `screenshot-html`.

## What it targets

Same canvas conventions as `screenshot-html`:

- `.canvas` — primary fixed-size artifact wrapper.
- `[class*="canvas-"]` — modifier variants: `canvas-front` / `canvas-back`, `canvas-audit`,
  `canvas-og` / `canvas-hero`, etc.
- `.scene` — hash-routed scenes (captured at their hash-navigated state).

Nested matches are deduped — only top-level containers generate PDFs.

If a file has no matches, falls back to a full-page PDF. `--full-page` forces this for
every file.

## How to run

```bash
node skills/pdf-html/scripts/pdf-html.mjs  [--output ] [--width ] [--full-page]
```

Flags:

- `` (positional, default `.`): directory to scan recursively for `*.html`. The
  `screenshots/` and `pdfs/` subdirectories and hidden dirs are skipped.
- `--output ` (default `/pdfs`): where PDFs are written. Flat output — one file
  per canvas target.
- `--width ` (default `1920`): browser viewport width. Only needs to be ≥ the widest
  canvas; PDF height is measured from the rendered DOM, not the viewport.
- `--full-page`: force full-page PDFs for every file, skipping canvas targeting.

Height is always auto-measured from the canvas's rendered bounding box — no `--height`
flag needed.

## Prerequisites

**None — the script self-bootstraps on first run**, installing Playwright and the Chromium
binary into its own `node_modules` alongside the script. First run takes ~10–60s; subsequent
runs are fast (~1s overhead).

```text
$ node pdf-html.mjs ./design//artifacts
Playwright not found. Installing into /scripts/node_modules (one-time)…
…
```

### Token-load guard

Same `@import` sanity check as `screenshot-html`: if a relative `@import url('../tokens.css')`
can't resolve from the artifact's directory, the guard warns you before writing the PDF:

```text
  artifact.html ⚠ design tokens may not have loaded — PDF may show fallback styles.
    failed CSS: file:///wrong/path/tokens.css (net::ERR_FILE_NOT_FOUND)
    Fix: run the script against the artifact's native folder so relative imports resolve.
```

## PDF rendering details

Playwright's `page.pdf()` renders in `@media print` mode. For `design-*` artifacts the
canvas CSS contains no `@media print` overrides, so the rendered PDF matches the browser
preview. The preview-backdrop styles (`body { background: #2a2a2a; padding: 32px; }` and
`.canvas-label`) are stripped via injected CSS before each PDF is generated, so the output
contains only the canvas.

PDF dimensions are set to the canvas's exact rendered pixel size (e.g. `1200 × 5077 px`
for a tall audit report). This produces a single-page vector PDF — shareable, searchable,
and printable — at the canvas's native resolution.

## Output naming

Same convention as `screenshot-html` but with `.pdf` extension:

| Source file | Targets | Output filenames |
|---|---|---|
| `audit-report-2026-05-14-mercer-advisors.html` | one `.canvas-audit` | `audit-report-2026-05-14-mercer-advisors.pdf` |
| `business-card.html` | `.canvas-front`, `.canvas-back` | `business-card--canvas-front.pdf`, `business-card--canvas-back.pdf` |
| `blog-hero.html` | `.canvas-og`, `.canvas-hero` | `blog-hero--canvas-og.pdf`, `blog-hero--canvas-hero.pdf` |

## Common patterns

- **Single artifact PDF:** `node skills/pdf-html/scripts/pdf-html.mjs ./design//artifacts --output ./design//pdfs`
- **Full-page (deliverable pages without a .canvas):** add `--full-page`
- **Only want the audit report, not the whole artifacts dir:** point at a temp dir or use `--full-page` to get the page at its natural height

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [slogsdon](https://github.com/slogsdon)
- **Source:** [slogsdon/skills-design](https://github.com/slogsdon/skills-design)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-slogsdon-skills-design-pdf-html
- Seller: https://agentstack.voostack.com/s/slogsdon
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.