Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Invoice

nexu-io/open-design

  • 251 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

invoice is an open-design Claude Code skill that generates printable HTML invoice pages with sender and recipient blocks, line items, tax breakdown, and payment terms for developers building SaaS billing or ecommerce doc

About

invoice is a design-template skill from nexu-io/open-design that produces single-page printable billing documents as HTML artifacts. The skill reads DESIGN.md, lays out a top brand band with invoice number and due date, two-column sender and recipient blocks, a line items table, right-aligned totals with subtotal, retainer, and tax, plus payment instructions and a print stylesheet. Developers reach for invoice when building SaaS billing UIs, freelance invoicing features, or ecommerce checkout follow-up documents that need branded, print-ready HTML output.

  • branded invoice layout
  • line-item tables
  • tax and totals blocks
  • print-ready styling

Invoice by the numbers

  • 251 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #870 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill invoice

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs251
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

How do you design a printable HTML invoice page?

Design polished invoice layouts with line items, tax blocks, branding, and payment terms for SaaS billing or ecommerce checkout follow-up documents.

Who is it for?

Frontend developers building SaaS billing pages, freelance invoicing features, or ecommerce receipt documents in the open-design template system.

Skip if: Backend engineers who only need Stripe API payment processing without any printable invoice layout or HTML document design.

When should I use this skill?

A user asks to create an invoice, bill, billing statement, or printable payment document with line items and tax breakdown.

What you get

Print-ready HTML invoice artifact with sender block, line items table, tax totals, payment instructions, and @media print stylesheet.

  • Printable HTML invoice artifact
  • Line items table with tax and totals block

By the numbers

  • Defines 7 layout sections from brand band through payment instructions
  • Outputs HTML artifact with @media print stylesheet for clean printing

Files

SKILL.mdMarkdownGitHub ↗

Invoice Skill

Produce a single-page printable invoice.

Workflow

1. Read DESIGN.md. 2. Layout:

  • Top band: studio brand on the left, "INVOICE" + number + date + due date on the right.
  • Two columns: From (sender) / Bill to (recipient) with addresses.
  • Project ref + payment-terms strip.
  • Line items table: description / qty / unit / amount.
  • Right-aligned totals block: subtotal, retainer, tax, total due.
  • Payment instructions (bank, wire, ACH).
  • Thank-you note + signature line.

3. Print stylesheet @media print to remove backgrounds.

Output contract

<artifact identifier="invoice-name" type="text/html" title="Invoice">
<!doctype html>...</artifact>

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What layout sections does invoice include?

invoice includes a top brand band, sender and recipient address columns, project reference strip, line items table with qty and unit price, right-aligned totals with subtotal, retainer, and tax, plus payment instructions and a thank-you signature line.

What output format does invoice produce?

invoice produces a text/html artifact wrapped in open-design output contract tags. The HTML includes a @media print stylesheet that removes backgrounds for clean printable billing documents.

Design & UI/UXpaymentsecommerce
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.