mcpbeat Sign in

Travel Plan Viz Agent Skill

把旅行行程做成美观、离线可读、手机优先的单文件 HTML(交互地图+每日时间轴+出发前订票提醒)。两种用法——只给目的地和天数让它帮你规划,或丢一份现成计划让它直接出页面。触发:旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。

12k tokens
context cost
the whole folder, loaded on every use
8
files
ships runnable scripts
0
copies elsewhere
how many repositories repackaged it
308
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/zexuanw958-svg/travel-plan-viz --skill travel-plan-viz

The instruction itself

2 sections, as written by the author

旅行计划可视化

把一趟旅行变成单文件 HTML 页面:交互地图、每日时间轴、出发前订票提醒。机械逻辑用自带引擎(assets/map.jsassets/reminders.js),美学交给设计步骤(frontend-design / huashu-design,或内置准则兜底)。

第一步:判断模式

  • 用户只给了目的地+天数(如"香港 4 天 3 晚")→ 模式 A(从零规划)。
  • 用户已提供行程(文字或旧 HTML 文件)→ 模式 B(解析已有计划)。

模式 A:从零规划

  • references/research-guide.md,联网调研目的地。
  • 在对话里用 markdown 提出详实逐日计划(早/中/晚、景点、交通、住宿)。
  • 与用户来回迭代,直到用户明确确认。
  • 进入"调研补全 + 生成"。

模式 B:已有计划

  • 解析用户给的行程。若是本 skill 生成的旧 HTML:直接解析其中 <script id="trip-data" type="application/json"> 的完整 trip JSON(数据与呈现分离,别去反解析渲染后的 DOM——必丢字段);旧版页面没有这块时才从 DOM/文本提取。
  • 顺手提建议(Agent 增值,但别硬来):把用户的计划对照"完善行程"的维度(行前须知/天气应对、提前订票项、点到点交通、节奏与缓冲、当地必吃、片区住宿是否合理等)快速体检,在对话里最多 3–4 条具体、可选的优化建议。原则:
  • 只挑真实存在的缺口;计划本就完整就直说"挺完整",不要硬凑、不要说教、不要替用户重排行程
  • 一句点出问题 + 一句给方向即可,简洁;建议默认口头给,保持 HTML 成品干净(用户想把建议也放进页面再加)。
  • 这是我们区别于"纯提示词转 HTML"的地方——发挥 Agent 的判断力,但点到为止。
  • 进入"调研补全 + 生成"(生成不被建议阻塞;采纳哪些由用户定)。

调研补全 + 生成

  • 先判断第三方 skill 适配(详见 references/research-guide.md「第三方 skill 适配」节):若当前 Agent 可调用用户已装的官方旅行 skill / MCP(飞猪、高德、腾讯地图、滴滴等),优先用它们拿对应数据——高德地理编码拿精确坐标(注意:高德/腾讯返回 GCJ-02 坐标,写入 trip 前必须用 map.jsgcj02ToWgs84 转成 WGS-84,否则在 OSM 地图上偏移几百米)、路线规划增强点到点交通、天气查询、生成专属地图/导航/叫车的行动链接;飞猪拿实时航班/酒店/门票及预订链接。把用到的来源登记进 trip.dataSources,行动链接写入对应节点的 actionLink链接只用官方返回的,绝不手拼)。没有这些 skill 就全部走下面的静态调研,成品不缺区块。数据实时性/真实性由对方官方 skill 负责,本 skill 不背书、措辞中性。
  • references/research-guide.md 联网补全(官方 skill 未覆盖的部分):坐标、真实图片 URL、评分、点评、营业时间/休息日、门票参考价、需提前订项及 leadDays行前须知(天气/台风/穿搭/支付/App/购票时机)、点到点交通(方式/票价/耗时)、时令限定活动、每餐必点菜+参考价;航班给 3-5 个待选班次、酒店按片区+价位推荐、并准备免责声明与全程贴士。排程体现天气/季节逻辑(户外排凉爽时段)。本 skill 自身不查实时票价(实时数据只来自上面用户已装的官方 skill)。
  • 组织成 assets/page-contract.md 里定义的 trip 数据结构(含可选的 dataSources 与节点 actionLink)。
  • 设计步骤生成风格化 HTML:优先调用专业设计 skill——frontend-designhuashu-design(花叔Design),任一已安装即用;两者都没有时,按 references/design-guidelines.md 的内置美学准则自己出。无论哪种方式都要严格遵守 assets/page-contract.md 的区块与约束:
  • 内联 assets/map.jsassets/reminders.js 内容到 HTML(保证单文件)。
  • 完整 trip 对象以 <script id="trip-data" type="application/json"> 内嵌进页面(后续迭代修改的数据源)。
  • 页顶清单用 computeReminders + renderChecklistHTML
  • 展示行前须知区块;航班区展示待选班次(已预订的高亮),酒店区按片区+价位展示,附近显著展示免责声明。
  • 时间轴卡片展示营业时间/门票参考价/交通/时令活动等可选字段;展示每日餐饮(必点菜+价)、当日与全程贴士、单日二选一方案(若有)。
  • 地图用 initTravelMap,引入 Leaflet CDN 的 CSS/JS。
  • 时间轴上 needsBooking 项插入 reminderBadgeHTML(leadDays)
  • 可选适配元素:节点带 actionLink 时渲染「去预订/导航/叫车」按钮(缺则不渲染、不手拼);dataSources 非空时中性注明数据来源。
  • 每趟行程用不同配色。
  • 保存为 <行程名>-旅行计划.html 到工作目录。
  • 机械校验(必做):跑 node <skill目录>/assets/validate.js <生成的.html>——校验 trip 必填字段、坐标越界/离群、必需区块标记、trip-data 内嵌。有 ERROR 必须修复后重跑至通过;WARNING 逐条人工判断。
  • 告诉用户:之后可把该 HTML 文件丢回来,说"把第三天的 X 挪到第四天",会在原结构上修改(直接改内嵌的 trip-data JSON 再重渲染)。

不做

本 skill 自身不做:实时票价/机票价格查询、代订票、多语言 UI、后端。全程静态单文件。

> 注意边界:用户若另装了官方旅行 skill(飞猪/高德/腾讯地图/滴滴等),实时数据与「预订/导航/叫车」链接由其提供、责任在其——本 skill 只适配呈现,并不改变上面「自身不做」的范围(仍不自查实时价、不代订)。

Other skills for the same job

different authors, same section of the catalogue
XLSX
by anthropics
vendor ×15

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

5k tokens scripts
XLSX
by w95
×7

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

3k tokens
Raffle Winner Picker
by frostant
×5

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

949 tokens
Fda Database
by christophacham
×4

Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.

32k tokens scripts
Matlab
by christophacham
×4

MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.

25k tokens
Umap Learn
by ComeOnOliver
×4

UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.

14k tokens
D3 Viz
by chrisvoncsefalvay
×3

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

20k tokens
Alphafold Database
by christophacham
×3

Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.

7k tokens

How to use it

Copy the folder

Take zexuanw958-svg/travel-plan-viz from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.