Web & Frontendlow risk

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 "财报".

nexu-io/open-design·design-templates/finance-report/SKILL.md
61/ 100Recommendation
↓

Install this skill

Choose your coding agent and copy a project or personal installation command.

Pinned to the indexed commit
Project installation.agents/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a codex -y
Personal installation~/.agents/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a codex -g -y
Manual folder.agents/skills/finance-reportOfficial docs ↗
Project installation.claude/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a claude-code -y
Personal installation~/.claude/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a claude-code -g -y
Manual folder.claude/skills/finance-reportOfficial docs ↗
Project installation.agents/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a github-copilot -y
Personal installation~/.copilot/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a github-copilot -g -y
Manual folder.agents/skills/finance-reportOfficial docs ↗
Project installation.agents/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a cursor -y
Personal installation~/.cursor/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a cursor -g -y
Manual folder.agents/skills/finance-reportOfficial docs ↗
Project installation.agents/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a gemini-cli -y
Personal installation~/.gemini/skills/finance-report
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/finance-report -a gemini-cli -g -y
Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/finance-report
Manual folder.agents/skills/finance-reportOfficial docs ↗
⚠ Installation uses the open-source skills CLI. Inspect the source and permissions before running the command.

Skill instructions

View source on GitHub ↗
# 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>
```