E-bike Storev0.1.1
Use this Skill to build a storefront.
Give your Fable 5 agent the line-up, get an e-bike shop in one file: 35 routes, a page per bike, range calculator, compare, test rides, demo checkout.
Picked most often by
Updated Oct 24, 2026
Preview gallery
Similar Skills
View all
What you get
- A single offline HTML file of 35 linked routes that reads with JavaScript off; every partner shop has its own deep link
- Home: studio hero carousel, service strip, category cards, a rail of the line-up, then the component explorer and range calculator, owner reviews, a finder for test-ride shops, the journal and questions
- Every bike in one catalog with counted category chips, search, sort and a no-result state; a category overview and a page per category
- A page for each bike: gallery, battery and size tiles that move both price and range, a fit helper, key figures, specs, owner reviews, a phone buy bar
- Side-by-side compare for up to three bikes, with a switch that shows only differences
- Equipment with quick add, and a page for each accessory
- Test rides: a shop finder, a drawn map, and booking by day and slot with field checks
- Bag with save for later, undo and promo code; demo checkout and an order confirmation page
- Anton, Archivo and Geist Mono embedded with the icons, and structured data of the BikeStore type
Good fit
- Independent makers of e-bikes and bicycles
- Scooter and light-vehicle brands with a short line-up
- Agencies launching sites for vehicle brands
Not for
- Real payments or live stock sync: checkout is a demo
- Marketplaces holding hundreds of products
- Live booking into partner shops' own calendars
About this Skill
Range is what e-bike buyers ask about first, so this store answers it on the home page: a calculator takes the rider's bike, battery, assist level, hills and load and gives a figure for that setup. You supply the real models, batteries, frame sizes, prices, accessories and partner shops; the agent returns one offline HTML file holding the complete shop. The first screen is an orange studio carousel, followed by a component explorer, owner reviews and a finder for shops that offer test rides. Each bike has its own page, where battery and frame-size choices move both price and range, next to a fit helper, specs and reviews. Compare can hide everything the bikes have in common. Test rides are booked on a drawn map by day and time slot; the bag holds items saved for later and accepts a promo code; checkout is labeled as a demo. No data leaves the page, and the page tells visitors so.
How it works
- Collect from the maker: each model with its batteries, sizes and prices, the accessories, the partner shops, plus how tax and delivery work in that market
- Write site.json to the schema, omitting anything nobody can confirm
- Generate or bring in the photos listed in the image plan; the hero stage crops print their panel color
- Run the build, which reports every gap in the brief in one pass
- Validate: one file, a single h1 per page, no broken links, labeled controls, photos in place
- Check range, compare, bag, booking and checkout at 390, 768, 1024 and 1440 px
- Hand over the file with a list of anything the maker still has to send
Checked before delivery
- validate.mjs passes: single file, one h1 per page, every link resolves, labelled controls, structured data
- Every price, battery, range, spec, fee and shop detail matches the brief; no invented certifications or financing
- Hero, range calculator, compare, variants, bag, promo, test-ride booking and the checkout demo work in a browser at widths of 390, 768, 1024 and 1440 px
What you need before you start
- You bring
- Brand name, wordmark, tagline, workshop address, phone and email · Market: currency, tax mode and rate, postcode format, shipping and express fees · Categories and bikes with real prices, battery options (Wh and range), frame sizes with rider heights, torque, weight, charger and specs · Accessories with options and prices · Partner shops with addresses, hours and demo fleets; test-ride slots · Owner reviews with sources, stories, FAQs, warranty, delivery and legal text
- Dependencies
- Node.js 20 or later · No keys or network calls; sharp only for the photo tool
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
Can customers really buy a bike from this file?
No. Checkout validates every field, shows a sample confirmation and states that nothing was charged. Selling for real means connecting a payment provider.
How is the range figure worked out?
The calculator's consumption model is applied to the battery sizes the maker gives you. No range or spec is invented; any missing number goes on a list of things to ask.
Who supplies the photos?
The maker, ideally. If none exist, the image plan holds a prompt for each slot, and the photo tool reworks studio shots into catalog images and the hero's stage crops.
Do test-ride bookings go through to the shops?
Not as built. Booking is a demonstration and tells the visitor so; connect it to the shops' own booking system before launch.