Sports Club Sitev0.1.1
Use this Skill to build a product website.
A club website skill for Claude Fable 5: 24 routes in one file for tennis, padel or any venue selling sessions, with a sky-and-court hero, live quick booking, timetable, plan finder and court map.
Picked most often by
Updated Oct 31, 2026
Preview gallery
Similar Skills
View all
What you get
- A single offline HTML file of 24 linked routes, readable with JavaScript off
- Home: a rounded hero of sky and court with the quick-booking bar beneath, figures with a statement, the courts bento, a rail of programs, the membership band, coaches, the weekly timetable, events, member quotes and questions
- A programs index with audience chips, search, sorting, a result count and an empty state; each program's page has its schedule, facts, prices, coach and questions
- A page per coach with a week of lesson slots that prefill booking, and a page per event with an entry form
- Memberships with one monthly/annual switch, a finder that suggests a plan and a table comparing plans, plus pages to join, book, get in touch and read the policies
- Facilities with a clickable court map and a details panel, an about page with the story and timeline, and a designed 404
- Open-source fonts and icons embedded, with SportsClub structured data
Good fit
- Tennis, padel and other racquet clubs
- Gyms and studios selling classes and memberships
- Swim schools, golf ranges and venues with spaces to book
Not for
- Taking live bookings or payments; booking and join forms are demos
- Court availability pulled live from a booking system
- Leagues that need live scores and draws
About this Skill
Clubs selling court time, lessons and memberships need visitors to spot a free slot and take it. Your Fable 5 agent works from what the club actually offers (coaches, courts, programs, plans, weekly schedule) and returns one offline HTML file. A rounded photo band of sky over a blue court carries a two-line headline; below it, a white quick-booking bar answers at once with the open courts and the earliest time. The home page sits in a rounded white shell framed in pale court blue: four figures under a short statement, a bento of courts with a switch for the floodlights, programs on a swiping rail, the blue band for memberships, the coaches in matching portraits, the week's timetable with places left and a waitlist for full sessions, events, member quotes and common questions. Every program, coach and event gets a dedicated page; the program list narrows by audience, searches and sorts. A coach's page lays out a week of lesson slots that flow into the booking form; memberships pair a billing switch with a plan finder and a side-by-side table; facilities has a court map you can click. Every form (booking, joining, event entry, contact) checks its fields and states that nothing was booked, sent or charged.
How it works
- Gather the club's details: coaches, courts, programs, plans and prices, the weekly timetable, events, and how to contact it
- Fill in site.json starting from the example brief; leave unknowns out
- Source the photos named in the image plan, generated or the club's own: hero, courts, coach portraits, and scenes for programs and events
- Build; the script reports the brief's problems as one list
- Run the validator (one file, one h1 per page, links that resolve, labeled controls, photos)
- At 390, 768, 1024 and 1440 px, try quick booking, filters and the timetable, the plan finder and lesson slots, the court map, and the booking, join and contact forms
- Hand over the file with whatever the club still has to confirm
Checked before delivery
- validate.mjs passes: single file, one h1 per page, every link resolves, labelled controls, structured data
- Every price, time, place, coach fact and policy matches the brief; no invented awards, ratings, certifications or safety claims
- Quick booking, program filters, timetable tabs, billing toggle, plan finder, lesson picker, site plan, booking, join, event entry and contact work at widths of 390, 768, 1024 and 1440 px
What you need before you start
- You bring
- Club name, address, opening hours, phone and email · Programs with audience, level, coach, price, schedule, start dates, what players learn and FAQs · Coaches with portraits, roles, years, rates, languages, bios and qualifications; the weekly timetable with places left · Membership plans and what they include, courts or bookable spaces, events with entry details, the season calendar, member quotes, the club story and policies
- Dependencies
- Node.js 20 or later · No packages, keys or network access needed
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
Will a booking made on the site hold a court?
No. The form checks itself and ends on a priced summary that states no court was reserved and no money taken. For a live site, connect a booking system.
What feeds the timetable and the quick-booking answer?
The club's brief: the sessions in its week and the places left in each, plus its courts and rates. The bar and the time slots read those, and the build invents no sessions, prices or qualifications.
What if the club has no photos?
Then the image plan supplies a prompt for every slot, all under one shared art direction. The club's own photos come first whenever they exist.
Will it fit a yoga studio or swim school?
Yes. Classes replace programs, teachers replace coaches, and rooms or lanes take the place of courts; the Skill spells out which sections get renamed and which stay.