How to use the Invoice Page Designer agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions that an AI agent can read when a task matches it. The skill is described in a SKILL.md file, which tells the agent when to use it and how to do the work.

When this skill is active, the agent reads the project's DESIGN.md design system file first, then builds a single-page invoice. The page includes a top band with the studio brand and invoice number, date and due date; From and Bill to address columns; a project reference and payment-terms strip; a line items table with description, quantity, unit and amount; a right-aligned totals block showing subtotal, retainer, tax and total due; payment instructions; and a thank-you note with a signature line. A print stylesheet removes backgrounds so the page prints cleanly.

• Produces one HTML page (the example file is example.html).
• Styles follow the project's design guidelines.
• Does not send invoices, collect payments or connect to accounting software.
• Does not check tax rules, currency formats or payment details.

How do you install the invoice skill?

You can install the skill in one of two ways. Download the ZIP from this page and unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it available only for that project.

Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

The skill's package includes two files: SKILL.md, which holds the instructions, and example.html, an example invoice page you can open to see the expected output. Your agent runtime must be able to read SKILL.md files, and the project should contain a DESIGN.md file, because the workflow starts by reading it.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a natural request?

The skill activates when your brief mentions invoice, bill, billing statement or 发票 (Chinese for invoice), or 账单 (bill). You do not need special syntax. Describe the invoice in ordinary language and include the details the page needs.

A useful request names the sender, the recipient, the items with quantities and prices, the tax rate and the payment method. The skill's own example prompt is a freelance design studio billing a client for a brand identity project, with three line items, a 10% retainer and 9% sales tax.

• Include the sender and recipient names and addresses.
• List each line item with description, quantity, unit and amount.
• State the tax rate and any retainer or deposit.
• Say how the client should pay: bank, wire or ACH details.

What does a good example request look like?

Here is a request that matches the skill's example. Replace the details with your own before using the output.

Write the request as a single brief. The agent will then produce an HTML page following the layout steps in the skill.

• Create an invoice from a freelance design studio billing a client for a brand identity project, with three line items, a 10% retainer and 9% sales tax.

What do you need before using the skill, and what are the safety notes?

The skill needs an agent runtime that can read SKILL.md files and a DESIGN.md design system file in the project. It does not run scripts and does not use the network, according to its description. It is a set of layout instructions plus an example page.

Because the skill does not verify tax rules, currency formatting or payment details, treat every figure as unchecked. Review totals, tax rates and bank details yourself, and have an accountant look at any real invoice before it is sent or relied on.

• Requires: a runtime that reads SKILL.md, and DESIGN.md in the project.
• Runs scripts: no. Uses network: no.
• Check all numbers, tax rates and payment details by hand.
• Not suitable as a legally or financially binding billing document without professional review.

What tips help you get a better invoice page?

Give the agent complete, specific details up front so it does not have to guess. Ask for the print stylesheet to be kept, since the skill includes a print rule that removes backgrounds. Preview the page in a browser and print or save it as PDF to check the layout.

Treat the output as a starting point. Edit the HTML to match your own brand and wording, then verify every number.

• Open the page in a browser and use print preview before sending.
• Keep DESIGN.md current so the styling matches your brand.
• Edit the generated HTML directly for wording or layout changes.