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

2.1 KiB
Raw Blame History

name, description, triggers, od
name description triggers od
finance-report 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 "财报".
financial report
finance report
quarterly report
p&l
mrr review
财报
财务报告
mode platform scenario featured preview design_system example_prompt
prototype desktop finance 10
type entry
html index.html
requires sections
true
color
typography
layout
components
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>