skills.rest
nikegeorgian-stack
nikegeorgian-stackCOMMUNITY
Explore all skills by this author →
GitHub

print-forms

Formats A4 print forms and PDF exports with auto-fit pagination for React applications.

Updated May 5, 2026
Search Tags:#react#pagination#pdf export#html2canvas#a4#print css#print preview
One-click install
npx skills add https://github.com/nikegeorgian-stack/otgruzka-tovara --skill print-forms-nikegeorgian-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: print-forms
Source: https://github.com/nikegeorgian-stack/otgruzka-tovara/tree/main/.cursor/skills/print-forms
Command: npx skills add https://github.com/nikegeorgian-stack/otgruzka-tovara --skill print-forms-nikegeorgian-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Printable forms and blanks often break when sent to a printer or exported to PDF: text gets clipped, empty second pages appear, table rows split across sheets, and borders vanish in PDF output. This Skill codifies the rules and workflow for building print-ready A4 forms in a React + Firebase app so output is correct on screen, in Ctrl+P, and in PDF. ## Core Features & Use Cases - Auto-fit pagination: Apply fitPrintPages / resetPrintFit from src/lib/printFit.ts to scale content to A4 portrait or landscape without overflow or empty trailing pages. - Print CSS conventions: Enforce explicit .print-sheet-page sizing, @page rules in src/styles/print.css, break-inside: avoid on rows and headers, and thead { display: table-header-group } for long tables. - PDF export rules: Ensure borders are at least 1px for html2canvas, keep backgrounds off html/body, and use src/lib/pdfExport.ts for DOM-to-PDF conversion. - Use Case: When adding a new warehouse or payroll blank, follow the checklist to verify nothing is clipped in preview, no phantom second page appears, and the deployed Vercel build prints identically. ## Quick Start Ask the assistant to create or fix a printable A4 form following the print-forms rules so it fits one page and exports cleanly to PDF.

Frequently Asked Questions about print-forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fit an HTML form onto one A4 page for printing?▼

Set explicit A4 dimensions on the sheet container with box-sizing: border-box, then call fitPrintPages after the content renders to auto-scale it. Use the portrait option for portrait A4 and shrinkOnly to only reduce oversized content.

How to prevent table rows from splitting across printed pages?▼

Apply break-inside: avoid or page-break-inside: avoid to table rows, cards, and headers. For long tables, set thead to display: table-header-group so the header repeats on each page.

Why does an empty second page appear when printing HTML?▼

Extra pages usually come from background styles on html or body, or from content slightly overflowing the page height. Move backgrounds onto the sheet container and run auto-fit scaling to shrink minor overflow.

Why are borders missing when exporting HTML to PDF with html2canvas?▼

html2canvas cannot render subpixel borders, so anything thinner than 1px disappears in the PDF output. Set all borders that must appear in the PDF to at least 1px thickness.

When should I use Puppeteer instead of browser print for PDF generation?▼

Puppeteer suits standalone HTML-to-PDF conversion outside the app, such as draft layout checks via a CLI script. Inside the application, keep the React blanks with print.css and fitPrintPages rather than rewriting printing to Puppeteer.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

svelte/compose-with-tanstack-form

Create editable Svelte 5+ datagrids by combining TanStack Table and TanStack Form with centralized row and field state.

Official
Intermediate
jonaseck2jonaseck2
2

reports

Ensure identical print preview and PDF/SVG export output for genealogy reports.

Community
Advanced
temple-slopetemple-slope

gws-sheets-append

Append single or multiple rows to Google Sheets via the gws CLI.

Community
Intermediate
soq123soq123

invoice-generator

Generate HTML or React invoices with browser-based PDF export.

Community
Advanced