Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Drop-off funnel: 1440, made in this run
Run 1Drop-off funnel“Show our recruitment pipeline as a funnel chart. Numbers 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

Drop-off Funnel

A smooth funnel of four stages from visit to paid, with the count at each stage and the share that moved on.

$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 funnel area chart with conversion between stages into your own project: a wide, smooth funnel narrowing left to right through four stages (visited, viewed pricing, started a trial, paid), filled in a teal-to-indigo blend; stage names and counts sit above, the share that moved on sits in pills below each join; on phones the funnel turns into stacked centred bars. 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 growth, sales or product team needs to show where people drop off between steps (visit, sign-up, trial, paid), or someone asks for a funnel, conversion chart or pipeline chart.

By RecaplyUpdated 12 Nov

Install Drop-off Funnel

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

Read https://recaply.co/skills/drop-off-funnel/install.md and follow it to install the drop-off-funnel skill from drop-off-funnel.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 Drop-off Funnel is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A funnel area chart with conversion between stages
  • Checked at phone and desktop widths

Good fit

  • When a growth, sales or product team needs to show where people drop off between steps

Not for

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

About this skill

You say

Show our recruitment pipeline as a funnel chart. Numbers in brief.md.

It said back

The recruitment funnel chart is built, and the automated check passes at 390, 768 and 1440px. That covers overflow, text size, contrast, focus styles, reduced motion and script errors. I also looked at the 1440 and 390 screenshots and they read cleanly; I didn't open the 768 one.

It shows five stages with your Q3 numbers, filled in a navy-to-gold blend:

Show more

What it did in run 1

  1. drop-off-funnel
  2. ./brief.md
  3. cd .; ls -a; S=.claude/skills/drop-off-funnel; ls $S/reference; cat $S/reference/index.html $S/reference/style.css $S/reference/script.js
  4. cd .; ls -a; ls .claude/skills/drop-off-funnel/reference; cat .claude/skills/drop-off-funnel/reference/index.html .claude/skills/drop-off-funnel/reference/style.css .claude/skills/drop-off-funnel/reference/script.js
  5. cd .; R=.claude/skills/drop-off-funnel/reference cp $R/script.js script.js sed -e 's/--accent:#0E7490/--accent:#1E3A8A/;s/--em:#0E7490/--em:#1E3A8A/;s/--accent2:#4F46E5/--accent2:#D4A017/' $R/style.css > style.css cat > index.html <<'E' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Talentbridge recruitment funnel, Q3</title> <meta name="description" content="Talentbridge's Q3 recruitment pipeline from application to hire, with the count at each stage and the share that moved on."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <main id="main"> <section class="d-sec" id="funnel" aria-labelledby="funnel-h"><div class="sec-head"><h2 id="funnel-h">Our recruitment <em>pipeline</em></h2><p class="sub">How applicants moved from application to hire at Talentbridge in Q3.</p></div><div class="wrap"><div class="d-card fn"><div class="d-top"><div><p class="d-title">Application to hire, Q3</p><p class="d-big">1.7%</p><p class="d-sub">of applicants were hired</p></div></div><div class="plot-wrap"><div class="plot fn-plot" tabindex="0" role="group" aria-label="Recruitment funnel from application to hire. Use the left and right arrow keys to read each stage." aria-describedby="fn-sum"></div><p class="sr-only" aria-live="polite" data-live></p></div><p class="d-hint" id="fn-sum">Of 2,400 applications, 610 reached a phone screen, 180 an interview and 52 an offer; 41 accepted. The steepest cut is at the start, and 79% of offers were accepted. (The shape uses a square-root scale so the small stages stay visible; the labels give the exact numbers.)</p><details class="d-table"><summary>Show the numbers as a table</summary><div class="dt-wrap"><table class="dt"><caption class="sr-only">Recruitment funnel stages, Q3</caption><thead><tr><th scope="col">Stage</th><th scope="col">People</th><th scope="col">Of all applications</th><th scope="col">Of the stage before</th></tr></thead><tbody><tr><th scope="row">Applications</th><td>2,400</td><td>100.0%</td><td>-</td></tr><tr><th scope="row">Phone screens</th><td>610</td><td>25.4%</td><td>25.4%</td></tr><tr><th scope="row">Interviews</th><td>180</td><td>7.5%</td><td>29.5%</td></tr><tr><th scope="row">Offers</th><td>52</td><td>2.2%</td><td>28.9%</td></tr><tr><th scope="row">Hires</th><td>41</td><td>1.7%</td><td>78.8%</td></tr></tbody></table></div></details><script type="application/json" id="fn-data">[["Applications",2400],["Phone screens",610],["Interviews",180],["Offers",52],["Hires",41]]</script></div></div></section> </main> <script src="script.js" defer></script> </body> </html> E sed -i '' 's/of visitors/of applications/g' script.js node .claude/skills/drop-off-funnel/scripts/check.mjs index.html --out check 2>&1 | tail -30
  6. cd .; ls
  7. cp .claude/skills/drop-off-funnel/reference/script.js script.js && sed -e 's/--accent:#0E7490/--accent:#1E3A8A/;s/--em:#0E7490/--em:#1E3A8A/;s/--accent2:#4F46E5/--accent2:#D4A017/' .claude/skills/drop-off-funnel/reference/style.css > style.css && sed -i '' 's/of visitors/of applications/g' script.js && ls
  8. ./index.html
  9. ./style.css
  10. ./script.js
  11. node .claude/skills/drop-off-funnel/scripts/check.mjs index.html --out check 2>&1 | tail -30
  12. ./check/1440.png
  13. ./check/390.png
  14. Done

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

Questions

Is Drop-off Funnel free?

No. Drop-off Funnel 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 Drop-off Funnel?

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

What do I get when I buy Drop-off Funnel?

A ZIP of the whole skill folder (34 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 Drop-off Funnel?

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 ./drop-off-funnel with your agent's flag.

What do I get from Drop-off Funnel?

One HTML file with its CSS inside: no build step, no framework. A funnel area chart with conversion between stages. Checked at phone and desktop widths.

What does Drop-off Funnel need?

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

How big is Drop-off Funnel?

7 files, about 21,674 tokens in all. The SKILL.md is about 2,173 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 12 s to 1 min 12 s and $0.25 to $0.25 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 Drop-off Funnel to use it?

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