[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77G8104ATYYGECYNK2SJS3S":3,"skill-same:01M77G8104ATYYGECYNK2SJS3S":60},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":40,"repositoryHtmlUrl":41,"repositoryHomepageUrl":42,"ownerHtmlUrl":43,"ownerBlogUrl":6,"ownerDescription":44,"updatedAt":45,"install":46,"resources":59},"01M77G8104ATYYGECYNK2SJS3S","flyai-travelmapify",null,"Create interactive travel route maps from location names with real FlyAI hotel search. Supports AI Vision analysis of travel planning images.","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Ff\u002Fflyai-travelmapify\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: flyai-travelmapify\nversion: 2.2.2\ndescription: Create interactive travel route maps from location names with real FlyAI hotel search. Supports AI Vision analysis of travel planning images.\nauthor: rudy2steiner\nlicense: MIT\ntags: [travel, maps, routing, geocoding, flyai, hotels, unique-id, server-management, interactive, ai-vision]\n---\n\n# Travel Mapify\n\nCreate interactive, professional travel route maps from location names.\n\n## Overview\n\nThis skill automatically:\n1. **Processes text input**: Parses comma-separated location names directly\n2. **Geocodes locations** to get precise coordinates using Amap API\n3. **Generates interactive maps** with route optimization and POI management\n4. **Supports AI Vision workflow**: When given travel planning images, use agent's AI Vision to extract POI names, then process as text input\n4. **Geocodes locations** to get precise coordinates using Amap API\n5. **Generates interactive maps** with route optimization and POI management\n6. **Integrates real hotel search** using FlyAI for actual hotel recommendations\n7. **Creates professional outputs** ready for sharing and presentation\n\n## When to Use\n\n**Text Input Mode:**\n- User provides comma-separated location names directly (e.g., \"上海外滩,上海迪士尼乐园,豫园\")\n- User wants to quickly create a travel map from a simple list of destinations\n- User has location names but no visual reference image\n\n**AI Vision Image Processing Workflow:**\n- User has a travel planning image (screenshot, photo, or digital plan)\n- Agent uses AI Vision to analyze the image and extract POI names with sequence\u002Forder\n- Extracted POI names are passed as text input to the skill\n- This hybrid approach combines AI automation with the skill's robust text processing\n\n**Hotel Integration Mode:**\n- User wants real hotel recommendations near their destination\n- User needs actual pricing and availability data\n- User wants booking links for hotels through FlyAI integration\n\n## Workflow\n\n### Step 1: Input Processing and POI Extraction\n\n**For Direct Text Input:**\n- Parse comma-separated location names directly\n- Create POI entries with high confidence (user-provided)\n- **Automatic city detection**: Smart city detection from location names (e.g., \"北京军事博物馆\" → city=\"北京\")\n- **Fallback to default**: Uses Shanghai as default when no city can be detected\n\n**For Image Input (AI Vision Workflow):**\n- **Use agent's AI Vision capability** to analyze travel planning images\n- **Extract POI names and sequence** from numbered markers or route indicators\n- **Preserve exact order** as marked in the original image\n- **Pass extracted names as text input** to the skill's standard processing pipeline\n- **Leverage existing text processing** for geocoding, validation, and map generation\n\n### Step 2: Geocoding and Coordinate Resolution\n- Use Amap geocoding API to resolve location names to precise coordinates\n- Handle ambiguous locations with user confirmation\n- Validate coordinate accuracy\n\n### Step 3: Enhanced Map Generation\n- **Use optimized travel_mapify with unique map ID isolation** as main template with all UX improvements\n- **Automatic localStorage isolation** based on POI names to prevent data conflicts between different maps\n- **Optimized performance** with streamlined template generation and reduced dependencies\n- Create a single dual-mode interface with toggle between Edit\u002FView modes\n- Implement drag-and-drop and arrow button reordering (edit mode only)\n- Generate optimized route with directional arrows\n- Add \"Generate Final\" functionality to download clean version\n- **Integrate real FlyAI hotel search** with professional loading states\n- **Replace alert popups** with notification system\n\n### Step 4: Automatic Server Management\n- **Automatically start HTTP server** on port 9000 (or specified port)\n- **Automatically start hotel search server** on port 8770 (or specified port)\n- **Check if servers are already running** to avoid conflicts\n- **Provide direct access URLs** in output\n- **Ensure all functionality is ready** when map creation completes\n\n### Step 4: Professional Output Delivery\n- Provide unified HTML file that works in both editing and presentation contexts\n- Include clear instructions for toggling modes and generating final version\n- Ensure mobile-responsive design\n\n## File Structure\n\n```\nflyai-travelmapify\u002F\n├── SKILL.md\n├── INSTALL.md                          # Installation and setup guide\n├── flyai-travelmapify.py              # **PORTABLE ENTRY POINT**: Main executable script\n├── scripts\u002F\n│   ├── config.py                      # **DYNAMIC CONFIGURATION**: Path and environment detection\n│   ├── main_travel_mapify_enhanced.py # **PRODUCTION MAIN**: Auto-starts servers + text input + unique ID isolation\n│   ├── geocode_locations.py           # Amap geocoding integration\n│   ├── generate_from_optimized_template.py # Optimized template with unique map ID isolation\n│   └── hotel-search-server.py         # FlyAI hotel search backend server\n\n**Note**: Image processing is handled externally using the agent's AI Vision capability. The extracted POI names are passed as text input to this skill.\n├── references\u002F\n│   ├── amap_api_guide.md              # Amap API usage patterns\n│   ├── poi_validation_rules.md        # POI validation and filtering rules\n│   └── troubleshooting-guide.md       # Common issues and solutions\n└── assets\u002F\n    └── templates\u002F\n        └── main-generic-template-with-unique-id.html # **PRODUCTION TEMPLATE**: Unique ID isolation + all features\n```\n\n**Main Template**: The skill now uses the **optimized travel_mapify system** with unique map ID isolation as the primary approach, which includes:\n- **Optimized Template Generation**: Streamlined HTML generation with minimal dependencies\n- **Unique Map ID Generation**: Automatically creates a hash-based ID from POI names (e.g., `travelMap_abc123`) to isolate localStorage data\n- **No Cross-Map Data Contamination**: Each travel map saves\u002Fretrieves data independently using its unique ID\n- **Persistent Per-Map State**: Hotel searches, date selections, and POI reordering are saved separately for each map\n- **Enhanced Performance**: Reduced template complexity and faster map loading\n- Real FlyAI hotel search integration\n- Professional notification system (no alert popups)\n- Loading states with timeout handling\n- Enhanced UX with smart defaults\n\n**Automatic Server Management**: The enhanced main script automatically starts both HTTP server (port 9000) and hotel search server (port 8770) when generating maps, ensuring all functionality is ready immediately.\n\n## Usage Examples\n\n### Portable Execution\n```bash\n# From skill directory (recommended)\npython3 flyai-travelmapify.py --locations \"上海外滩,迪士尼乐园,豫园\" --output-html shanghai-trip.html\n\n# From any directory\npython3 \u002Fpath\u002Fto\u002Fflyai-travelmapify\u002Fflyai-travelmapify.py --locations \"北京故宫,天坛,颐和园\" --output-html beijing-trip.html\n\n# AI Vision Image Processing Workflow:\n# 1. Use agent's AI Vision to analyze travel image and extract POI names\n# 2. Pass extracted names as text input to the skill\n# Example: locations=\"解放碑,山城步道,十八梯,白象居,湖广会馆,来福士,洪崖洞,千厮门大桥\"\n\n# With custom ports\npython3 flyai-travelmapify.py --locations \"Tokyo Tower,Shibuya Crossing\" --output-html tokyo-trip.html --http-port 8080 --hotel-port 9000\n```\n\n### Image Input - AI Vision Enhanced\nUser: \"Here's my travel plan screenshot, can you make it interactive?\"\n→ Skill analyzes image using AI Vision model\n→ If needed, requests clarification: \"What city is this for?\" or \"How many attractions are marked?\"\n→ Extracts attractions with preserved sequence and generates interactive map\n\n### Image Input - Manual Clarification\nUser provides image → Skill detects uncertainty → Requests city context → User responds \"重庆\" → Skill processes with enhanced accuracy\n\n### Image Input - Direct POI Entry\nWhen AI Vision cannot confidently identify attractions, skill prompts: \"Please provide attraction names in order, separated by commas\"\n\n### Image Input - Advanced Usage  \nUser: \"I have a photo of our Beijing itinerary, please create a shareable map\"\n→ Skill processes image, validates locations, creates optimized route with professional styling\n\n### Text Input - Direct Locations with Auto City Detection\nUser: \"北京军事博物馆,北京科技大学\"\n→ Skill auto-detects city=\"北京\" from location names\n→ Parses locations directly, geocodes them, and generates interactive map\n\n### Text Input - Default City Fallback\nUser: \"外滩,迪士尼乐园,豫园\"\n→ Skill cannot detect city from generic names\n→ Uses default city=\"上海\" for geocoding\n→ Generates interactive map\n\n### Text Input - Simple List\nUser: \"Create a travel map for: Tokyo Tower, Shibuya Crossing, Meiji Shrine\"\n→ Skill extracts location names, geocodes them, creates optimized route\n\n### Hotel Search Integration\nUser: Clicks \"搜酒店\" button in generated map\n→ Real FlyAI hotel search returns actual hotel data with prices and booking links\n→ No mock data - uses real-time Fliggy MCP integration\n→ Professional UX with loading states and notifications (no alert popups)\n→ Default dates: today for check-in, tomorrow for check-out (1-night stay)\n\n### Customization Request\nUser: \"Can you adjust the route order and add missing locations?\"\n→ Skill provides editable interface with search functionality and reordering tools\n\n## Technical Requirements\n\n- **Python 3.7+**: Required for all scripts (uses standard library only)\n- **FlyAI CLI**: Must be installed globally (`npm install -g @openclaw\u002Fflyai`) \n- **Amap API**: Uses built-in default API key (no user key required)\n- **Local Proxy**: Built-in proxy server handles Amap API requests (default port 8769)\n- **Web Browser**: Modern browser with JavaScript support for interactive features\n\n## Required Skills\n\nThis skill depends on the following OpenClaw skills:\n\n- **[amap-maps](https:\u002F\u002Fgithub.com\u002Fopenclaw\u002Fopenclaw\u002Ftree\u002Fmain\u002Fskills\u002Famap-maps)**: Provides Amap LBS services for geocoding, POI search, and location services\n\nBoth skills must be installed in your OpenClaw workspace under the `skills\u002F` directory:\n```\n~\u002F.openclaw\u002Fworkspace\u002F\n├── skills\u002F\n│   ├── flyai-travelmapify\u002F\n│   └── amap-maps\u002F\n```\n\n## Portable Design\n\n✅ **No hardcoded paths** - Automatically detects OpenClaw workspace and FlyAI installation\n✅ **Cross-platform** - Works on Windows, macOS, and Linux\n✅ **Self-contained** - All scripts and templates included in skill directory\n✅ **Environment-aware** - Adapts to different system configurations\n✅ **Fallback mechanisms** - Multiple detection methods for required components\n\n## Output Files\n\nThe skill generates HTML files using the **optimized travel_mapify system with unique map ID isolation** as the main template:\n\n**`[location]-travel-map-optimized.html`** - Dual-mode interface with all professional enhancements:\n- **Real FlyAI Hotel Search Integration**:\n  - Actual hotel data with prices and booking links\n  - Loading states with \"搜索中...\" button text\n  - 5-second timeout with auto-re-enable\n  - No mock data - uses real Fliggy MCP integration\n- **Professional UX Improvements**:\n  - Notification system instead of alert popups\n  - Auto-hiding messages after 3 seconds\n  - Smart date defaults (today check-in, tomorrow check-out)\n- **Edit Mode (📝)**: Full-featured editing interface with:\n  - Left-panel POI management\n  - Search functionality for adding new locations\n  - Drag-and-drop and arrow button reordering\n  - Real-time map preview\n- **View Mode (👁️)**: Clean presentation version with:\n  - Optimized route display\n  - Numbered POI markers with directional arrows\n  - Professional styling ready for sharing\n- **Generate Final**: Download button to create a clean version without edit controls\n\nFiles are self-contained and work in any modern web browser when served via HTTP server.\n\n## Error Handling\n\n- **Poor Image Quality**: Request higher quality image or manual POI entry\n- **Ambiguous Locations**: Present options for user selection\n- **API Rate Limits**: Implement retry logic with exponential backoff\n- **Missing Coordinates**: Fall back to approximate coordinates with user verification\n- **HTML Display Issues**: Use local HTTP server instead of file:\u002F\u002F protocol\n- **Map Loading Failures**: Check AMap API key restrictions and network connectivity\n- **localStorage Corruption**: Implement fallback data and validation logic\n\n## Enhanced UX Features\n\n**Professional User Interface:**\n- **No alert popups**: All messages displayed in non-intrusive notification area\n- **Loading states**: Hotel search button shows \"搜索中...\" during API calls\n- **Timeout handling**: 5-second timeout automatically re-enables search button\n- **Auto-hiding notifications**: Messages disappear after 3 seconds\n- **Visual feedback**: Error messages in red, success messages in green\n\n**Smart Defaults:**\n- **Date selection**: Today for check-in, tomorrow for check-out (1-night stay)\n- **Hotel sorting**: Results sorted by distance from destination\n- **Top results**: Shows top 5 closest hotels for better user experience\n\n## Best Practices\n\n- Always verify extracted POIs with the user before finalizing\n- Provide clear instructions for customizing the generated maps\n- Optimize for mobile viewing with responsive design\n- Include north indicator and scale reference for professional appearance\n- **Always test via HTTP server**: Never rely on file:\u002F\u002F protocol for web applications\n- **Implement robust error handling**: Wrap API calls and provide user feedback\n- **Validate all inputs**: Sanitize data before processing\n- **Document dependencies**: Clearly specify API keys, network, and browser requirements\n- **Use optimized travel_mapify with unique map ID isolation**: All travel maps now automatically generate unique IDs based on POI names to prevent localStorage conflicts between different maps\n- **Leverage enhanced performance**: The optimized system provides faster map generation and loading\n","# Travel Mapify\n\nCreate interactive, professional travel route maps from location names.\n\n## Overview\n\nThis skill automatically:\n1. **Processes text input**: Parses comma-separated location names directly\n2. **Geocodes locations** to get precise coordinates using Amap API\n3. **Generates interactive maps** with route optimization and POI management\n4. **Supports AI Vision workflow**: When given travel planning images, use agent's AI Vision to extract POI names, then process as text input\n4. **Geocodes locations** to get precise coordinates using Amap API\n5. **Generates interactive maps** with route optimization and POI management\n6. **Integrates real hotel search** using FlyAI for actual hotel recommendations\n7. **Creates professional outputs** ready for sharing and presentation\n\n## When to Use\n\n**Text Input Mode:**\n- User provides comma-separated location names directly (e.g., \"上海外滩,上海迪士尼乐园,豫园\")\n- User wants to quickly create a travel map from a simple list of destinations\n- User has location names but no visual reference image\n\n**AI Vision Image Processing Workflow:**\n- User has a travel planning image (screenshot, photo, or digital plan)\n- Agent uses AI Vision to analyze the image and extract POI names with sequence\u002Forder\n- Extracted POI names are passed as text input to the skill\n- This hybrid approach combines AI automation with the skill's robust text processing\n\n**Hotel Integration Mode:**\n- User wants real hotel recommendations near their destination\n- User needs actual pricing and availability data\n- User wants booking links for hotels through FlyAI integration\n\n## Workflow\n\n### Step 1: Input Processing and POI Extraction\n\n**For Direct Text Input:**\n- Parse comma-separated location names directly\n- Create POI entries with high confidence (user-provided)\n- **Automatic city detection**: Smart city detection from location names (e.g., \"北京军事博物馆\" → city=\"北京\")\n- **Fallback to default**: Uses Shanghai as default when no city can be detected\n\n**For Image Input (AI Vision Workflow):**\n- **Use agent's AI Vision capability** to analyze travel planning images\n- **Extract POI names and sequence** from numbered markers or route indicators\n- **Preserve exact order** as marked in the original image\n- **Pass extracted names as text input** to the skill's standard processing pipeline\n- **Leverage existing text processing** for geocoding, validation, and map generation\n\n### Step 2: Geocoding and Coordinate Resolution\n- Use Amap geocoding API to resolve location names to precise coordinates\n- Handle ambiguous locations with user confirmation\n- Validate coordinate accuracy\n\n### Step 3: Enhanced Map Generation\n- **Use optimized travel_mapify with unique map ID isolation** as main template with all UX improvements\n- **Automatic localStorage isolation** based on POI names to prevent data conflicts between different maps\n- **Optimized performance** with streamlined template generation and reduced dependencies\n- Create a single dual-mode interface with toggle between Edit\u002FView modes\n- Implement drag-and-drop and arrow button reordering (edit mode only)\n- Generate optimized route with directional arrows\n- Add \"Generate Final\" functionality to download clean version\n- **Integrate real FlyAI hotel search** with professional loading states\n- **Replace alert popups** with notification system\n\n### Step 4: Automatic Server Management\n- **Automatically start HTTP server** on port 9000 (or specified port)\n- **Automatically start hotel search server** on port 8770 (or specified port)\n- **Check if servers are already running** to avoid conflicts\n- **Provide direct access URLs** in output\n- **Ensure all functionality is ready** when map creation completes\n\n### Step 4: Professional Output Delivery\n- Provide unified HTML file that works in both editing and presentation contexts\n- Include clear instructions for toggling modes and generating final version\n- Ensure mobile-responsive design\n\n## File Structure\n\n```\nflyai-travelmapify\u002F\n├── SKILL.md\n├── INSTALL.md                          # Installation and setup guide\n├── flyai-travelmapify.py              # **PORTABLE ENTRY POINT**: Main executable script\n├── scripts\u002F\n│   ├── config.py                      # **DYNAMIC CONFIGURATION**: Path and environment detection\n│   ├── main_travel_mapify_enhanced.py # **PRODUCTION MAIN**: Auto-starts servers + text input + unique ID isolation\n│   ├── geocode_locations.py           # Amap geocoding integration\n│   ├── generate_from_optimized_template.py # Optimized template with unique map ID isolation\n│   └── hotel-search-server.py         # FlyAI hotel search backend server\n\n**Note**: Image processing is handled externally using the agent's AI Vision capability. The extracted POI names are passed as text input to this skill.\n├── references\u002F\n│   ├── amap_api_guide.md              # Amap API usage patterns\n│   ├── poi_validation_rules.md        # POI validation and filtering rules\n│   └── troubleshooting-guide.md       # Common issues and solutions\n└── assets\u002F\n    └── templates\u002F\n        └── main-generic-template-with-unique-id.html # **PRODUCTION TEMPLATE**: Unique ID isolation + all features\n```\n\n**Main Template**: The skill now uses the **optimized travel_mapify system** with unique map ID isolation as the primary approach, which includes:\n- **Optimized Template Generation**: Streamlined HTML generation with minimal dependencies\n- **Unique Map ID Generation**: Automatically creates a hash-based ID from POI names (e.g., `travelMap_abc123`) to isolate localStorage data\n- **No Cross-Map Data Contamination**: Each travel map saves\u002Fretrieves data independently using its unique ID\n- **Persistent Per-Map State**: Hotel searches, date selections, and POI reordering are saved separately for each map\n- **Enhanced Performance**: Reduced template complexity and faster map loading\n- Real FlyAI hotel search integration\n- Professional notification system (no alert popups)\n- Loading states with timeout handling\n- Enhanced UX with smart defaults\n\n**Automatic Server Management**: The enhanced main script automatically starts both HTTP server (port 9000) and hotel search server (port 8770) when generating maps, ensuring all functionality is ready immediately.\n\n## Usage Examples\n\n### Portable Execution\n```bash\n# From skill directory (recommended)\npython3 flyai-travelmapify.py --locations \"上海外滩,迪士尼乐园,豫园\" --output-html shanghai-trip.html\n\n# From any directory\npython3 \u002Fpath\u002Fto\u002Fflyai-travelmapify\u002Fflyai-travelmapify.py --locations \"北京故宫,天坛,颐和园\" --output-html beijing-trip.html\n\n# AI Vision Image Processing Workflow:\n# 1. Use agent's AI Vision to analyze travel image and extract POI names\n# 2. Pass extracted names as text input to the skill\n# Example: locations=\"解放碑,山城步道,十八梯,白象居,湖广会馆,来福士,洪崖洞,千厮门大桥\"\n\n# With custom ports\npython3 flyai-travelmapify.py --locations \"Tokyo Tower,Shibuya Crossing\" --output-html tokyo-trip.html --http-port 8080 --hotel-port 9000\n```\n\n### Image Input - AI Vision Enhanced\nUser: \"Here's my travel plan screenshot, can you make it interactive?\"\n→ Skill analyzes image using AI Vision model\n→ If needed, requests clarification: \"What city is this for?\" or \"How many attractions are marked?\"\n→ Extracts attractions with preserved sequence and generates interactive map\n\n### Image Input - Manual Clarification\nUser provides image → Skill detects uncertainty → Requests city context → User responds \"重庆\" → Skill processes with enhanced accuracy\n\n### Image Input - Direct POI Entry\nWhen AI Vision cannot confidently identify attractions, skill prompts: \"Please provide attraction names in order, separated by commas\"\n\n### Image Input - Advanced Usage  \nUser: \"I have a photo of our Beijing itinerary, please create a shareable map\"\n→ Skill processes image, validates locations, creates optimized route with professional styling\n\n### Text Input - Direct Locations with Auto City Detection\nUser: \"北京军事博物馆,北京科技大学\"\n→ Skill auto-detects city=\"北京\" from location names\n→ Parses locations directly, geocodes them, and generates interactive map\n\n### Text Input - Default City Fallback\nUser: \"外滩,迪士尼乐园,豫园\"\n→ Skill cannot detect city from generic names\n→ Uses default city=\"上海\" for geocoding\n→ Generates interactive map\n\n### Text Input - Simple List\nUser: \"Create a travel map for: Tokyo Tower, Shibuya Crossing, Meiji Shrine\"\n→ Skill extracts location names, geocodes them, creates optimized route\n\n### Hotel Search Integration\nUser: Clicks \"搜酒店\" button in generated map\n→ Real FlyAI hotel search returns actual hotel data with prices and booking links\n→ No mock data - uses real-time Fliggy MCP integration\n→ Professional UX with loading states and notifications (no alert popups)\n→ Default dates: today for check-in, tomorrow for check-out (1-night stay)\n\n### Customization Request\nUser: \"Can you adjust the route order and add missing locations?\"\n→ Skill provides editable interface with search functionality and reordering tools\n\n## Technical Requirements\n\n- **Python 3.7+**: Required for all scripts (uses standard library only)\n- **FlyAI CLI**: Must be installed globally (`npm install -g @openclaw\u002Fflyai`) \n- **Amap API**: Uses built-in default API key (no user key required)\n- **Local Proxy**: Built-in proxy server handles Amap API requests (default port 8769)\n- **Web Browser**: Modern browser with JavaScript support for interactive features\n\n## Required Skills\n\nThis skill depends on the following OpenClaw skills:\n\n- **[amap-maps](https:\u002F\u002Fgithub.com\u002Fopenclaw\u002Fopenclaw\u002Ftree\u002Fmain\u002Fskills\u002Famap-maps)**: Provides Amap LBS services for geocoding, POI search, and location services\n\nBoth skills must be installed in your OpenClaw workspace under the `skills\u002F` directory:\n```\n~\u002F.openclaw\u002Fworkspace\u002F\n├── skills\u002F\n│   ├── flyai-travelmapify\u002F\n│   └── amap-maps\u002F\n```\n\n## Portable Design\n\n✅ **No hardcoded paths** - Automatically detects OpenClaw workspace and FlyAI installation\n✅ **Cross-platform** - Works on Windows, macOS, and Linux\n✅ **Self-contained** - All scripts and templates included in skill directory\n✅ **Environment-aware** - Adapts to different system configurations\n✅ **Fallback mechanisms** - Multiple detection methods for required components\n\n## Output Files\n\nThe skill generates HTML files using the **optimized travel_mapify system with unique map ID isolation** as the main template:\n\n**`[location]-travel-map-optimized.html`** - Dual-mode interface with all professional enhancements:\n- **Real FlyAI Hotel Search Integration**:\n  - Actual hotel data with prices and booking links\n  - Loading states with \"搜索中...\" button text\n  - 5-second timeout with auto-re-enable\n  - No mock data - uses real Fliggy MCP integration\n- **Professional UX Improvements**:\n  - Notification system instead of alert popups\n  - Auto-hiding messages after 3 seconds\n  - Smart date defaults (today check-in, tomorrow check-out)\n- **Edit Mode (📝)**: Full-featured editing interface with:\n  - Left-panel POI management\n  - Search functionality for adding new locations\n  - Drag-and-drop and arrow button reordering\n  - Real-time map preview\n- **View Mode (👁️)**: Clean presentation version with:\n  - Optimized route display\n  - Numbered POI markers with directional arrows\n  - Professional styling ready for sharing\n- **Generate Final**: Download button to create a clean version without edit controls\n\nFiles are self-contained and work in any modern web browser when served via HTTP server.\n\n## Error Handling\n\n- **Poor Image Quality**: Request higher quality image or manual POI entry\n- **Ambiguous Locations**: Present options for user selection\n- **API Rate Limits**: Implement retry logic with exponential backoff\n- **Missing Coordinates**: Fall back to approximate coordinates with user verification\n- **HTML Display Issues**: Use local HTTP server instead of file:\u002F\u002F protocol\n- **Map Loading Failures**: Check AMap API key restrictions and network connectivity\n- **localStorage Corruption**: Implement fallback data and validation logic\n\n## Enhanced UX Features\n\n**Professional User Interface:**\n- **No alert popups**: All messages displayed in non-intrusive notification area\n- **Loading states**: Hotel search button shows \"搜索中...\" during API calls\n- **Timeout handling**: 5-second timeout automatically re-enables search button\n- **Auto-hiding notifications**: Messages disappear after 3 seconds\n- **Visual feedback**: Error messages in red, success messages in green\n\n**Smart Defaults:**\n- **Date selection**: Today for check-in, tomorrow for check-out (1-night stay)\n- **Hotel sorting**: Results sorted by distance from destination\n- **Top results**: Shows top 5 closest hotels for better user experience\n\n## Best Practices\n\n- Always verify extracted POIs with the user before finalizing\n- Provide clear instructions for customizing the generated maps\n- Optimize for mobile viewing with responsive design\n- Include north indicator and scale reference for professional appearance\n- **Always test via HTTP server**: Never rely on file:\u002F\u002F protocol for web applications\n- **Implement robust error handling**: Wrap API calls and provide user feedback\n- **Validate all inputs**: Sanitize data before processing\n- **Document dependencies**: Clearly specify API keys, network, and browser requirements\n- **Use optimized travel_mapify with unique map ID isolation**: All travel maps now automatically generate unique IDs based on POI names to prevent localStorage conflicts between different maps\n- **Leverage enhanced performance**: The optimized system provides faster map generation and loading\n",{"name":5,"tags":24,"author":35,"license":15,"version":36,"description":7},[25,26,27,28,29,30,31,32,33,34],"travel","maps","routing","geocoding","flyai","hotels","unique-id","server-management","interactive","ai-vision","rudy2steiner","2.2.2","master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fclawhub\u002Ff\u002Fflyai-travelmapify",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill flyai-travelmapify",{"tool":52,"command":53},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill flyai-travelmapify",{"tool":55,"command":56},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill flyai-travelmapify","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Ff\u002Fflyai-travelmapify\u002FSKILL.md",true,[],[61,68,75,82,89,96],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]