invoice-generator

Generate branded invoices as React web apps with Puppeteer PDF export.

Updated Mar 18, 2026

Search Tags:#automation #pdf #react #puppeteer #invoice #web-app

Ready to run

npx skills add https://github.com/se1111th/VisionPort-Visual-Refresh_SRC --skill invoice-generator-se1111th

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: invoice-generator
Source: https://github.com/se1111th/VisionPort-Visual-Refresh_SRC/tree/main/.local/secondary_skills/invoice-generator
Command: npx skills add https://github.com/se1111th/VisionPort-Visual-Refresh_SRC --skill invoice-generator-se1111th

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate professional invoices as React web apps with auto-scale layout and pixel-perfect PDF export via Puppeteer. The web page is the single source of truth — the PDF is a screenshot of it.

Core Features & Use Cases

Auto-scaling invoices: layout adapts to page size and content to prevent clipping.
Pixel-perfect PDF export via Puppeteer: ensures the PDF mirrors the on-screen invoice.
End-to-end workflow: source-of-truth web app + PDF generation, supports multi-page invoices with repeating headers.
Use Case: Businesses needing consistent, brand-aligned invoices delivered as PDFs.

Quick Start

Provide a complete set of seller, client, and line item data to render a ready-to-export invoice.

Frequently Asked Questions about invoice-generator

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

FAQPage Schema

How do I generate a pixel-perfect PDF invoice from a React web app?▼

You can generate a pixel-perfect PDF invoice from a React web app by using Puppeteer to screenshot the on-screen React page, ensuring the PDF mirrors the exact layout. The web page acts as the single source of truth for the document.

How do I prevent content clipping when exporting multi-page invoices to PDF?▼

To prevent content clipping when exporting multi-page invoices, this approach uses an auto-scaling React layout that adapts to page size and content. It also supports multi-page invoices with repeating headers to handle growing item counts.

What is the best way to automate branded invoice creation from structured data?▼

The best way to automate branded invoice creation from structured data is to implement an INVOICE_DATA schema within a React component. This ensures consistent, brand-aligned invoices are rendered directly from the provided seller, client, and line item data.

Does Puppeteer work with React for print-ready PDF export?▼

Yes, Puppeteer works seamlessly with React for print-ready PDF export. It renders the React-based web app and captures it as a screenshot, guaranteeing the resulting PDF accurately reflects the on-screen invoice layout.

Can I use this React invoice generation method for an agency workflow?▼

Yes, you can use this React invoice generation method for an agency workflow. It is specifically applicable for freelancers, product teams, and agencies that need consistent, brand-aligned invoices generated from structured data.

Why does my exported invoice PDF not match the on-screen React layout?▼

If your exported invoice PDF does not match the on-screen React layout, you need a scale-to-fit mechanism to prevent clipping. This approach uses Puppeteer to capture the web page exactly as rendered, making the page the single source of truth.