How to build a vacation rental direct-booking website with Claude
Direct bookings are margin you don't pay to OTAs. The Vibe Coder skill ships the direct-booking site with a default stack — Next.js, Tailwind, GitHub and Vercel — and pulls brand, properties and copy from your Knowledge Base instead of inventing them.
Step by step
Load the Vibe Coder skill in Claude Code
Run
npx github:msg2ai/vacationrental-team-skills install. This is the one skill that benefits from someone at the keyboard, since it runs build and deploy commands.Point it at your content
Properties, photos and listing copy come from the shared Knowledge Base (03-properties/, 02-brand-and-voice/), or the merged portfolio file if one exists.
Scaffold the site
The default scaffold is
npx create-next-app@latest --typescript --tailwind --app --src-dir, with routes for home + search, /properties, /properties/[slug], /owners, /about, /markets/[market], /blog and a gated /owner-portal.Build the property pages
Each /properties/[slug] page gets a photo gallery, key facts, amenities, reviews, a calendar embed, a book-now CTA, an OG image and LodgingBusiness / Product structured data.
Wire search and booking
Connect the search box to your channel manager's search API or booking widget (Hostaway, Guesty, OwnerRez, Hostfully, Lodgify).
Deploy to Vercel
vercel link,vercel, thenvercel --prod; add the apex and www domains, environment variables for secrets, and preview deployments per pull request. The skill targets Lighthouse 95+.
The prompt to paste
What you get back
- A live Vercel preview URL with property pages, search and an owner lead form
- A GitHub repo with type-check, lint and Lighthouse CI on pull requests
Tips from the skill
- Always read from the KB first — never invent brand, photos or listing copy.
- A live preview URL beats a perfect local prototype every time.
- The owner-lead form is the highest-stakes form on the site — never let it break.