travel-plan-viz: trip plan as an HTML page
travel-plan-viz
A skill that builds a trip plan into one HTML file with a map, a day-by-day schedule and reminders of booking deadlines
- 409 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent searches the web and puts the found data and image links into the page
- The validate.js script runs through Node on your machine, and the opened page loads the map from the internet
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/travel-plan-vizDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent searches the web and puts the found data and image links into the page
- The validate.js script runs through Node on your machine, and the opened page loads the map from the internet
This is third-party code. Review the repository files before installing.
What it does
travel-plan-viz turns a trip into a single HTML page that is easy to open on a phone. You name a city and the number of days, for example Hong Kong for four days and three nights, and the agent researches the web, proposes a day-by-day plan and, once you agree, builds the page. If you already have a plan, as text or an old HTML page, the skill lays it out and offers up to four optional improvements. The page has an interactive map with numbered points and a dashed route, and each point has a button that opens phone navigation. The schedule is split into morning, afternoon and evening, with a photo, a rating and a short note for each place. At the top sits a to-do list before departure: from the trip date the skill works out by when to book tickets and entries. Below come seasonal tips for the trip, three to five flight options, hotels by area and price and food by day. After generation the validate.js script checks required fields, coordinates and page blocks. The whole plan is stored in the page itself as JSON, so later you can edit it with a remark like "move this item to day four".
Who it is for. For people who plan a trip with Claude Code or Codex and want a ready itinerary on one page whose schedule reads on a phone without internet.
Good fit when
- You need to build an itinerary for a city over several days from scratch, with hotels, food and transport
- You have a draft plan in notes and want a neat page for your phone
- You want all places on one map with one-tap navigation
- The trip is a few weeks away and you need a list of what to book by which date
- You need a file that opens on a train or plane with no network and shows the schedule
Not a fit when
- You need to buy tickets or book: the skill completes no orders
- You need current prices for flights and hotels: the skill does not check them itself, and live data comes only from installed official skills
- You need a multilingual interface or a backend: the result stays a single static file
- You want to discuss trip details with a team in real time: the page is static
Example request
Make a trip plan for Tokyo for five days and four nights as a phone page: a map, a day-by-day schedule and what to book in advance.Limitations
The skill's instructions and samples are written in Chinese, and the README is bilingual, so the agent works from Chinese texts. All data on the page is gathered by AI from the internet and may be outdated, and the page carries a separate warning to check prices, opening hours and flights in official apps.
The skill does not query real-time prices and does not book. Live data comes only from official skills and services you have installed, such as Fliggy, Amap, Tencent Map and DiDi, and they answer for its accuracy. The schedule text reads without a network, while the map and photos load from the internet and quietly disappear on failure without breaking the page.
How to disable. Remove the link to the travel-plan-viz folder from the agent's skills directory, that is from ~/.claude/skills or ~/.codex/skills. The finished HTML files stay with you and keep opening.
FAQ
How do I install travel-plan-viz in Claude Code or Codex?
Download the repository and from its root link the skill folder into the agent's directory: ln -sfn "$(pwd)/travel-plan-viz" ~/.claude/skills/travel-plan-viz for Claude Code, and the same command with ~/.codex/skills/travel-plan-viz for Codex. For beginners the repository has a step-by-step INSTALL.md for Windows and Mac.
How do I ask the skill to plan a trip?
Name the city and the length, for example "make a trip plan for Hong Kong for four days and three nights". That is the from-scratch mode: the agent researches, discusses the plan with you and builds the page only after you confirm. If you already have a plan, paste it as text or attach an old page.
Does the page work offline?
The schedule and text blocks read without a network. The map and photos load from the internet, and without it the page hides them gracefully and shows no broken images.
How do I change a finished plan?
Give the HTML file back to the agent and ask for an edit, for example moving an item from day three to day four. The whole plan is stored in the page as JSON, and the agent changes the data and redraws the page, so fields are not lost.
Do I need map keys or paid services?
No. The map is built on Leaflet and free OpenStreetMap tiles, and no API key is needed. Navigation links use the official Apple Maps and geo URIs, with Amap links added for points in China and Google Maps links for places abroad.
Discussion
No questions or reviews yet.
Related
SkillsA JourniOne skill for trip planning: a day-by-day route, hotels, flights and a web journal of the trip
Search tours, hotels, flights, trains and excursions via Aviasales, Travelata, Level.Travel, Tutu.ru, Tripster and Sputnik8
Six focused skills for building self-contained HTML artifacts: wireframes, prototypes, mockups, plans and diagrams
A skill that takes a beginner from a vague app idea to a validated plan, then guides the build.
Seven Claude Code skills: turn a video, article or PDF link into text and an action plan, plus a Scrum coach, a session log and an unblock helper
Agent skills for worldwide hotel and flight search and booking through the TourMind API, with live price comparison, payment and order management
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| travel-plan-viz: trip plan as an HTML page (this entry) | no | 409 | |
| JourniOne Planning Skills | yes | 1,175 | also plans trips and keeps a web diary, while travel-plan-viz produces an offline page with a map and booking reminders |
| FlyAI | yes | 1,275 | searches flights, hotels and event tickets on the Fliggy platform, while travel-plan-viz assembles a plan page from what is found |
README in short
The README is bilingual, with Chinese and English parts that repeat each other. It has a feature table, a description of the internals (map engine, reminder engine, check script and page contract), samples of four finished trips and an FAQ section on how the skill differs from a plain chatbot request.
README badge
Original SKILL.md
--- name: travel-plan-viz description: 把旅行行程做成美观、离线可读、手机优先的单文件 HTML（交互地图+每日时间轴+出发前订票提醒）。两种用法——只给目的地和天数让它帮你规划，或丢一份现成计划让它直接出页面。触发：旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。 --- # 旅行计划可视化 把一趟旅行变成单文件 HTML 页面：交互地图、每日时间轴、出发前订票提醒。机械逻辑用自带引擎（`assets/map.js`、`assets/reminders.js`），美学交给设计步骤（`frontend-design` / `huashu-design`，或内置准则兜底）。 ## 第一步：判断模式 - 用户**只给了目的地+天数**（如"香港 4 天 3 晚"）→ 模式 A（从零规划）。 - 用户**已提供行程**（文字或旧 HTML 文件）→ 模式 B（解析已有计划）。 ## 模式 A：从零规划 1. 读 `references/research-guide.md`，联网调研目的地。 2. 在对话里用 markdown 提出详实逐日计划（早/中/晚、景点、交通、住宿）。 3. 与用户来回迭代，直到用户明确确认。 4. 进入"调研补全 + 生成"。 ## 模式 B：已有计划 1. 解析用户给的行程。**若是本 skill 生成的旧 HTML**：直接解析其中 `<script id="trip-data" type="application/json">` 的完整 `trip` JSON（数据与呈现分离，别去反解析渲染后的 DOM——必丢字段）；旧版页面没有这块时才从 DOM/文本提取。 2. **顺手提建议（Agent 增值，但别硬来）**：把用户的计划对照"完善行程"的维度（行前须知/天气应对、提前订票项、点到点交通、节奏与缓冲、当地必吃、片区住宿是否合理等）快速体检，在**对话里**给**最多 3–4 条**具体、可选的优化建议。原则： - 只挑**真实存在的缺口**；计划本就完整就直说"挺完整"，**不要硬凑、不要说教、不要替用户重排行程**。 - 一句点出问题 + 一句给方向即可，简洁；建议默认口头给，保持 HTML 成品干净（用户想把建议也放进页面再加）。 - 这是我们区别于"纯提示词转 HTML"的地方——发挥 Agent 的判断力，但点到为止。 3. 进入"调研补全 + 生成"（生成不被建议阻塞；采纳哪些由用户定）。 ## 调研补全 + 生成 1. **先判断第三方 skill 适配**（详见 `references/research-guide.md`「第三方 skill 适配」节）：若当前 Agent 可调用用户**已装**的官方旅行 skill / MCP（飞猪、高德、腾讯地图、滴滴等），**优先用它们拿对应数据**——高德地理编码拿精确坐标（**注意：高德/腾讯返回 GCJ-02 坐标，写入 `trip` 前必须用 `map.js` 的 `gcj02ToWgs84` 转成 WGS-84**，否则在 OSM 地图上偏移几百米）、路线规划增强点到点交通、天气查询、生成专属地图/导航/叫车的行动链接；飞猪拿实时航班/酒店/门票及预订链接。把用到的来源登记进 `trip.dataSources`，行动链接写入对应节点的 `actionLink`（**链接只用官方返回的，绝不手拼**）。**没有这些 skill 就全部走下面的静态调研**，成品不缺区块。数据实时性/真实性由对方官方 skill 负责，本 skill 不背书、措辞中性。 2. 按 `references/research-guide.md` 联网补全（官方 skill 未覆盖的部分）：坐标、真实图片 URL、评分、点评、营业时间/休息日、门票参考价、需提前订项及 `leadDays`；**行前须知**（天气/台风/穿搭/支付/App/购票时机）、**点到点交通**（方式/票价/耗时）、**时令限定活动**、每餐**必点菜+参考价**；航班给 3-5 个**待选班次**、酒店按**片区+价位**推荐、并准备**免责声明**与全程**贴士**。排程体现**天气/季节逻辑**（户外排凉爽时段）。**本 skill 自身不查实时票价**（实时数据只来自上面用户已装的官方 skill）。 3. 组织成 `assets/page-contract.md` 里定义的 `trip` 数据结构（含可选的 `dataSources` 与节点 `actionLink`）。 4. 用**设计步骤**生成风格化 HTML：**优先**调用专业设计 skill——`frontend-design` 或 `huashu-design`（花叔Design），任一已安装即用；**两者都没有**时，按 `references/design-guidelines.md` 的内置美学准则自己出。无论哪种方式都要严格遵守 `assets/page-contract.md` 的区块与约束： - 内联 `assets/map.js`、`assets/reminders.js` 内容到 HTML（保证单文件）。 - 完整 `trip` 对象以 `<script id="trip-data" type="application/json">` 内嵌进页面（后续迭代修改的数据源）。 - 页顶清单用 `computeReminders` + `renderChecklistHTML`。 - 展示行前须知区块；航班区展示待选班次（已预订的高亮），酒店区按片区+价位展示，附近显著展示免责声明。 - 时间轴卡片展示营业时间/门票参考价/交通/时令活动等可选字段；展示每日餐饮（必点菜+价）、当日与全程贴士、单日二选一方案（若有）。 - 地图用 `initTravelMap`，引入 Leaflet CDN 的 CSS/JS。 - 时间轴上 `needsBooking` 项插入 `reminderBadgeHTML(leadDays)`。 - **可选适配元素**：节点带 `actionLink` 时渲染「去预订/导航/叫车」按钮（缺则不渲染、不手拼）；`dataSources` 非空时中性注明数据来源。 - 每趟行程用不同配色。