このスキルについて
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.
おすすめする理由
A focused PDF-generation workflow with component references, a working TSX template and a render-to-images review loop.
役立つこと
- 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.
| コマンド | 用途と使いどころ |
|---|---|
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.
使う前に
- 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.
対応エージェント
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
