molefrogskills Claude skill for generating high-quality PDFs using react-pdf

**[skills](https://github.com/molefrog/skills)** Public Claude skill for generating high-quality PDFs using react-pdf [MIT license](https://github.com/molefrog/skills/blob/main/LICENSE.txt) [Open in github.dev](https://github.dev/) [Open in a new github.dev tab](https://github.dev/) [Open in codespace](https://github.com/codespaces/new/molefrog/skills?resume=1) <table><thead><tr><th colspan="2">Name</th><th colspan="1">Name</th><th>Last commit message</th><th colspan="1">Last commit date</th></tr></thead><tbody><tr><td colspan="3">and<a href="https://github.com/molefrog/skills/commit/2ff4c8486b19061f9c0e5a4234180c4f474f5df2">Rename skill from pdf to react-pdf</a><a href="https://github.com/molefrog/skills/commit/2ff4c8486b19061f9c0e5a4234180c4f474f5df2">2ff4c84</a> ·<a href="https://github.com/molefrog/skills/commits/main/">9 Commits</a></td></tr><tr><td colspan="2"><a href="https://github.com/molefrog/skills/tree/main/.claude-plugin">.claude-plugin</a></td><td colspan="1"><a href="https://github.com/molefrog/skills/tree/main/.claude-plugin">.claude-plugin</a></td><td><a href="https://github.com/molefrog/skills/commit/2ff4c8486b19061f9c0e5a4234180c4f474f5df2">Rename skill from pdf to react-pdf</a></td><td></td></tr><tr><td colspan="2"><a href="https://github.com/molefrog/skills/tree/main/skills/react-pdf">skills/ react-pdf</a></td><td colspan="1"><a href="https://github.com/molefrog/skills/tree/main/skills/react-pdf">skills/ react-pdf</a></td><td><a href="https://github.com/molefrog/skills/commit/2ff4c8486b19061f9c0e5a4234180c4f474f5df2">Rename skill from pdf to react-pdf</a></td><td></td></tr><tr><td colspan="2"><a href="https://github.com/molefrog/skills/blob/main/.gitignore">.gitignore</a></td><td colspan="1"><a href="https://github.com/molefrog/skills/blob/main/.gitignore">.gitignore</a></td><td><a href="https://github.com/molefrog/skills/commit/1beb65c68a3eae167d71edcfe40db06c1f9cd54c">Simplify example template, add test/ to gitignore, update README</a></td><td></td></tr><tr><td colspan="2"><a href="https://github.com/molefrog/skills/blob/main/LICENSE.txt">LICENSE.txt</a></td><td colspan="1"><a href="https://github.com/molefrog/skills/blob/main/LICENSE.txt">LICENSE.txt</a></td><td><a href="https://github.com/molefrog/skills/commit/4050b20cdb0b3107b0c15370ba9a32b237dab7a4">Initial commit: react-pdf skill for Claude Code</a></td><td></td></tr><tr><td colspan="2"><a href="https://github.com/molefrog/skills/blob/main/README.md">README.md</a></td><td colspan="1"><a href="https://github.com/molefrog/skills/blob/main/README.md">README.md</a></td><td><a href="https://github.com/molefrog/skills/commit/2ff4c8486b19061f9c0e5a4234180c4f474f5df2">Rename skill from pdf to react-pdf</a></td><td></td></tr><tr><td colspan="3"></td></tr></tbody></table> ``` '########::'########::::'###:::::'######::'########:'########::'########::'########:::: ##.... ##: ##.....::::'## ##:::'##... ##:... ##..:: ##.... ##: ##.... ##: ##.....::::: ##:::: ##: ##::::::::'##:. ##:: ##:::..::::: ##:::: ##:::: ##: ##:::: ##: ##:::::::::: ########:: ######:::'##:::. ##: ##:::::::::: ##:::: ########:: ##:::: ##: ######:::::: ##.. ##::: ##...:::: #########: ##:::::::::: ##:::: ##.....::: ##:::: ##: ##...::::::: ##::. ##:: ##::::::: ##.... ##: ##::: ##:::: ##:::: ##:::::::: ##:::: ##: ##:::::::::: ##:::. ##: ########: ##:::: ##:. ######::::: ##:::: ##:::::::: ########:: ##:::::::::: ..:::::..::........::..:::::..:::......::::::..:::::..:::::::::........:::..::::::::::: :'######::'##:::'##:'####:'##:::::::'##::::::: '##... ##: ##::'##::. ##:: ##::::::: ##::::::: ##:::..:: ##:'##:::: ##:: ##::::::: ##::::::: . ######:: #####::::: ##:: ##::::::: ##::::::: :..... ##: ##. ##:::: ##:: ##::::::: ##::::::: '##::: ##: ##:. ##::: ##:: ##::::::: ##::::::: . ######:: ##::. ##:'####: ########: ########: :......:::..::::..::....::........::........:: ``` A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill for generating PDF documents with [React-PDF](https://react-pdf.org/) (`@react-pdf/renderer`). Install: ``` npx skills add molefrog/skills --skill react-pdf # or as a claude code plugin /plugin marketplace add molefrog/skills /plugin install react-pdf@skills ``` Libraries like ReportLab, WeasyPrint, or fpdf2 work, but React-PDF has real advantages for AI-generated documents: - **Flexbox & grid layout** — powered by Yoga (Facebook's layout engine). Centering, columns, wrapping grids — it just works. No absolute coordinate math. - **SVG primitives** — `<Svg>`, `<Path>`, `<Circle>` are first-class components. Draw charts and icons inline without a separate graphics library. - **Component composition** — build PDFs like React components. Reusable headers, tables, cards — all composable with props. Declarative, not imperative. - **Google Fonts support** — register any TrueType font with `Font.register()`. The skill bundles a reference of ~65 popular Google Fonts with direct download URLs. - **Knuth-Plass line breaking** — the same algorithm used by TeX. Produces professionally typeset paragraphs with proper hyphenation. - **Smart page breaks** — `wrap`, `break`, `minPresenceAhead` control content flow across pages declaratively. Orphan/widow control built in. - **Emoji support** — register Twemoji assets and use emoji directly in text. No custom rendering logic needed. ## License MIT ## Releases No releases published ## Packages No packages published ## Languages - [TypeScript 100.0%](https://github.com/molefrog/skills/search?l=typescript)