Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Dark stats hero: 1440, made in this run
Run 1Dark stats hero“Dark hero with big animated numbers for our cybersecurity company. Copy 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

Dark Stats Hero

A dark hero that leads with proof: a strong headline and four large figures that count up once when they come into view.

$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 hero with large counting figures into your own project: green-black hero with a faint grid; a kicker, a large headline, a line and two buttons on the left; under them a row of four big figures (99.99% uptime, 38 regions, 1.2B requests a day, under 40 ms) separated by thin rules, counting up once. 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 an infrastructure, security, finance or B2B product with strong numbers wants a hero that leads with proof, or someone asks for a stats hero, counters or a numbers band.

By RecaplyUpdated 12 Nov

Install Dark Stats Hero

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

Read https://recaply.co/skills/dark-stats-hero/install.md and follow it to install the dark-stats-hero skill from dark-stats-hero.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 Dark Stats Hero is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A dark hero with large counting figures
  • Checked at phone and desktop widths

Good fit

  • When an infrastructure, security, finance or B2B product with strong numbers wants a hero that leads with proof

Not for

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

About this skill

You say

Dark hero with big animated numbers for our cybersecurity company. Copy in brief.md.

It said back

The Bastion Security hero is built as plain HTML, CSS and JavaScript, and the skill's check passes at 390, 768 and 1440px. That check covers overflow, small text, alt text, names, contrast, focus styles, reduced motion and script errors.

I looked at the 1440px and 390px screenshots. I didn't open the 768px one, and I didn't re-view the 1440px one after the last fix. I didn't test the counting itself in a browser or with reduced motion switched on.

Show more

What it did in run 1

  1. dark-stats-hero
  2. ls -la && cat brief.md
  3. cd ./.claude/skills/dark-stats-hero/reference && cat index.html style.css script.js
  4. cd . && cat > index.html <<'EOF' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bastion Security: we watch your network so you can sleep</title> <meta name="description" content="Bastion Security protects 2,400 companies with a 24/7 security team and a 4-minute average response."> <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=JetBrains+Mono:wght@500;700&family=Inter+Tight:wght@400;500;600;700&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <div class="hero st"> <header class="hbar wrap"> <a class="brand" href="#main"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 2 4 7v8c0 7.5 5 13 12 15 7-2 12-7.500 12-15V7z" fill="#2563EB"/><path d="M11 16l4 4 6-8" fill="none" stroke="#fff" stroke-width="2.600" stroke-linecap="round" stroke-linejoin="round"/></svg>Bastion Security</a> <a class="btn btn-primary" href="#risk-check">Get a free risk check</a> </header> <main id="main"> <div class="wrap st-in"> <p class="h-kick">Managed cybersecurity</p> <h1>We watch your network so you can sleep</h1> <p class="h-lede">A security team that never clocks off, watching for threats around the clock and stepping in within minutes when one gets through.</p> <div class="h-acts"> <a class="btn btn-primary" id="risk-check" href="#risk-check">Get a free risk check</a> <a class="btn btn-ghost" href="#how-we-work">How we work</a> </div> <dl class="st-figs"> <div><dt>companies protected</dt><dd><span class="sr-only">2,400</span><span aria-hidden="true"><span class="st-n" data-to="2400" data-dp="0">2,400</span></span></dd></div> <div><dt>threats blocked last year</dt><dd><span class="sr-only">11 million</span><span aria-hidden="true"><span class="st-n" data-to="11" data-dp="0">11</span> million</span></dd></div> <div><dt>average response time</dt><dd><span class="sr-only">4 minutes</span><span aria-hidden="true"><span class="st-n" data-to="4" data-dp="0">4</span> <small>min</small></span></dd></div> <div><dt>security team, every day of the year</dt><dd><span class="sr-only">24/7</span><span aria-hidden="true"><span class="st-n" data-to="24" data-dp="0">24</span>/7</span></dd></div> </dl> </div> </main> </div> <script src="script.js" defer></script> </body> </html> EOF sed -i '' 's/7\.500/7.5/' index.html cat > style.css <<'EOF' :root{--bg:#050608;--surface:#0E1118;--ink:#F2F5FA;--muted:#A9B3C4;--line:#232A38;--accent:#2563EB;--accent-hover:#3B76F5;--on-accent:#fff;--em:#6FA3FF;--font-display:'JetBrains Mono',ui-monospace,monospace;--font-body:'Inter Tight',system-ui,sans-serif} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased} svg{max-width:100%;display:block} h1{font-family:var(--font-display);line-height:1.1;margin:0;text-wrap:balance} p{margin:0} a{color:inherit} :focus-visible{outline:3px solid #6FA3FF;outline-offset:3px;border-radius:4px} .wrap{width:min(100% - 40px,1180px);margin-inline:auto} .skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:8px;text-decoration:none} .skip:focus{left:12px} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.65em 1.35em;border-radius:8px;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .2s ease,box-shadow .2s ease} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{background:var(--accent-hover);box-shadow:0 6px 18px -8px var(--accent)} .btn-ghost{border-color:#3A4558;background:transparent} .btn-ghost:hover{background:rgba(255,255,255,.08)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}} .hero{position:relative;isolation:isolate;overflow:hidden} .hbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:16px} .brand{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-decoration:none} .brand svg{width:28px;height:28px} .h-kick{font-size:.95rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--em)} .h-lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:54ch;margin-top:1.2rem} .h-acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem} .st::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)} .st-in{padding-block:clamp(48px,8vw,110px) clamp(56px,8vw,96px)} .st-in>p,.st-in>h1,.st-in>.h-acts{max-width:760px} .st h1{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:600;letter-spacing:-.03em;margin-top:1rem} .st-figs{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(48px,7vw,88px) 0 0;border-top:1px solid var(--line)} .st-figs div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.4rem;padding:1.4rem 1.2rem 0 0} .st-figs div+div{border-left:1px solid var(--line);padding-left:1.4rem} .st-figs dd{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1;color:var(--em);font-variant-numeric:tabular-nums;white-space:nowrap} .st-figs dd small{font-size:.4em;color:var(--muted);font-weight:500} .st-figs dt{color:var(--muted)} @media (max-width:900px){.st-figs{grid-template-columns:1fr 1fr}.st-figs div:nth-child(3){border-left:0;padding-left:0}.st-figs div:nth-child(n+3){border-top:1px solid var(--line);margin-top:1.4rem}} @media (max-width:420px){.st-figs{grid-template-columns:1fr}.st-figs div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:1.2rem}.h-acts .btn{width:100%}} EOF cat > script.js <<'EOF' // Counts the figures up once when they come into view; the real figures stay in the page for screen readers. const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); const nums = [...document.querySelectorAll('.st-n')]; const fmt = (v, dp) => v.toLocaleString('en-US', { minimumFractionDigits: dp, maximumFractionDigits: dp }); const count = () => { const t0 = performance.now(); const f = (t) => { const k = Math.min(1, (t - t0) / 1400), e = 1 - Math.pow(1 - k, 3); nums.forEach((n) => { n.textContent = fmt(Number(n.dataset.to) * e, Number(n.dataset.dp)); }); if (k < 1) requestAnimationFrame(f); }; requestAnimationFrame(f); }; if (!reduceMotion.matches && 'IntersectionObserver' in window) { const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { io.disconnect(); count(); } }, { threshold: 0.4 }); io.observe(document.querySelector('.st-figs')); } EOF node .claude/skills/dark-stats-hero/scripts/check.mjs index.html --out check 2>&1 | tail -30
  5. ./index.html
  6. ./style.css
  7. ./script.js
  8. cd . && node .claude/skills/dark-stats-hero/scripts/check.mjs index.html --out check 2>&1 | tail -30
  9. ./check/1440.png
  10. ./check/390.png
  11. python3 - <<'EOF' h=open('index.html').read() h=h.replace('<span class="st-n" data-to="11" data-dp="0">11</span> million','<span class="st-n" data-to="11" data-dp="0">11</span>M') h=h.replace('data-dp="0">4</span> <small>min</small>','data-dp="0">4</span><small> min</small>') h=h.replace('<a class="btn btn-primary" href="#risk-check">Get a free risk check</a>\n </header>','<a class="btn btn-primary" href="#risk-check"><span class="lg">Get a free risk check</span><span class="sm" aria-hidden="true">Free risk check</span><span class="sr-only sm-only">Get a free risk check</span></a>\n </header>') open('index.html','w').write(h) c=open('style.css').read() c+=".brand{white-space:nowrap}.hbar .btn{white-space:nowrap}.sm,.sm-only{display:none}\n@media (max-width:520px){.hbar .lg{display:none}.hbar .sm{display:inline}.hbar .btn{padding-inline:1rem}.brand{font-size:1rem}}\n" open('style.css','w').write(c) EOF node .claude/skills/dark-stats-hero/scripts/check.mjs index.html --out check 2>&1 | tail
  12. ./index.html
  13. ./index.html
  14. ./index.html
  15. ./style.css
  16. node .claude/skills/dark-stats-hero/scripts/check.mjs index.html --out check 2>&1 | tail
  17. ./check/390.png
  18. Done

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

Questions

Is Dark Stats Hero free?

No. Dark Stats Hero 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 Dark Stats Hero?

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

What do I get when I buy Dark Stats Hero?

A ZIP of the whole skill folder (32 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 Dark Stats Hero?

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 ./dark-stats-hero with your agent's flag.

What do I get from Dark Stats Hero?

One HTML file with its CSS inside: no build step, no framework. A dark hero with large counting figures. Checked at phone and desktop widths.

What does Dark Stats Hero need?

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

How big is Dark Stats Hero?

7 files, about 20,339 tokens in all. The SKILL.md is about 2,191 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 32 s to 1 min 32 s and $0.27 to $0.27 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 Dark Stats Hero to use it?

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