Files
open-design/skills/finance-report/SKILL.md
T
Zakaria a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
first-commit
2026-05-04 14:58:14 -04:00

61 lines
2.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
name: finance-report
description: |
Quarterly / monthly financial report — masthead with KPIs, revenue and
burn charts, P&L summary table, top-line highlights, and an outlook
paragraph. Use when the brief mentions "financial report", "Q3 report",
"MRR review", "P&L", or "财报".
triggers:
- "financial report"
- "finance report"
- "quarterly report"
- "p&l"
- "mrr review"
- "财报"
- "财务报告"
od:
mode: prototype
platform: desktop
scenario: finance
featured: 10
preview:
type: html
entry: index.html
design_system:
requires: true
sections: [color, typography, layout, components]
example_prompt: "Build me a Q3 financial report for an early-stage SaaS — MRR, burn, gross margin, top accounts."
---
# Finance Report Skill
Produce a single-screen financial report in one self-contained HTML file.
## Workflow
1. **Read the active DESIGN.md.** Tables, KPI cards, and chart strokes use
palette tokens — never invent new ones.
2. **Classify** the period (monthly / quarterly / yearly) and entity
(startup, division, project) from the brief. If unspecified, assume a
quarterly SaaS report and pick believable numbers.
3. **Layout** the page in this order:
- Masthead: company / period / "Confidential — Finance" badge.
- Headline KPI strip (4 cards): Revenue, Net new MRR, Gross margin, Cash runway.
- Revenue trend chart (inline SVG line + area).
- Cost breakdown chart (inline SVG bar) with a 23 bullet caption.
- P&L summary table (Revenue / Gross profit / Opex / Net) with current vs prior period.
- Top accounts table with logo placeholders, plan, ARR, status badge.
- Outlook paragraph + footer with author + signature line.
4. **Write** one self-contained HTML doc (CSS in one inline `<style>` block).
5. **Self-check**: every number ties to a labelled chart or table; deltas
show direction and percentage; accent colour used at most twice.
## Output contract
```
<artifact identifier="finance-report-q3" type="text/html" title="Q3 Finance Report">
<!doctype html>
<html>...</html>
</artifact>
```