trip-itinerary-pagelisted

Build a single-file HTML website that turns a multi-day trip plan into an interactive, shareable itinerary page — sticky day-by-day navigation that auto-scrolls to the active day, a live countdown to arrival/departure, a booking/prep checklist, and a quick-reference "essentials" panel (meeting points, emergency numbers, local tips). Use this skill whenever the user is planning a trip — for themselves, a visiting friend, family, or a group — and wants to organize it as something they or someone else can check on their phone throughout the trip. Trigger this even if the user just asks for "a page," "a site," or "something I can send them" for a trip that's already been discussed in the conversation — a multi-day itinerary is the signal, the word "itinerary" doesn't need to appear. Also use this to UPDATE an itinerary page already built earlier in the conversation when plans change (flight delays, weather, swapped days, cancelled bookings).
AdeDeepFishing/trip-itinerary-page · ★ 0 · Web & Frontend · score 72

Install: claude install-skill AdeDeepFishing/trip-itinerary-page

# Trip Itinerary Page Turns a day-by-day trip plan into a single HTML file: sticky tabs per day, a countdown banner, timeline-style activity cards with tags (free / needs booking / price / transit / solo-friendly / highlight), a prep checklist, and an essentials panel. No build step, no dependencies — one file, works from a phone, easy to redeploy anywhere (Vercel, Netlify, GitHub Pages, or just opened locally). Start from `assets/template.html`. Do not build this from scratch — the template already has tested JS for the two trickiest parts (the nav auto-scroll and the countdown/date logic below), and reinventing them tends to reintroduce bugs that are already fixed here. ## Workflow ### 1. Gather what you need (ask if it's not already in the conversation) - Who's traveling, who's hosting (if anyone) — first names are enough - Destination(s) and date range - **Exact arrival and departure date+time, and which timezone they're written in.** This is the single most common source of errors — see the pitfall below before you hardcode anything. - The day-by-day plan, if it's already been discussed — pull it from the conversation rather than re-asking - Any home base, private address, or meeting point that will appear on the page - Theme preference, if the user has one — otherwise don't ask, build one from the destination (see step 3) Don't block on having every detail. Draft with placeholders (`[fill in]`) for anything missing and flag them clearly in your reply, rather than