Happy Trip Site
This repository contains the happy-trip-site skill: a reusable agent workflow for turning rough travel notes into a mobile-first static itinerary website. Generate a phone-readable trip site, publish a shareable URL when the environment supports it, and keep a static backup package.
The generated site is meant to be opened on a phone during the trip. The important behavior is one URL for the whole guide: daily route overview, Google Maps route opening, tappable stop pins, and visible link buttons for maps, official pages, bookings, restaurants, videos, Instagram, Xiaohongshu, or other references.
What Is Included
- Installable skill:
skill/happy-trip-site
- Static Travel Runtime generalized for confirmed UI Briefs and automatic network images
- Runtime architecture, Trip Brief schema, extraction rules, and deployment notes under
skill/happy-trip-site/references
- Destination-aware design references (
design-principles.md, design-reference.css) and pure-JS helper unit tests under tests/
Architecture
The skill is built around a stable, destination-neutral Travel Runtime. Agents should vary only the generated data, UI Brief, media assets, and copy for each trip.
Runtime files:
index.html loads the app shell and scripts.
assets/css/travel.css owns the mobile-first layout, UI tokens, drawer/map layering, timeline cards, link pills, cultural-layer hooks, and Leaflet map styling.
assets/js/travel-helpers.js owns pure, unit-tested helpers (link priority sort, today-match, buildAesthetic) with a dual browser/CommonJS export.
assets/js/travel-ui-components.js owns shared UI helpers, icons, link rendering, image rendering, and Google Maps URL helpers.
assets/js/travel-map.js owns lazy Leaflet loading, marker maps, fullscreen mode, map resizing, and map fallbacks.
assets/js/travel.js owns app state, sidebar navigation, shared resources, day rendering, checklist persistence, route overview, timeline composition, and applyAesthetic.
- Generated
assets/js/travel-data.js assigns window.HAPPY_TRIP_DATA.
Generation flow:
- The Trip Brief, UI Brief (with each option's
aesthetic block), and Media Brief are prepared.
- The agent copies the static runtime and writes direct image URLs into
travel-data.js with the Write tool.
- The agent validates the folder with Bash file-existence + grep checks (required files, script order, data contract, viewport meta, link buttons, Google Maps entry).
- The agent publishes via
npx vercel and zips a backup, reporting ready_to_share, package_ready, or blocked.
The detailed maintenance reference is skill/happy-trip-site/references/architecture.md.
Install the Skill
The whole skill is the single folder skill/happy-trip-site (its entrypoint is
skill/happy-trip-site/SKILL.md). To install it, copy that folder into the agent's
skills directory so the folder name becomes the skill name — i.e. the copied path
must end in .../skills/happy-trip-site, with SKILL.md directly inside it.
| Agent | Install path (copy the folder to here) | Discovery |
|---|
| Claude Code | ~/.claude/skills/happy-trip-site | Auto-discovered on next session; invoke with /happy-trip-site |
| Codex | ~/.codex/skills/happy-trip-site | Auto-discovered from ~/.codex/skills |
| Other agents (Lobster/龙虾, etc.) | any path you control | Point the agent at SKILL.md; it loads referenced files on demand |
Copy it manually:
# Claude Code
cp -R skill/happy-trip-site ~/.claude/skills/happy-trip-site
# Codex
cp -R skill/happy-trip-site ~/.codex/skills/happy-trip-site
Verify the install landed at the right path (you should see SKILL.md one level in):
ls ~/.claude/skills/happy-trip-site/SKILL.md # or ~/.codex/skills/...
Common mistake: copying the repo root or nesting an extra folder
(~/.claude/skills/happy-trip-site/happy-trip-site/SKILL.md). The agent only finds
the skill when SKILL.md sits directly inside .../skills/happy-trip-site/.
Install from tooling
After this repository is public and indexed, OpenAgentSkill-compatible tooling can
install it by name:
npx skills add OWENLEEzy/happy-trip-site
Install directly in Codex from the GitHub skill directory:
$skill-installer install https://github.com/OWENLEEzy/happy-trip-site/tree/main/skill/happy-trip-site
Minimal prompt:
Create a mobile travel site from this itinerary. Ask follow-up questions until the trip brief is complete, confirm the page style, generate and validate the static site, run the mobile usability gate, publish a shareable URL when available, and keep a backup package.