- Agent kit
Billing screens prompt
What an account needs to see about money: the plan with usage, and the invoices.
Prompt
Prompt
Use the klarhimmel-design skill. Build the billing page for {product}: plan {plan} with usage {usage}, and the invoice list. Install: npx shadcn add @klarhimmel/app-billing-plan @klarhimmel/app-billing-invoices (remove what you do not use) Pick: - app-billing-plan: plan, features, usage meters, manage and upgrade; active, trial, past due - app-billing-invoices: invoice table with a status word and a download link per row Props: plan { name, price, interval }; usage { label, used, limit, unit } as text numbers; state active|trial|pastDue sets the notice; invoice rows { number, date, amount, status paid|due|failed, href }. Copy: Prices with currency and VAT basis. The past-due notice says what is wrong and the one thing to do. Amounts are text you format. Accessibility: Meters are native meter elements and say critical in words; status is always a word, never colour alone; each download link names its invoice number. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: prices show currency and VAT basis; past-due state has a clear action; every invoice link has a real href.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet admin |
{plan} | The current plan and its price | Grow, 990 SEK a month |
{usage} | What is metered | bookings, users |
Blocks it uses
A good result
Prices show currency and VAT basis. Past-due state has a clear action. Every invoice link has a real href.
- [ ] prices show currency and VAT basis
- [ ] past-due state has a clear action
- [ ] every invoice link has a real href