English | 简体中文

Trip Planner Skill

One sentence in, a verified, hour-by-hour, bookable trip plan out — delivered as a designed page in one of eight visual themes. An open-format Agent Skill (SKILL.md) that runs inside whichever coding agent you already use — Claude Code, Codex, Gemini CLI, Cursor, GitHub Copilot, OpenCode, Qwen Code, Deep Code, Goose, Kiro, Roo Code, or any other harness that loads Agent Skills: it checks opening hours, prices and holidays with tools instead of guessing, hands you a link for every booking, and never books or pays for you.

<p align="center"> <img src="docs/showcase/hero-grid.webp" alt="The eight themes, one cover each: illustrated, clay, noir, glass, journal, zine, splash, portal" width="900"> </p>

Showcase

Eight themes across four real trips (two themes per trip). Every trip below was planned end-to-end by a fresh agent session using this skill, then rendered from its plan.geo.json

• art.json; the three frames per row are the cover, one day module (what the share buttons export on the seven still themes) and the end of the scroll — the checklist and closing spread. Four of the eight pages ship verbatim under examples/; three of the other four render from the same example folders with one command (each example's art.json carries both of its trip's themes); portal additionally needs footage (see below).

Every page below is live: open the demo site or click a theme's Live page link.

illustrated — Japan · London → Tokyo → Hakone → Kyoto → Osaka (open-jaw) → London, 21–28 Nov 2026 · a painted picture-book on paper: the cover is the menu, each day a tinted riso plate with a ghost numeral, the whole scroll exports as one long image · examples/japan-2026 · Live page ↗

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/illustrated-cover.webp" width="280"> | <img src="docs/showcase/illustrated-day.webp" width="280"> | <img src="docs/showcase/illustrated-end.webp" width="280"> |

clay — China · New York → Beijing → Xi'an → Beijing → New York, 11–18 Nov 2026 · one continuous claymation landscape with a road threading the milestone stones · render it: python3 themes/render_clay2.py examples/china-2026/china.geo.json -o china-clay.html · Live page ↗ (Chinese-language clay example: examples/turkey-2026 · live ↗)

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/clay-cover.webp" width="280"> | <img src="docs/showcase/clay-day.webp" width="280"> | <img src="docs/showcase/clay-end.webp" width="280"> |

noir — Mexico · Berlin → Mexico City → Oaxaca → Berlin, 28 Oct – 6 Nov 2026 (Día de Muertos) · one night-negative tracking shot, monospace body, days dissolving into each other · render it: python3 themes/render_noir2.py examples/mexico-2026/mexico.geo.json -o mexico-noir.html · Live page ↗ (Chinese-language noir example: examples/nordic-2026 · live ↗)

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/noir-cover.webp" width="280"> | <img src="docs/showcase/noir-day.webp" width="280"> | <img src="docs/showcase/noir-end.webp" width="280"> |

glass — Morocco · Toronto → Marrakech → Aït Benhaddou → Merzouga → Fes → Chefchaouen → Casablanca → Toronto, 6–15 Nov 2026 · liquid-glass panes floating over a fixed world of cross-fading photographs, one pane per world · examples/morocco-2026 · Live page ↗

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/glass-cover.webp" width="280"> | <img src="docs/showcase/glass-day.webp" width="280"> | <img src="docs/showcase/glass-end.webp" width="280"> |

journal — Mexico · Berlin → Mexico City → Oaxaca → Berlin, 28 Oct – 6 Nov 2026 · a vintage travel journal on a dark desk: tape, stamps, postmarks, polaroids, and a Day of the Dead week planned around the crowd · examples/mexico-2026 · Live page ↗

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/journal-cover.webp" width="280"> | <img src="docs/showcase/journal-day.webp" width="280"> | <img src="docs/showcase/journal-end.webp" width="280"> |

zine — Japan · London → Tokyo → Hakone → Kyoto → Osaka (open-jaw) → London, 21–28 Nov 2026 · torn riso-poster collage with giant vertical two-colour glyphs, built like a photocopied fan zine · render it: python3 themes/render_zine.py examples/japan-2026/japan.geo.json -o japan-zine.html · Live page ↗ (Chinese-language zine example: examples/vietnam-2026 · live ↗)

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/zine-cover.webp" width="280"> | <img src="docs/showcase/zine-day.webp" width="280"> | <img src="docs/showcase/zine-end.webp" width="280"> |

splash — China · New York → Beijing → Xi'an → Beijing → New York, 11–18 Nov 2026 · a game splash screen stretched into a scroll: floating day-islands under a chained sky, routed Xi'an-first so the Wall and the Forbidden City both land on weekdays · examples/china-2026 · Live page ↗

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/splash-cover.webp" width="280"> | <img src="docs/showcase/splash-day.webp" width="280"> | <img src="docs/showcase/splash-end.webp" width="280"> |

portal — Morocco · Toronto → Marrakech → Aït Benhaddou → Merzouga → Fes → Chefchaouen → Casablanca → Toronto, 6–15 Nov 2026 · scrolling is flying: five 3D worlds in one unbroken take, dive → frame-chained link → dive, with the day's plan laid over the footage; let go and it holds, scroll back and it flies in reverse. The only theme that needs video (nine clips here, rendered on a local GPU; an agent with native video generation or themes/genvideo.py produces the same chain). Footage is not shipped with the example, so the page in the repo is screenshots only; the demo site serves the nine clips from a release asset, which makes the live link below the real thing — the motion capture is recorded from it · examples/morocco-2026 · Live page ↗ (16 MB of video)

<p align="center"> <img src="docs/showcase/portal-motion.webp" alt="Portal theme in motion: dive into a world, link to the next, day overlay on top (animated)" width="640"> </p>

| cover | a day | the end | |---|---|---| | <img src="docs/showcase/portal-cover.webp" width="280"> | <img src="docs/showcase/portal-day.webp" width="280"> | <img src="docs/showcase/portal-end.webp" width="280"> |

Every render command, cost and file for the seven trips is listed in examples/README.md. The plain, un-themed page — the printable extra, never the default deliverable — looks like examples/kyoto-sample.html (a Chinese-language sample; the same renderer produces the English UI from a "lang": "en" plan); themes/render_picker.py builds a style-chooser page linking every rendered edition of a trip as <prefix>-<theme>.html.

What you get

Say "Japan, 12–15 days in October, mid budget, history and food." The skill returns:

• A route across cities — 2–3 skeletons to pick from, then real flight prices for a grid of dates and a train-vs-fly call for every intercity leg.
• An hour-level plan for every day — opening hours and closure days checked with tools, dwell times and buffers from a written scheduling method, a holiday and festival collision scan, and a tappable map link on every hop.
• A designed page as the deliverable, not a wall of text — the plan is rendered through one of the eight themed renderers above (default illustrated) into one self-contained, phone-friendly file: trip-<theme>.html. The seven still themes carry offline share-image buttons (Save this day / Save appendix / One long image; whole-page export on five of the eight — noir and glass export day modules only), and portal (video) has no share buttons — screenshot it. The plain printable page is an extra you can ask for.
• plan.geo.json, the single source of truth — the themed page, the map links and an offline KML for Organic Maps / Google My Maps all come out of that one file.
• A hotel shortlist by neighbourhood (dated deep links, not invented nightly rates), a budget rollup in your home currency, a travel-insurance line calibrated to the destination, and a booking checklist sorted by deadline — with date-locked gates (ticket-release instants, decision deadlines, on-trip re-checks) also delivered as a .ics calendar file: dual alarms per gate, the full action list in the event body, and floating local times so an on-trip reminder rings wherever you are.
• Pictures, whatever your agent can do — three rungs, checked silently before the page style ever comes up: your agent's native image generation → your own OpenRouter key → the built-in stock kit. The last rung still ships a themed page, and says so in plain words (see No image generator? below).

What it will not do: book, pay, hold, or enter personal data. You click the links.

Quick start

1. Install — agents that support Agent Skills discover them by directory, so clone straight into your skills folder (Claude Code's path is shown; other agents: see Compatibility):

git clone https://github.com/skywain/trip-planner-skill.git ~/.claude/skills/trip-planner
pip3 install --user fast-flights Pillow   # optional: flight price scanner · asset pipeline

Everything else is Python 3.9+ standard library. Without fast-flights the scanner degrades to a Google Flights link; without Pillow you can still render every theme from the shipped picture library. If pip3 install --user is refused with externally-managed-environment (PEP 668: Homebrew / Debian Python 3.11+), install into a python3 -m venv instead, or add `--break-system-package