Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Night-ride e-bike shop: 1440, made in this run
Run 1Night-ride e-bike shop“Build our scooter shop website. Details 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

Night-Ride E-Bike Shop

A dark e-bike store with ember-orange glow: the bike large, range figures, model tabs, products, test-ride booking.

$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 an online store for e-bikes in a dark, ember-orange style into your own project: charcoal with ember orange and a warm glow under the bike, condensed capitals, the lead bike large with price, range and speed figures, tabs for city, trail and cargo, three models to add, questions and a test-ride form. 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 an e-bike, scooter, bicycle or other mobility brand needs a store or product site, or someone asks for a dark, glowing, sporty product shop.

By RecaplyUpdated 11 Nov

Install Night-Ride E-Bike Shop

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

Read https://recaply.co/skills/night-ride-ebike-shop/install.md and follow it to install the night-ride-ebike-shop skill from night-ride-ebike-shop.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 Night-Ride E-Bike Shop is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An online store for e-bikes in a dark, ember-orange style
  • Checked at phone and desktop widths

Good fit

  • When an e-bike, scooter, bicycle or other mobility brand needs a store or product site

Not for

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

About this skill

You say

Build our scooter shop website. Details in brief.md.

It said back

The Volt Lane site is built and the skill's check passes at phone, tablet and desktop widths. I looked at the 1440 and 390 screenshots and found nothing cut off or overlapping. I didn't open the 768 one.

The check covers sideways overflow, text under 12px, alt text and names, contrast, focus styles, reduced motion and script errors.

Show more

What it did in run 1

  1. ./brief.md
  2. night-ride-ebike-shop
  3. cd .; ls -a; S=.claude/skills/night-ride-ebike-shop; ls $S/reference; wc -c $S/reference/*; cat $S/reference/index.html
  4. ls -a && ls .claude/skills/night-ride-ebike-shop/reference && cat .claude/skills/night-ride-ebike-shop/reference/index.html
  5. cp .claude/skills/night-ride-ebike-shop/reference/{style.css,script.js} . && cat script.js && grep -n "stat-list\|hero-in\|product-list\|tabpanel\|inline-form\|tag" style.css | head -40
  6. cp .claude/skills/night-ride-ebike-shop/reference/style.css .claude/skills/night-ride-ebike-shop/reference/script.js . && cat script.js && grep -n "stat-list\|product-list\|tag\|form-status" style.css | head -30
  7. cp ./.claude/skills/night-ride-ebike-shop/reference/style.css ./style.css
  8. cp ./.claude/skills/night-ride-ebike-shop/reference/script.js ./script.js
  9. ./.claude/skills/night-ride-ebike-shop/reference/style.css
  10. ./.claude/skills/night-ride-ebike-shop/reference/script.js
  11. ./style.css
  12. ./script.js
  13. cat > /tmp/gen.mjs <<'EOF' import {writeFileSync} from 'node:fs'; const ic=(d)=><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="${d}"/></svg>; const plus=ic('M12 5v14M5 12h14'); const sc=(c,label,spring)=><svg viewBox="0 0 320 200" ${label?role="img" aria-label="${label}":'aria-hidden="true" focusable="false"'} style="--frame:${c}"><use href="#scooter"/>${spring?<path d="M236 118l10 6-14 6 14 6-14 6 10 6" fill="none" stroke="#F5EFE9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>:''}</svg>; const models=[ {n:'Volt Lite',p:'£499',r:'25 km range',c:'#FF8A55',sp:0,t:'Lite',d:'The easy start for short, flat commutes. 25 km of range covers a week of station runs on a charge or two.'}, {n:'Volt Pro',p:'£799',r:'45 km range · suspension',c:'#FF6A2B',sp:1,t:'Pro',d:'Suspension takes the sting out of Manchester’s cobbles and tram tracks, with 45 km of range for the daily commute.'}, {n:'Volt Max',p:'£1,099',r:'70 km range',c:'#FFB38A',sp:0,t:'Max',d:'Our longest range at 70 km. For the long way in, and the long way home.'}]; const faq=[ ['How fast does it fold?','Three seconds. Every Volt folds down so it fits under a desk or on a train.'], ['Which model should I pick?','Lite for short hops (25 km), Pro if your route is rough and you want suspension (45 km), Max for the longest commutes (70 km).'], ['What does the app lock do?','Lock and unlock your scooter from your phone, so it cannot be ridden away without you.'], ['Can I try one first?','Yes. Book a test ride in our Manchester showroom using the form above.'], ['What is covered by the warranty?','Every Volt comes with a 2-year warranty.']]; const brand=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M18 2L6 18h8l-2 12 14-18h-8z" fill="#FF6A2B"/></svg><span>Volt Lane</span>; const html=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Volt Lane: Electric scooters for Manchester commuters</title> <meta name="description" content="Electric scooters for commuters. Folds in 3 seconds, app lock, 2-year warranty. Buy online or book a test ride in our Manchester showroom."> <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=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><symbol id="scooter" viewBox="0 0 320 200"><g fill="none" stroke="#F5EFE9" stroke-width="9"><circle cx="64" cy="156" r="26"/><circle cx="256" cy="156" r="26"/></g><g fill="none" stroke="var(--frame)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"><path d="M64 156h192M256 156L226 34M196 34h60"/></g><rect x="86" y="132" width="132" height="14" rx="7" fill="var(--frame)"/><circle cx="64" cy="156" r="7" fill="#F5EFE9"/><circle cx="256" cy="156" r="7" fill="#F5EFE9"/></symbol></svg> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Volt Lane home">${brand}</a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">${ic('M4 7h16M4 12h16M4 17h16')}<span>Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#shop">Scooters</a></li><li><a href="#features">Models</a></li><li><a href="#faq">Questions</a></li></ul><a class="cart-link" href="#shop"><span class="sr-only">Basket, </span>${ic('M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2')}<span class="cart-count" data-cart-count>0</span><span class="sr-only"> items</span></a><a class="btn btn-primary btn-sm" href="#ride">Book a test ride</a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">Manchester · Electric scooters</p><h1>Own the <em>commute</em></h1><p class="hero-sub">The Volt Pro: 45 km of range and suspension that smooths the rough streets. Folds in 3 seconds.</p><div class="hero-ctas"><a class="btn btn-primary" href="#shop">Buy Volt Pro for £799${ic('M5 12h14M13 6l6 6-6 6')}</a><a class="btn btn-ghost" href="#ride">Book a test ride</a></div><p class="hero-note">2-year warranty. Try it first in our Manchester showroom.</p></div><div class="hero-art reveal"><div class="bike-glow">${sc('#FF6A2B','Volt Pro electric scooter',1)}</div></div></div></section> <section class="stats"><div class="wrap"><dl class="stat-list"><div class="stat reveal"><dt>top range (Volt Max)</dt><dd>70 km</dd></div><div class="stat reveal"><dt>to fold</dt><dd>3 sec</dd></div><div class="stat reveal"><dt>warranty</dt><dd>2 yrs</dd></div><div class="stat reveal"><dt>prices from</dt><dd>£499</dd></div></dl></div></section> <section class="sec" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head"><h2 id="features-h">A scooter for every <em>commute</em></h2></div><div class="tabs" data-tabs><div class="tablist" role="tablist" aria-label="Models">${models.map((m,i)=><button role="tab" type="button" id="tab-${i}" aria-controls="panel-${i}" aria-selected="${i==0}" tabindex="${i==0?0:-1}">${ic(['M13 2L4 14h7l-1 8 9-12h-7z','M2 20l7-12 4 6 3-4 6 10z','M3 12h18M14 5l7 7-7 7'][i])}${m.t}</button>).join('')}</div> ${models.map((m,i)=><div class="tabpanel" role="tabpanel" id="panel-${i}" aria-labelledby="tab-${i}"${i?' hidden':''}><div class="tab-words"><h3>${m.n} · ${m.p}</h3><p>${m.d}</p></div><div class="tab-art">${sc(m.c,'',m.sp)}</div></div>).join('\n')} </div></div></section> <section class="sec products" id="shop" aria-labelledby="shop-h"><div class="wrap"><div class="sec-head"><h2 id="shop-h">Choose your <em>Volt</em></h2></div><ul class="product-list"> ${models.map((m,i)=><li class="product reveal"><div class="product-art">${sc(m.c,m.n,m.sp)}${i==1?'<span class="tag">Most popular</span>':''}</div><div class="product-meta"><h3>${m.n}</h3><p class="product-note">${m.r}</p><p class="price">${m.p}</p></div><button class="btn btn-primary btn-sm" type="button" data-add="${m.n}">${plus}Add<span class="sr-only"> ${m.n} to basket</span></button></li>).join('\n')} </ul><p class="sr-only" role="status" aria-live="polite" data-cart-status></p></div></section> <section class="sec faq" id="faq" aria-labelledby="faq-h"><div class="wrap faq-in"><div class="sec-head"><h2 id="faq-h">Questions</h2></div><div class="faq-list">${faq.map((q,i)=><details class="reveal"${i==0?' open':''}><summary>${q[0]}${plus}</summary><p>${q[1]}</p></details>).join('')}</div></div></section> <section class="sec" id="ride" aria-labelledby="ride-h"><div class="wrap"><div class="cta-box reveal"><div class="cta-words"><h2 id="ride-h">Feel the <em>ride</em></h2><p>Book a test ride in our Manchester showroom. Tell us which model and we will get back to you to confirm a time.</p></div> <form class="ride-form" data-form data-done="Thanks. We have your request and will be in touch to confirm your test ride."><div class="field"><label for="r-name">Name</label><input id="r-name" name="name" required autocomplete="name"></div><div class="field"><label for="r-email">Email</label><input id="r-email" type="email" name="email" required autocomplete="email"></div><div class="field"><label for="r-model">Model</label><select id="r-model" name="model">${models.map(m=><option>${m.n}</option>).join('')}</select></div><div class="field"><label for="r-date">Preferred date</label><input id="r-date" type="date" name="date"></div><button class="btn btn-primary" type="submit">Book my test ride</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">${brand}</a><p>Electric scooters for Manchester commuters.</p></div> <nav class="foot-col" aria-label="Shop"><h2>Shop</h2><ul><li><a href="#shop">Volt Lite</a></li><li><a href="#shop">Volt Pro</a></li><li><a href="#shop">Volt Max</a></li></ul></nav> <nav class="foot-col" aria-label="Help"><h2>Help</h2><ul><li><a href="#faq">Questions</a></li><li><a href="#ride">Test rides</a></li><li><a href="#">Warranty</a></li></ul></nav> <nav class="foot-col" aria-label="Visit"><h2>Visit</h2><ul><li><a href="#">Showroom address (to add)</a></li><li><a href="#">Contact (to add)</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Volt Lane. Manchester.</p></div></footer> <script src="script.js" defer></script> </body> </html>; writeFileSync('index.html',html); EOF node /tmp/gen.mjs && node .claude/skills/night-ride-ebike-shop/scripts/check.mjs index.html --out check 2>&1 | tail -30
  14. echo test
  15. /tmp/vl/gen.mjs
  16. node /tmp/vl/gen.mjs index.html && node .claude/skills/night-ride-ebike-shop/scripts/check.mjs index.html --out check 2>&1 | tail -30
  17. ./check/1440.png
  18. ./check/390.png
  19. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 18 s · $0.48 of API use

Questions

Is Night-Ride E-Bike Shop free?

No. Night-Ride E-Bike Shop 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 Night-Ride E-Bike Shop?

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

What do I get when I buy Night-Ride E-Bike Shop?

A ZIP of the whole skill folder (39 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 Night-Ride E-Bike Shop?

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 ./night-ride-ebike-shop with your agent's flag.

What do I get from Night-Ride E-Bike Shop?

One HTML file with its CSS inside: no build step, no framework. An online store for e-bikes in a dark, ember-orange style. Checked at phone and desktop widths.

What does Night-Ride E-Bike Shop need?

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

How big is Night-Ride E-Bike Shop?

7 files, about 29,261 tokens in all. The SKILL.md is about 2,622 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 18 s to 2 min 18 s and $0.48 to $0.48 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 Night-Ride E-Bike Shop to use it?

Type /night-ride-ebike-shop first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.