Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Money flow chart: 1440, made in this run
Run 1Money flow chart“Create a dark cash-flow chart for our freelancers' invoicing app. Data in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Money Flow Chart

A dark money chart: the balance as a soft line over money in and out shown as bars above and below a zero line.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a dark account-balance chart with money in and out into your own project: a near-black card with the current balance large at the top and a 30 or 90 day switch; a periwinkle balance line with a faint glow fills the upper part; under it, green bars rise for money in and coral bars drop for money out each day; a tooltip shows the day's balance, in and out. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a banking, budgeting, invoicing or finance app needs to show a balance over time with the flows that moved it, or someone asks for a balance chart, cash-flow chart or dark finance chart.

By RecaplyUpdated 12 Nov

Install Money Flow Chart

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/money-flow-chart/install.md and follow it to install the money-flow-chart skill from money-flow-chart.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Money Flow Chart is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A dark account-balance chart with money in and out
  • Checked at phone and desktop widths

Good fit

  • When a banking, budgeting, invoicing or finance app needs to show a balance over time with the flows that moved it

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Create a dark cash-flow chart for our freelancers' invoicing app. Data in brief.md.

It said back

I built the dark cash-flow chart and it passes the skill's check at 390, 768 and 1440 px. I looked at the 390 px and 1440 px screenshots and they read cleanly. I did not open the 768 px one.

It shows the business account balance over 60 days in a midnight-blue card with a gold balance line. Client payments are green bars above the zero line and money out is coral bars below it. Hovering a day, or using the arrow keys, shows that day's balance, in and out. There is also a "Show the numbers as a table" option.

Show more

What it did in run 1

  1. money-flow-chart
  2. ./brief.md
  3. cd .; ls -a; S=.claude/skills/money-flow-chart; ls $S/reference; cat $S/reference/index.html $S/reference/style.css $S/reference/script.js
  4. ls -a && ls .claude/skills/money-flow-chart/reference && cat .claude/skills/money-flow-chart/reference/index.html .claude/skills/money-flow-chart/reference/style.css .claude/skills/money-flow-chart/reference/script.js
  5. R=.claude/skills/money-flow-chart/reference && cp $R/style.css $R/script.js . && mkdir -p tools && cat > tools/gen.mjs <<'EOF' import fs from 'node:fs'; const ref='.claude/skills/money-flow-chart/reference/index.html'; let html=fs.readFileSync(ref,'utf8'); // 60 days ending today (2026-11-10) const end=new Date('2026-11-10T12:00:00Z'); const iso=i=>new Date(end.getTime()-(59-i)*864e5).toISOString().slice(0,10); // i=0..59 -> day i+1 const inn={9:1800,31:2400,47:950}; const out={10:600,40:600}; // placeholder software/travel spends (illustrative, not real) const sp={3:29,5:42,8:14,12:89,14:29,15:36,17:12,19:64,21:48,22:15,24:132,26:29,28:22,29:41,33:14,35:76,36:29,38:58,41:18,43:210,44:35,46:29,49:15,51:92,53:29,55:44,56:19,58:67,60:29}; let bal=3200; const rows=[]; for(let d=1;d<=60;d++){const i=inn[d]||0,o=(out[d]||0)+(sp[d]||0);bal+=i-o;rows.push([iso(d-1),bal,i,o]);} const f=n=>'£'+n.toLocaleString('en-GB'); const last=rows[59][1], ch=last-3200+0; // change over 60 days vs. opening balance const wk=[];for(let s=0;s<60;s+=7){const c=rows.slice(s,s+7);const d=new Date(c.at(-1)[0]+'T12:00:00Z').toLocaleDateString('en-GB',{day:'numeric',month:'short'});wk.push(<tr><th scope="row">${d}</th><td>${f(c.at(-1)[1])}</td><td>${f(c.reduce((a,r)=>a+r[2],0))}</td><td>${f(c.reduce((a,r)=>a+r[3],0))}</td></tr>);} const rep=(a,b)=>{if(!html.includes(a))throw a;html=html.replace(a,b)}; rep('<title>Money flow chart</title>','<title>Cash flow – Ledgerly</title>'); html=html.replace(/<meta name="description"[^>]*>/,'<meta name="description" content="Business account balance over 60 days, with client payments in and tax transfers and spending out.">'); html=html.replace(/<section[\s\S]*?<div class="sec-head[\s\S]*?<\/div><div class="wrap">/,'<section class="d-sec dark" id="balance" aria-labelledby="balance-h"><div class="sec-head"><h2 id="balance-h">Your <em>cash flow</em></h2><p class="sub">Client payments in, tax savings and spending out, and the balance they leave you with.</p></div><div class="wrap">'); rep('Everyday account','Business account'); rep('£7,635.00',£${last.toLocaleString('en-GB',{minimumFractionDigits:2})}); rep('Up £935.00',${ch>=0?'Up':'Down'} £${Math.abs(ch).toLocaleString('en-GB',{minimumFractionDigits:2})}); rep('over the last 30 days','over the last 60 days'); rep('<button type="button" data-days="30" aria-pressed="true">30 days</button><button type="button" data-days="90" aria-pressed="false">90 days</button>','<button type="button" data-days="30" aria-pressed="false">30 days</button><button type="button" data-days="60" aria-pressed="true">60 days</button>'); rep('Balance with daily money in and out.','Business account balance with daily money in and out.'); html=html.replace(/<p class="d-hint"[^>]*>[\s\S]*?<\/p>/,'<p class="d-hint" id="bl-sum">The balance starts at £3,200 and rises with client payments (£1,800 on day 9, £2,400 on day 31, £950 on day 47). £600 goes to tax savings on days 10 and 40; the small daily bars are software and travel. Bar heights use a square-root scale so small spends stay visible next to payments.</p>'); html=html.replace(/<tbody>[\s\S]*?<\/tbody>/,'<tbody>'+wk.join('')+'</tbody>'); rep('Balance at the end of each week','Balance at the end of each 7-day block'); rep('<th scope="col">Week ending</th>','<th scope="col">Period ending</th>'); html=html.replace(/<script type="application\/json" id="bl-data">[\s\S]*?<\/script>/,'<script type="application/json" id="bl-data">'+JSON.stringify(rows)+'</script>'); fs.writeFileSync('index.html',html); EOF node tools/gen.mjs && sed -i '' 's/let days = 30/let days = 60/' script.js && sed -i '' -e 's/--bg:#0B0D12/--bg:#070C1F/;s/--surface:#13161E/--surface:#0F1733/;s/--ink:#F1F3F8/--ink:#F2F4FB/;s/--muted:#A2A9BA/--muted:#A3AECB/;s/--line:#262B38/--line:#243059/;s/--accent:#A5B4FC/--accent:#F5C451/;s/--on-accent:#0B0D12/--on-accent:#070C1F/;s/--em:#C7D2FE/--em:#F8D98A/;s/--tip-ink:#0B0D12/--tip-ink:#070C1F/;s/--tip-bg:#F1F3F8/--tip-bg:#F2F4FB/' style.css && grep -c 60 index.html && node .claude/skills/money-flow-chart/scripts/check.mjs index.html --out check 2>&1 | tail -30
  6. cp .claude/skills/money-flow-chart/reference/style.css .claude/skills/money-flow-chart/reference/script.js . && mkdir -p tools && ls
  7. ./tools/gen.mjs
  8. cp .claude/skills/money-flow-chart/reference/style.css ./style.css && cp .claude/skills/money-flow-chart/reference/script.js ./script.js && ls
  9. ./tools/gen.mjs
  10. node tools/gen.mjs && node .claude/skills/money-flow-chart/scripts/check.mjs index.html --out check 2>&1 | tail -30
  11. ./check/1440.png
  12. ./check/390.png
  13. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 7 s · $0.22 of API use

Questions

Is Money Flow Chart free?

No. Money Flow Chart costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Money Flow Chart?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Money Flow Chart?

A ZIP of the whole skill folder (35 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Money Flow Chart?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./money-flow-chart with your agent's flag.

What do I get from Money Flow Chart?

One HTML file with its CSS inside: no build step, no framework. A dark account-balance chart with money in and out. Checked at phone and desktop widths.

What does Money Flow Chart need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Money Flow Chart?

7 files, about 22,823 tokens in all. The SKILL.md is about 2,179 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 7 s to 1 min 7 s and $0.22 to $0.22 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Money Flow Chart to use it?

Type /money-flow-chart first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.