By molefrog
Generate PDF reports, invoices, and forms programmatically in React/TSX using @react-pdf/renderer. Embed local fonts, handle async content via IIFEs, add page numbers, ensure unbreakable sections, and compose layouts with View, Text, Image, and other components for dynamic document creation in React apps.
npx claudepluginhub molefrog/skills --plugin react-pdf'########::'########::::'###:::::'######::'########:'########::'########::'########::::
##.... ##: ##.....::::'## ##:::'##... ##:... ##..:: ##.... ##: ##.... ##: ##.....:::::
##:::: ##: ##::::::::'##:. ##:: ##:::..::::: ##:::: ##:::: ##: ##:::: ##: ##::::::::::
########:: ######:::'##:::. ##: ##:::::::::: ##:::: ########:: ##:::: ##: ######::::::
##.. ##::: ##...:::: #########: ##:::::::::: ##:::: ##.....::: ##:::: ##: ##...:::::::
##::. ##:: ##::::::: ##.... ##: ##::: ##:::: ##:::: ##:::::::: ##:::: ##: ##::::::::::
##:::. ##: ########: ##:::: ##:. ######::::: ##:::: ##:::::::: ########:: ##::::::::::
..:::::..::........::..:::::..:::......::::::..:::::..:::::::::........:::..:::::::::::
:'######::'##:::'##:'####:'##:::::::'##:::::::
'##... ##: ##::'##::. ##:: ##::::::: ##:::::::
##:::..:: ##:'##:::: ##:: ##::::::: ##:::::::
. ######:: #####::::: ##:: ##::::::: ##:::::::
:..... ##: ##. ##:::: ##:: ##::::::: ##:::::::
'##::: ##: ##:. ##::: ##:: ##::::::: ##:::::::
. ######:: ##::. ##:'####: ########: ########:
:......:::..::::..::....::........::........::
A Claude Code skill for generating PDF documents
with React-PDF (@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:
<Svg>, <Path>, <Circle> are first-class components. Draw charts and
icons inline without a separate graphics library.Font.register(). The skill bundles a
reference of ~65 popular Google Fonts with direct download URLs.wrap, break, minPresenceAhead control content flow across pages
declaratively. Orphan/widow control built in.MIT
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Creative skill for generating algorithmic and generative art. Produces visual designs using mathematical patterns, fractals, and procedural generation.
Frontend design skill for UI/UX implementation
Humanise text and remove AI writing patterns. Detects and fixes 24 AI tell-tales including inflated language, promotional tone, AI vocabulary, filler phrases, sycophantic tone, and formulaic structure.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Proactively activates in projects with cacheComponents: true, providing patterns for 'use cache' directive, cacheLife(), cacheTag(), cache invalidation, and parameter permutation rendering.