Trip Planner Dashboard

Overview

A Claude/Cursor AI skill that turns "plan me a trip" into one self-contained HTML dashboard with a live-routed map, animated drive playback, itinerary, hotels, budget and safety fallbacks. No server, no API key, no build.

The Challenge

Most AI trip-planning outputs are a wall of text you have to mentally reconstruct into an actual plan. This skill instead produces a single HTML file: a live-routed map with animated drive playback on one tab, and a full written plan (itinerary, hotels, budget, packing, safety fallbacks) on the other, with no server, no API key, and no build step required to view it.

The Solution

It was built after a real 6-day jeep trip through Georgia, where the first versions had wrong turns, a fake 300km detour from bad map data, and no way to "drive" the route. The working pieces from fixing those issues became this reusable skill.

Key Features

• ✓Live-routed map: a dotted planned line plus a thick live-routed line on real roads, with distance and drive time.
• ✓Detour-safe routing: falls back to the planned line if a live route looks implausible.
• ✓Drive-the-trip playback: an animated marker with speed control, pause/resume.
• ✓Day-by-day itinerary: color-coded by day, with stops, tips, and a Google Maps link per day.
• ✓Transport costs, hotels, and lodging: price ranges and booking links.
• ✓Practical lists: budget, food, packing, and a pre-trip checklist.
• ✓Safety and fallbacks: guidance for road closures or weather changes.
• ✓Responsive layout: day filters, a draggable split view, and tooltips at any screen size.