Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Sports club landing page: 1440, made in this run
Run 1Sports club landing page“Make a website for our running club. Info 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

Sports Club Landing Page

A sky-blue and navy sports club site: a big cover hero, fixtures, figures, membership tiers, gallery and sign-up.

$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 sports club website in a sky-blue matchday style into your own project: sky blue and navy with condensed capitals, a full-bleed cover hero, upcoming fixtures, club figures, membership benefits and tiers, a gallery and a newsletter sign-up. Plain HTML, CSS and JavaScript by default, 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 the result at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, missing focus styles and motion that ignores reduced-motion settings. Use when a sports club, team, league, gym or running club needs a website, or someone asks for a sky-blue, condensed, matchday look.

By RecaplyUpdated 11 Nov

Install Sports Club Landing Page

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

Read https://recaply.co/skills/sports-club-landing-page/install.md and follow it to install the sports-club-landing-page skill from sports-club-landing-page.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 Sports Club Landing Page is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A sports club website in a sky-blue matchday style
  • Checked at phone and desktop widths

Good fit

  • When a sports club, team, league, gym or running club needs a website, or someone asks for a sky-blue, condensed, matchday look

Not for

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

About this skill

You say

Make a website for our running club. Info in brief.md.

It said back

The Riverside Runners site is built and the page check passes. It checks sideways overflow, small text, alt text, names, contrast, focus, motion and script errors at 390, 768 and 1440px. I looked at the 390 and 1440 screenshots but not the 768 one, and I didn't re-view any after the last small tweak to how the last gallery image fills the row on phones.

Open index.html in a browser. The files are index.html, style.css and script.js in the work folder. Screenshots are check/390.png, check/768.png and check/1440.png.

Show more

What it did in run 1

  1. ./brief.md
  2. sports-club-landing-page
  3. cd .; ls -la; S=.claude/skills/sports-club-landing-page; ls $S/reference; wc -l $S/reference/*; cat $S/reference/index.html; cat $S/reference/script.js
  4. ls -la && ls .claude/skills/sports-club-landing-page/reference && cat .claude/skills/sports-club-landing-page/reference/index.html .claude/skills/sports-club-landing-page/reference/script.js
  5. R=.claude/skills/sports-club-landing-page/reference && cp $R/style.css $R/script.js . && python3 - <<'EOF' tick='<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12l5 5 9-10"/></svg>' def ic(p): return f'<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">{p}</svg>' logo='<svg viewBox="0 0 200 200" aria-hidden="true" focusable="false"><circle cx="100" cy="100" r="86" fill="#FFFFFF" stroke="#0A2342" stroke-width="5"/><path d="M30 120c30-10 50 20 80 0s50-10 60 0M30 90c30-10 50 20 80 0s50-10 60 0" fill="none" stroke="#0B6BB5" stroke-width="10" stroke-linecap="round"/><path d="M60 150l40-70 40 70" fill="none" stroke="#0A2342" stroke-width="8" stroke-linejoin="round"/></svg>' def scene(i,a,b,body): return f'<svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="g{i}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{a}"/><stop offset="1" stop-color="{b}"/></linearGradient></defs><rect width="400" height="300" fill="url(#g{i})"/>{body}</svg>' river='<circle cx="290" cy="80" r="30" fill="#FFFFFF"/><path d="M0 170C100 150 240 185 400 160L400 300H0Z" fill="#B9E0F8"/><path d="M0 215C120 185 260 230 400 200L400 300H0Z" fill="#3E8E4A"/><path d="M-20 300C120 230 200 250 420 175L420 300Z" fill="#0B6BB5" opacity=".75"/>' hero=scene('h','#7FC4F2','#B9E0F8',river) track=scene('t','#9AD0F5','#CDE8FA','<circle cx="320" cy="70" r="24" fill="#fff"/><rect y="170" width="400" height="130" fill="#3E8E4A"/><ellipse cx="200" cy="235" rx="260" ry="62" fill="none" stroke="#fff" stroke-width="6"/><ellipse cx="200" cy="235" rx="215" ry="46" fill="none" stroke="#fff" stroke-width="3" opacity=".7"/>') dusk=scene('d','#56B4F0','#9AD0F5','<circle cx="200" cy="200" r="70" fill="#F2C14E" opacity=".9"/><path d="M0 300V220C100 200 200 225 400 205V300Z" fill="#0A2342"/><path d="M0 300V260C130 245 250 265 400 255V300Z" fill="#14305A"/>') hills=scene('p','#7FC4F2','#CDE8FA','<circle cx="150" cy="80" r="22" fill="#fff"/><path d="M0 300V130L90 90 170 140 260 80 400 150V300Z" fill="#CDE8FA"/><path d="M0 300V190C100 160 250 215 400 180V300Z" fill="#3E8E4A"/><path d="M0 300V260C100 240 260 270 400 245V300Z" fill="#2A6B35"/>') bridge=scene('b','#9AD0F5','#CDE8FA','<path d="M0 220H400V300H0Z" fill="#0B6BB5" opacity=".8"/><path d="M20 220Q100 130 180 220M180 220Q260 130 340 220" fill="none" stroke="#0A2342" stroke-width="12"/><rect x="0" y="212" width="400" height="12" fill="#0A2342"/>') def sched(d,t,s,tm): return f'<li class="sched reveal"><p class="sched-day">{d}</p><div class="sched-main"><h3>{t}</h3><p>{s}</p></div><p class="sched-time">{tm}</p></li>' def feat(p,t,s): return f'<li class="feat reveal"><span class="feat-ic">{ic(p)}</span><h3>{t}</h3><p>{s}</p></li>' def tier(n,bl,price,per,btn,cls,items,flag=''): f=f'<p class="tier-flag">{flag}</p>' if flag else '' lis=''.join(f'<li>{tick}{x}</li>' for x in items) return f'<li class="tier reveal{cls}">{f}<h3>{n}</h3><p class="tier-blurb">{bl}</p><p class="tier-price"><span class="amount">{price}</span><span class="per">{per}</span></p>{btn}<ul class="ticks">{lis}</ul></li>' def gal(sp,s): return f'<li class="gal reveal" style="--span:{sp}">{s}</li>' def stat(l,v): return f'<div class="stat reveal"><dt>{l}</dt><dd>{v}</dd></div>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Riverside Runners: Friendly running club in Nottingham</title> <meta name="description" content="A friendly running club in Nottingham since 1987. Come to a free taster run."> <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=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav nav-bar"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Riverside Runners home">{logo}<span>Riverside Runners</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">{ic('<path d="M4 7h16M4 12h16M4 17h16"/>')}<span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#schedule">Runs</a></li><li><a href="#pricing">Membership</a></li><li><a href="#gallery">Club</a></li></ul><a class="btn btn-primary btn-sm" href="#cta">Free taster run</a></nav> </div></header> <main id="main"> <section class="hero hero-cover"><div class="hero-bg">{hero}</div><div class="wrap hero-in reveal"><p class="kicker">Nottingham · since 1987</p><h1>Run with <em>Riverside</em></h1><p class="hero-sub">A friendly running club of 180 members. Three runs a week, and your first one is on us.</p><div class="hero-ctas"><a class="btn btn-primary" href="#cta">Book a free taster run{ic('<path d="M5 12h14M13 6l6 6-6 6"/>')}</a><a class="btn btn-ghost" href="#schedule">See our runs</a></div></div></section> <section class="sec schedule" id="schedule" aria-labelledby="schedule-h"><div class="wrap"><div class="sec-head "><h2 id="schedule-h">Next <em>runs</em></h2></div><ul class="sched-list"> {sched('Every Tue','Track session','On the track','6:30pm')} {sched('Every Thu','Social 5k','Relaxed and friendly','6:30pm')} {sched('Every Sun','Long run','Steady miles together','8:00am')} {sched('14 Dec','Christmas 10k','Our festive club race','Time TBC')} </ul></div></section> <section class="sec stats"><div class="wrap"><dl class="stat-list">{stat('founded','1987')}{stat('members','180')}{stat('runs a week','3')}{stat('to try your first run','Free')}</dl></div></section> <section class="sec features features-grid" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head "><h2 id="features-h">Members <em>get</em></h2></div><ul class="feat-list"> {feat('<path d="M4 18c3-8 7-12 16-12M4 18h16"/>','Track on Tuesdays','Join the 6:30pm session at the track.')} {feat('<path d="M16 19v-1a4 4 0 0 0-8 0v1M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6M20 19v-1a3 3 0 0 0-2-2.8M17 5.2a3 3 0 0 1 0 5.6"/>','Social 5k on Thursdays','A friendly 6:30pm run with the club.')} {feat('<path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>','Long run on Sundays','Meet at 8am and cover the miles together.')} </ul></div></section> <section class="sec pricing" id="pricing" aria-labelledby="pricing-h"><div class="wrap"><div class="sec-head "><h2 id="pricing-h">Membership</h2></div><ul class="tiers"> {tier('Member','Adults.','£30','/ year','<a class="btn btn-ghost" href="#cta">Ask about joining</a>','',['Tuesday track','Thursday social 5k','Sunday long run'])} {tier('Taster','Try us before you join.','Free','/ first run','<a class="btn btn-primary" href="#cta">Book a taster</a>',' featured',['Come to any of our runs','No commitment'],'Start here')} {tier('Student','Students.','£15','/ year','<a class="btn btn-ghost" href="#cta">Ask about joining</a>','',['Tuesday track','Thursday social 5k','Sunday long run'])} </ul></div></section> <section class="sec gallery gallery-grid" id="gallery" aria-labelledby="gallery-h"><div class="wrap"><div class="sec-head "><h2 id="gallery-h">Around the <em>club</em></h2></div><ul class="gal-list"> {gal(3,scene('g1','#7FC4F2','#B9E0F8',river))}{gal(3,track)}{gal(2,dusk)}{gal(2,hills)}{gal(2,bridge)} </ul></div></section> <section class="sec cta cta-band" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Come to a free <em>taster run</em></h2><p>Leave your email and we'll tell you where to meet and what to bring.</p><form class="inline-form" data-form data-done="Thanks! We'll be in touch about your free taster run."><label class="sr-only" for="cta-email">Email address</label><input id="cta-email" type="email" name="email" required placeholder="you@example.com" autocomplete="email"><button class="btn btn-primary" type="submit">Book my taster</button><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">{logo}<span>Riverside Runners</span></a><p>A friendly running club in Nottingham.</p></div><nav class="foot-col" aria-label="Club"><h2>Club</h2><ul><li><a href="#schedule">Runs</a></li><li><a href="#pricing">Membership</a></li><li><a href="#gallery">Gallery</a></li></ul></nav><nav class="foot-col" aria-label="Join"><h2>Join</h2><ul><li><a href="#cta">Free taster run</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Riverside Runners, Nottingham.</p></div></footer> <script src="script.js" defer></script> </body> </html>''' open('index.html','w').write(html) EOF S=.claude/skills/sports-club-landing-page; node $S/scripts/check.mjs index.html --out check 2>&1 | tail -30
  6. ls && node .claude/skills/sports-club-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -30
  7. cp .claude/skills/sports-club-landing-page/reference/style.css .claude/skills/sports-club-landing-page/reference/script.js . && python3 - <<'EOF' tick='<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12l5 5 9-10"/></svg>' def ic(p): return f'<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">{p}</svg>' logo='<svg viewBox="0 0 200 200" aria-hidden="true" focusable="false"><circle cx="100" cy="100" r="86" fill="#FFFFFF" stroke="#0A2342" stroke-width="5"/><path d="M30 120c30-10 50 20 80 0s50-10 60 0M30 90c30-10 50 20 80 0s50-10 60 0" fill="none" stroke="#0B6BB5" stroke-width="10" stroke-linecap="round"/><path d="M60 150l40-70 40 70" fill="none" stroke="#0A2342" stroke-width="8" stroke-linejoin="round"/></svg>' def scene(i,a,b,body): return f'<svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="g{i}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{a}"/><stop offset="1" stop-color="{b}"/></linearGradient></defs><rect width="400" height="300" fill="url(#g{i})"/>{body}</svg>' river='<circle cx="290" cy="80" r="30" fill="#FFFFFF"/><path d="M0 170C100 150 240 185 400 160L400 300H0Z" fill="#B9E0F8"/><path d="M0 215C120 185 260 230 400 200L400 300H0Z" fill="#3E8E4A"/><path d="M-20 300C120 230 200 250 420 175L420 300Z" fill="#0B6BB5" opacity=".75"/>' hero=scene('h','#7FC4F2','#B9E0F8',river) track=scene('t','#9AD0F5','#CDE8FA','<circle cx="320" cy="70" r="24" fill="#fff"/><rect y="170" width="400" height="130" fill="#3E8E4A"/><ellipse cx="200" cy="235" rx="260" ry="62" fill="none" stroke="#fff" stroke-width="6"/><ellipse cx="200" cy="235" rx="215" ry="46" fill="none" stroke="#fff" stroke-width="3" opacity=".7"/>') dusk=scene('d','#56B4F0','#9AD0F5','<circle cx="200" cy="200" r="70" fill="#F2C14E" opacity=".9"/><path d="M0 300V220C100 200 200 225 400 205V300Z" fill="#0A2342"/><path d="M0 300V260C130 245 250 265 400 255V300Z" fill="#14305A"/>') hills=scene('p','#7FC4F2','#CDE8FA','<circle cx="150" cy="80" r="22" fill="#fff"/><path d="M0 300V130L90 90 170 140 260 80 400 150V300Z" fill="#CDE8FA"/><path d="M0 300V190C100 160 250 215 400 180V300Z" fill="#3E8E4A"/><path d="M0 300V260C100 240 260 270 400 245V300Z" fill="#2A6B35"/>') bridge=scene('b','#9AD0F5','#CDE8FA','<path d="M0 220H400V300H0Z" fill="#0B6BB5" opacity=".8"/><path d="M20 220Q100 130 180 220M180 220Q260 130 340 220" fill="none" stroke="#0A2342" stroke-width="12"/><rect x="0" y="212" width="400" height="12" fill="#0A2342"/>') def sched(d,t,s,tm): return f'<li class="sched reveal"><p class="sched-day">{d}</p><div class="sched-main"><h3>{t}</h3><p>{s}</p></div><p class="sched-time">{tm}</p></li>' def feat(p,t,s): return f'<li class="feat reveal"><span class="feat-ic">{ic(p)}</span><h3>{t}</h3><p>{s}</p></li>' def tier(n,bl,price,per,btn,cls,items,flag=''): f=f'<p class="tier-flag">{flag}</p>' if flag else '' lis=''.join(f'<li>{tick}{x}</li>' for x in items) return f'<li class="tier reveal{cls}">{f}<h3>{n}</h3><p class="tier-blurb">{bl}</p><p class="tier-price"><span class="amount">{price}</span><span class="per">{per}</span></p>{btn}<ul class="ticks">{lis}</ul></li>' def gal(sp,s): return f'<li class="gal reveal" style="--span:{sp}">{s}</li>' def stat(l,v): return f'<div class="stat reveal"><dt>{l}</dt><dd>{v}</dd></div>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Riverside Runners: Friendly running club in Nottingham</title> <meta name="description" content="A friendly running club in Nottingham since 1987. Come to a free taster run."> <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=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav nav-bar"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Riverside Runners home">{logo}<span>Riverside Runners</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">{ic('<path d="M4 7h16M4 12h16M4 17h16"/>')}<span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#schedule">Runs</a></li><li><a href="#pricing">Membership</a></li><li><a href="#gallery">Club</a></li></ul><a class="btn btn-primary btn-sm" href="#cta">Free taster run</a></nav> </div></header> <main id="main"> <section class="hero hero-cover"><div class="hero-bg">{hero}</div><div class="wrap hero-in reveal"><p class="kicker">Nottingham · since 1987</p><h1>Run with <em>Riverside</em></h1><p class="hero-sub">A friendly running club of 180 members. Three runs a week, and your first one is on us.</p><div class="hero-ctas"><a class="btn btn-primary" href="#cta">Book a free taster run{ic('<path d="M5 12h14M13 6l6 6-6 6"/>')}</a><a class="btn btn-ghost" href="#schedule">See our runs</a></div></div></section> <section class="sec schedule" id="schedule" aria-labelledby="schedule-h"><div class="wrap"><div class="sec-head "><h2 id="schedule-h">Next <em>runs</em></h2></div><ul class="sched-list"> {sched('Every Tue','Track session','On the track','6:30pm')} {sched('Every Thu','Social 5k','Relaxed and friendly','6:30pm')} {sched('Every Sun','Long run','Steady miles together','8:00am')} {sched('14 Dec','Christmas 10k','Our festive club race','Time TBC')} </ul></div></section> <section class="sec stats"><div class="wrap"><dl class="stat-list">{stat('founded','1987')}{stat('members','180')}{stat('runs a week','3')}{stat('first taster run','Free')}</dl></div></section> <section class="sec features features-grid" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head "><h2 id="features-h">Members <em>get</em></h2></div><ul class="feat-list"> {feat('<path d="M4 18c3-8 7-12 16-12M4 18h16"/>','Track on Tuesdays','Join the 6:30pm session at the track.')} {feat('<path d="M16 19v-1a4 4 0 0 0-8 0v1M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6M20 19v-1a3 3 0 0 0-2-2.8M17 5.2a3 3 0 0 1 0 5.6"/>','Social 5k on Thursdays','A friendly 6:30pm run with the club.')} {feat('<path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>','Long run on Sundays','Meet at 8am and cover the miles together.')} </ul></div></section> <section class="sec pricing" id="pricing" aria-labelledby="pricing-h"><div class="wrap"><div class="sec-head "><h2 id="pricing-h">Membership</h2></div><ul class="tiers"> {tier('Member','Adults.','£30','/ year','<a class="btn btn-ghost" href="#cta">Ask about joining</a>','',['Tuesday track','Thursday social 5k','Sunday long run'])} {tier('Taster','Try us before you join.','Free','/ first run','<a class="btn btn-primary" href="#cta">Book a taster</a>',' featured',['Come to any of our runs','No commitment'],'Start here')} {tier('Student','Students.','£15','/ year','<a class="btn btn-ghost" href="#cta">Ask about joining</a>','',['Tuesday track','Thursday social 5k','Sunday long run'])} </ul></div></section> <section class="sec gallery gallery-grid" id="gallery" aria-labelledby="gallery-h"><div class="wrap"><div class="sec-head "><h2 id="gallery-h">Around the <em>club</em></h2></div><ul class="gal-list"> {gal(3,scene('g1','#7FC4F2','#B9E0F8',river))}{gal(3,track)}{gal(2,dusk)}{gal(2,hills)}{gal(2,bridge)} </ul></div></section> <section class="sec cta cta-band" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Come to a free <em>taster run</em></h2><p>Leave your email and we'll tell you where to meet and what to bring.</p><form class="inline-form" data-form data-done="Thanks! We'll be in touch about your free taster run."><label class="sr-only" for="cta-email">Email address</label><input id="cta-email" type="email" name="email" required placeholder="you@example.com" autocomplete="email"><button class="btn btn-primary" type="submit">Book my taster</button><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">{logo}<span>Riverside Runners</span></a><p>A friendly running club in Nottingham.</p></div><nav class="foot-col" aria-label="Club"><h2>Club</h2><ul><li><a href="#schedule">Runs</a></li><li><a href="#pricing">Membership</a></li><li><a href="#gallery">Gallery</a></li></ul></nav><nav class="foot-col" aria-label="Join"><h2>Join</h2><ul><li><a href="#cta">Free taster run</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Riverside Runners, Nottingham.</p></div></footer> <script src="script.js" defer></script> </body> </html>''' open('index.html','w').write(html) EOF node .claude/skills/sports-club-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -30
  8. cp .claude/skills/sports-club-landing-page/reference/style.css .claude/skills/sports-club-landing-page/reference/script.js .
  9. cp ./.claude/skills/sports-club-landing-page/reference/style.css ./style.css
  10. cp ./.claude/skills/sports-club-landing-page/reference/script.js ./script.js
  11. ./.claude/skills/sports-club-landing-page/reference/style.css
  12. ./style.css
  13. ./script.js
  14. ./index.html
  15. node .claude/skills/sports-club-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
  16. ./style.css
  17. node .claude/skills/sports-club-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -20
  18. ./check/1440.png
  19. ./check/390.png
  20. ./style.css
  21. node .claude/skills/sports-club-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -5
  22. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 3 min 26 s · $0.63 of API use

Questions

Is Sports Club Landing Page free?

No. Sports Club Landing Page 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 Sports Club Landing Page?

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

What do I get when I buy Sports Club Landing Page?

A ZIP of the whole skill folder (40 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 Sports Club Landing Page?

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 ./sports-club-landing-page with your agent's flag.

What do I get from Sports Club Landing Page?

One HTML file with its CSS inside: no build step, no framework. A sports club website in a sky-blue matchday style. Checked at phone and desktop widths.

What does Sports Club Landing Page need?

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

How big is Sports Club Landing Page?

7 files, about 31,370 tokens in all. The SKILL.md is about 2,542 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 3 min 26 s to 3 min 26 s and $0.63 to $0.63 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 Sports Club Landing Page to use it?

Type /sports-club-landing-page first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.