Can I use remote Google Fonts with this skill?

No, fonts must be downloaded to local files first. The skill requires local paths for font registration to prevent network-related rendering failures.

How do I prevent content from breaking across pages?

You can use the 'wrap={false}' prop on View components to keep content together, or use the 'break' prop to force a page break manually.

Does it support CSS Flexbox?

Yes, react-pdf implements a subset of Flexbox, allowing you to use properties like flexDirection, justifyContent, and alignItems for layout.

What is the best way to preview generated PDFs in Claude?

The skill recommends converting PDF pages to images using tools like pdftoppm or PyMuPDF, allowing you to visually inspect the output directly.

Why should I use this over the standard PDF skill?

This skill is specifically tuned for the @react-pdf/renderer library, providing higher accuracy for layouts, CSS-like styling, and complex multi-page document structures.

React-PDF Generation

Name: React-PDF Generation
Author: molefrog

bymolefrog

•

131

•

콘텐츠 관리

Generates high-quality, styled PDF documents and reports using React components and the @react-pdf/renderer library.

The react-pdf skill enables Claude to programmatically create complex, professional PDF documents using familiar React-based syntax. It provides a robust framework for building invoices, technical reports, and dynamic forms with full support for Flexbox layouts, custom typography, SVG graphics, and automatic page numbering. Optimized for developer workflows, this skill includes specific patterns for handling local font registration, hyphenation control, and asynchronous rendering to ensure reliable document generation without common environment errors.

주요 기능

01Streamlined font management system for local TTF registration and custom hyphenation callbacks.

02Support for dynamic content features including fixed headers, footers, and page-wrap control.

03Integrated SVG support for high-quality vector graphics, icons, and custom drawings.

04131 GitHub stars

05Declarative PDF construction using React components like Document, Page, View, and Text.

06Advanced styling engine with Flexbox support, custom units, and reusable stylesheets.

사용 사례

01Creating data-driven technical documentation and PDF manuals directly from source code.

02Building branded certificates, forms, and marketing collateral with embedded images and vector art.

03Automating the generation of business invoices, receipts, and financial statements.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add molefrog/skills react-pdf

For use in Claude.ai and ChatGPT

Download Skill