Zakaria/open-design
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

first-commit
ci / Validate workspace (push) Has been cancelled
Details
landing-page-ci / Validate landing page (push) Has been cancelled
Details
landing-page-deploy / Deploy landing page (push) Has been cancelled
Details
github-metrics / Generate repository metrics SVG (push) Has been cancelled
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zakaria
2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/finance-report/SKILL.md
+60
View File
@@ -0,0 +1,60 @@
---
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 2–3 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>
```
skills/finance-report/example.html
+242
View File
@@ -0,0 +1,242 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Northwind — Q3 Financial Report</title>
<style>
:root {
--bg: #f7f6f2;
--paper: #ffffff;
--ink: #11141a;
--muted: #5f6573;
--line: #e6e3dd;
--line-strong: #c8c2b6;
--accent: #1f6e8c;
--accent-soft: #e7f0f4;
--positive: #1f8c5c;
--negative: #b13b3b;
--display: 'Iowan Old Style', 'Charter', 'Iowan', Georgia, serif;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 14px;
line-height: 1.55;
}
.page {
max-width: 980px;
margin: 32px auto;
padding: 56px 64px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(28,27,26,0.06);
}
header.masthead { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
.mast-left { display: flex; flex-direction: column; gap: 6px; }
.mast-co { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; font-weight: 700; }
.mast-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mast-badge {
font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 4px;
border: 1px solid var(--ink); color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em;
}
h2 { font-family: var(--display); font-size: 19px; margin: 36px 0 14px; letter-spacing: -0.005em; font-weight: 700; }
h2 .accent { color: var(--accent); }
.lede { color: var(--muted); max-width: 64ch; }
/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 28px; }
.kpi { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.kpi .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi .value { font-family: var(--display); font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1; letter-spacing: -0.01em; }
.kpi .delta { font-family: var(--mono); font-size: 11.5px; margin-top: 6px; }
.delta.up { color: var(--positive); }
.delta.down { color: var(--negative); }
.delta.flat { color: var(--muted); }
/* Charts */
.chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.card { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.card .sub { font-size: 12px; color: var(--muted); }
.chart svg { width: 100%; height: 200px; display: block; margin-top: 8px; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.legend .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legend .a { background: var(--accent); }
.legend .b { background: var(--ink); opacity: 0.6; }
/* Bars */
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row .label { color: var(--muted); }
.bar-track { background: var(--accent-soft); border-radius: 4px; height: 10px; position: relative; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 4px; }
.bar-value { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--ink); }
/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 6px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
td.num, th.num { text-align: right; font-family: var(--mono); }
tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; padding-top: 14px; }
.badge { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 999px; font-weight: 500; }
.badge.green { background: #e7f4ee; color: var(--positive); }
.badge.amber { background: #fbf0d6; color: #8a6912; }
.badge.red { background: #f7e1e1; color: var(--negative); }
.logo { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #2c98c5); margin-right: 10px; vertical-align: middle; }
/* Outlook */
.outlook { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.outlook .quote { padding: 18px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; font-family: var(--display); font-size: 16px; line-height: 1.5; }
.outlook .signoff { font-size: 13px; color: var(--muted); }
.outlook .signoff strong { color: var(--ink); display: block; font-family: var(--display); font-size: 16px; margin-bottom: 2px; }
footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 760px) {
.page { padding: 32px 24px; margin: 0; border-radius: 0; }
.kpis { grid-template-columns: 1fr 1fr; }
.chart-row { grid-template-columns: 1fr; }
.outlook { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="page">
<header class="masthead">
<div class="mast-left">
<div class="mast-meta">Northwind Trading · Q3 FY25</div>
<div class="mast-co">Quarterly Financial Report</div>
<div class="mast-meta">Prepared by Finance · Issued 14 October 2025</div>
</div>
<div class="mast-badge">Confidential</div>
</header>
<p class="lede">Q3 closed ahead of plan on revenue and gross margin, with cash runway extending to 27 months on the back of a leaner cost base. Mid-market and enterprise both expanded; SMB churn remains the watch item heading into Q4.</p>
<h2>Headline KPIs</h2>
<div class="kpis">
<div class="kpi">
<div class="label">Revenue</div>
<div class="value">$8.42M</div>
<div class="delta up">▲ 14.6% QoQ</div>
</div>
<div class="kpi">
<div class="label">Net new MRR</div>
<div class="value">$184k</div>
<div class="delta up">▲ 22.0% QoQ</div>
</div>
<div class="kpi">
<div class="label">Gross margin</div>
<div class="value">82%</div>
<div class="delta up">▲ 3 pp YoY</div>
</div>
<div class="kpi">
<div class="label">Cash runway</div>
<div class="value">27 mo</div>
<div class="delta up">▲ 4 mo QoQ</div>
</div>
</div>
<h2>Revenue & costs</h2>
<div class="chart-row">
<div class="card">
<h3>Revenue · trailing 12 months</h3>
<div class="sub">USD millions, monthly</div>
<div class="chart">
<svg viewBox="0 0 720 200" preserveAspectRatio="none">
<defs>
<linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.32"/>
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
</linearGradient>
</defs>
<polygon fill="url(#lg)" points="20,180 20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40 700,40 700,180" />
<polyline fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
points="20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40" />
<polyline fill="none" stroke="#11141a" stroke-opacity="0.45" stroke-width="1.5" stroke-dasharray="3 3"
points="20,165 80,158 140,150 200,142 260,134 320,128 380,122 440,116 500,108 560,102 620,96 680,90" />
<circle cx="680" cy="40" r="3.5" fill="var(--accent)"/>
</svg>
<div class="legend">
<span><span class="swatch a"></span>Revenue</span>
<span><span class="swatch b"></span>Plan</span>
</div>
</div>
</div>
<div class="card">
<h3>Operating costs</h3>
<div class="sub">USD thousands, Q3</div>
<div class="bars">
<div class="bar-row"><span class="label">R&amp;D</span><div class="bar-track"><div class="bar-fill" style="width: 78%"></div></div><span class="bar-value">$1.42M</span></div>
<div class="bar-row"><span class="label">Sales & GTM</span><div class="bar-track"><div class="bar-fill" style="width: 60%"></div></div><span class="bar-value">$1.10M</span></div>
<div class="bar-row"><span class="label">G&amp;A</span><div class="bar-track"><div class="bar-fill" style="width: 36%"></div></div><span class="bar-value">$660k</span></div>
<div class="bar-row"><span class="label">Marketing</span><div class="bar-track"><div class="bar-fill" style="width: 28%"></div></div><span class="bar-value">$510k</span></div>
<div class="bar-row"><span class="label">Infrastructure</span><div class="bar-track"><div class="bar-fill" style="width: 18%"></div></div><span class="bar-value">$330k</span></div>
</div>
</div>
</div>
<h2>P&amp;L summary</h2>
<table>
<thead>
<tr>
<th>Line item</th>
<th class="num">Q3 FY25</th>
<th class="num">Q2 FY25</th>
<th class="num">Δ QoQ</th>
<th class="num">Q3 FY24</th>
<th class="num">Δ YoY</th>
</tr>
</thead>
<tbody>
<tr><td>Revenue</td><td class="num">$8.42M</td><td class="num">$7.34M</td><td class="num" style="color: var(--positive);">+14.6%</td><td class="num">$5.92M</td><td class="num" style="color: var(--positive);">+42.2%</td></tr>
<tr><td>Cost of revenue</td><td class="num">($1.51M)</td><td class="num">($1.46M)</td><td class="num" style="color: var(--negative);">+3.4%</td><td class="num">($1.18M)</td><td class="num" style="color: var(--negative);">+28.0%</td></tr>
<tr><td>Gross profit</td><td class="num">$6.91M</td><td class="num">$5.88M</td><td class="num" style="color: var(--positive);">+17.5%</td><td class="num">$4.74M</td><td class="num" style="color: var(--positive);">+45.8%</td></tr>
<tr><td>Operating expenses</td><td class="num">($4.02M)</td><td class="num">($4.18M)</td><td class="num" style="color: var(--positive);">−3.8%</td><td class="num">($3.66M)</td><td class="num" style="color: var(--negative);">+9.8%</td></tr>
<tr class="total"><td>Operating income</td><td class="num">$2.89M</td><td class="num">$1.70M</td><td class="num" style="color: var(--positive);">+70.0%</td><td class="num">$1.08M</td><td class="num" style="color: var(--positive);">+167.5%</td></tr>
</tbody>
</table>
<h2>Top accounts</h2>
<table>
<thead>
<tr>
<th>Customer</th>
<th>Plan</th>
<th>Region</th>
<th class="num">ARR</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr><td><span class="logo"></span>Pioneer Robotics</td><td>Enterprise</td><td>EMEA</td><td class="num">$612k</td><td><span class="badge green">Renewed</span></td></tr>
<tr><td><span class="logo"></span>Atlas Cooperative</td><td>Enterprise</td><td>APAC</td><td class="num">$486k</td><td><span class="badge green">Expanded</span></td></tr>
<tr><td><span class="logo"></span>Foundry Group</td><td>Team Plus</td><td>NA</td><td class="num">$320k</td><td><span class="badge amber">In renewal</span></td></tr>
<tr><td><span class="logo"></span>Voltage Co.</td><td>Enterprise</td><td>NA</td><td class="num">$298k</td><td><span class="badge green">Renewed</span></td></tr>
<tr><td><span class="logo"></span>Lattice Health</td><td>Team Plus</td><td>EMEA</td><td class="num">$214k</td><td><span class="badge red">At risk</span></td></tr>
</tbody>
</table>
<h2>Outlook · Q4</h2>
<div class="outlook">
<div class="quote">"We're entering Q4 with the strongest pipeline coverage of the year — 3.4× plan — and the operating leverage to convert it without expanding the cost base."</div>
<div class="signoff">
<strong>Mira Okafor, CFO</strong>
We expect revenue of $9.1–9.4M, net new MRR of $200–220k, and gross margin holding above 80%. The two open items are SMB churn (we'll publish a recovery plan with the November update) and the EMEA infra migration, which moves to GA in mid-November.
</div>
</div>
<footer>
<span>Northwind Trading · Q3 FY25 · Internal use only</span>
<span>Page 1 of 1</span>
</footer>
</div>
</body>
</html>