About this Skill
Generate PDF documents with @react-pdf/renderer rather than browser HTML. The workflow covers reusable React layouts, local font registration, tables and SVG primitives, fixed headers and footers, and page-break controls. Keep the complete react-pdf Skill directory so its template and references remain available.
Why we picked it
A focused PDF-generation workflow with component references, a working TSX template and a render-to-images review loop.
What it helps with
- Generate recurring PDF reports from structured data.
- Compose invoices or document layouts as reusable React components.
- Inspect page breaks, fonts and graphics before delivery.
Workflow
Build from the supplied template
Start with assets/example-template.tsx and the component reference, then adapt the page structure to the document.
Compose and render
Use React-PDF components, local fonts and deliberate page-break rules, then render the TSX through tsx.
Review each page
Render the resulting PDF to images and inspect wrapping, overflow, typography and fixed elements.
Installation and runtime
Install the Skill instructions, then provision the documented runtime dependencies before running a task.
| Command | What it helps with |
|---|---|
npm install react @react-pdf/renderer | Install the rendering runtime. |
npm install -D tsx @types/react | Install the TSX runner and React types. |
npx tsx my-document.tsx | Run your document-generation script. |
Scope and practical limits
This Skill generates PDFs. It is not an OCR engine or a general PDF editor.
License and source
The project is distributed under MIT. Agent subscriptions, external services and optional integrations have their own requirements.
Before you use it
- Node.js with react and @react-pdf/renderer; tsx to execute the supplied TSX pattern.
- Download and register any custom fonts locally; use Poppler or PyMuPDF to inspect rendered pages.
Supported agents
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
