# React PDF

Generates PDF documents using the React-PDF library (@react-pdf/renderer) with...

- Repository: https://github.com/trailofbits/skills-curated (523 stars)
- Category: Documents
- License: CC-BY-SA-4.0
- Last updated: 2026-07-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add trailofbits/skills-curated --skill react-pdf -g -a claude-code -y`
Codex: `npx skills add trailofbits/skills-curated --skill react-pdf -g -a codex -y`
Cursor: `npx skills add trailofbits/skills-curated --skill react-pdf -g -a cursor -y`
Gemini CLI: `npx skills add trailofbits/skills-curated --skill react-pdf -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add trailofbits/skills-curated`

## Description

Generates PDF documents using the React-PDF library (@react-pdf/renderer) with TypeScript and JSX. Use when creating PDFs, generating reports, invoices, forms, resumes, or any document that needs flexbox layout, SVG graphics, custom fonts, or professional typesetting. Prefer over Python PDF libraries (ReportLab, fpdf2) when layout complexity matters.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Generating PDFs with React-PDF

## When to Use

- Generating PDF documents (reports, invoices, resumes, forms, certificates)
- Creating PDFs that need complex layouts (multi-column, grids, cards)
- Building PDFs with inline SVG graphics, charts, or icons
- Producing documents with custom Google Fonts or emoji
- Any PDF task where flexbox layout is easier than absolute coordinate math

## When NOT to Use

- Reading or extracting text from existing PDFs, use `pdfplumber` or `pypdf` instead
- Filling existing PDF forms, use Python `pypdf` or `pdftk`
- Converting HTML to PDF, use Playwright or WeasyPrint instead
- Simple one-off text PDFs with no layout needs, a Python script may be simpler

## CRITICAL REQUIREMENTS

1. **Fonts MUST be local files** - Remote font URLs (http/https) do NOT work. Always download fonts
   to local files before using them.
2. **Wrap async code in IIFE** - Top-level await causes errors. Always use `(async () => { ... })()`
   pattern.
3. **Disable hyphenation for custom fonts** - Custom fonts lack hyphenation dictionaries and may
   crash or break words incorrectly. Always call
   `Font.registerHyphenationCallback((word) => [word]);` after registering custom fonts.

## Files

- `{baseDir}/skills/react-pdf/references/google-fonts.txt` - Metadata for ~65 popular Google Fonts with TrueType URLs. Each
  line is a font variant in tab-separated format: `font name`, `style`, `category`, `weight`, `url`.
- `{baseDir}/skills/react-pdf/references/components.md` - Full component API reference and supported CSS properties
- `{baseDir}/skills/react-pdf/assets/example-template.tsx` - Minimal working example demonstrating fixed footers, page numbers,
  and unbreakable content. Read this before starting to understand the basic patterns. Note: not all
  APIs are shown here, always refer to the docs and `{baseDir}/skills/react-pdf/references/components.md` for the full API.

## Prerequisites

The rest: https://github.com/trailofbits/skills-curated/blob/HEAD/plugins/react-pdf/skills/react-pdf/SKILL.md