skills.rest
ma-wais
ma-waisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

invoice-generator

Render React-based invoices and export pixel-perfect PDFs via Puppeteer.

Updated Mar 24, 2026
Search Tags:#pdf#react#puppeteer#invoicing#invoice#printing
One-click install
npx skills add https://github.com/ma-wais/Quality-Management-System --skill invoice-generator-ma-wais
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: invoice-generator
Source: https://github.com/ma-wais/Quality-Management-System/tree/main/.local/secondary_skills/invoice-generator
Command: npx skills add https://github.com/ma-wais/Quality-Management-System --skill invoice-generator-ma-wais

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of professional invoices by rendering a React-based web artifact and exporting a pixel-perfect PDF via Puppeteer. The web page is the single source of truth — the PDF is a screenshot of it.

Core Features & Use Cases

  • Auto-scale invoices to fit the page for consistent print layouts.
  • Pixel-perfect PDF export via Puppeteer from the live invoice page.
  • Multi-page support with repeating table headers and proper totals.
  • Quick preview-first workflow that renders in a web app before printing.

Quick Start

Provide complete seller, client, item, and tax data to generate a ready-to-print invoice and PDF.

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 PDF invoice from React?▼

To generate a PDF invoice from React, this Skill renders a React-based web artifact as a live preview and exports a pixel-perfect PDF via Puppeteer. The web page serves as the single source of truth, ensuring the printed output matches the screen exactly.

Can I auto-scale invoice layouts for consistent PDF printing?▼

Yes, auto-scaling invoice layouts ensures consistent print dimensions. This Skill applies auto-scaling to fit the React invoice onto the page, maintaining exact page dimensions and printable styling for a reliable PDF export.

Does this invoice PDF rendering approach support multi-page tables?▼

Multi-page invoice PDF rendering supports repeating table headers and proper totals across pages. This Skill handles accurate multi-page handling directly through Puppeteer, ensuring line items and data-driven content flow correctly without breaking layout.

What data do I need to provide to create an invoice?▼

Creating an invoice requires a single-page data model containing seller, client, item, dates, tax, and currency information. Providing this complete data allows the Skill to generate a ready-to-print React page and subsequent PDF.

What's the best way to handle pixel-perfect PDF export for invoicing?▼

The best way to achieve pixel-perfect PDF export for invoicing is screenshotting a live React web page via Puppeteer. This Skill uses the rendered web artifact as the single source of truth, guaranteeing the PDF matches the on-screen invoice exactly.

Related Skills

Explore More Finance & Accounting Skills→
naopensedoit2-designnaopensedoit2-design

invoice-generator

Generate React invoice layouts and export pixel-perfect PDFs via Puppeteer.

Community
Advanced
hanabi-jpnhanabi-jpn
3

moneyforward-agent

Automate invoices, expenses, journal entries, and bank reconciliation on MoneyForward Cloud.

Community
Advanced
rezosndrezosnd

invoice-generator

Generate pixel-perfect invoice PDFs from structured billing data via Puppeteer.

Community
Advanced
AbeJitsuAbeJitsu

ai-html-generate

Recreate PDF pages as semantic HTML5 from PNG, JSON, and ASCII inputs.

Community
Intermediate