Files
open-design/skills/invoice/SKILL.md
T
pftom a98096a042 Add initial project structure with essential files
- Created .gitignore to exclude build artifacts and dependencies.
- Added index.html as the main entry point for the application.
- Included LICENSE file with Apache 2.0 terms.
- Initialized package.json and package-lock.json for project dependencies.
- Added pnpm-lock.yaml for package management.
- Created QUICKSTART.md for setup instructions.
- Added README.md and README.zh-CN.md for project documentation in English and Chinese.
2026-04-28 12:25:59 +08:00

1.4 KiB

name, description, triggers, ocd
name description triggers ocd
invoice A printable invoice page — sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions "invoice", "bill", "billing statement", or "发票".
invoice
bill
billing statement
发票
账单
mode platform scenario preview design_system example_prompt
prototype desktop finance
type entry
html index.html
requires sections
true
color
typography
layout
components
Create an invoice from a freelance design studio billing a client for a brand identity project — three line items, 10% retainer, 9% sales tax.

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>