happy-trip-site

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:

1. The Trip Brief, UI Brief (with each option's aesthetic block), and Media Brief are prepared.
2. The agent copies the static runtime and writes direct image URLs into travel-data.js with the Write tool.
3. The agent validates the folder with Bash file-existence + grep checks (required files, script order, data contract, viewport meta, link buttons, Google Maps entry).
4. 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.