{"id":"437c03a5-a133-41c7-a137-872648718d65","shortId":"AyfyMC","kind":"skill","title":"city-tourism-website-builder","tagline":"Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs.","description":"# City Tourism Website Builder\n\nCreate stunning, modern tourism websites for any city with comprehensive research, historical facts, and beautiful animations.\n\n## Overview\n\nThis skill enables the creation of professional city tourism websites featuring:\n- Deep research on city history, facts, and tourist attractions\n- Modern, colorful designs with white backgrounds\n- Smooth animations and hover effects\n- Responsive layouts for all devices\n- Interactive OpenStreetMap centered on the city\n- Optional map snapshot download as PNG\n- IPFS hosting for permanent availability\n\n## Workflow\n\n### 1. Research Phase\n\nGather comprehensive information about the city:\n\n```bash\n# Search for city information\nwebsearch query=\"CITY_NAME history facts tourist places visiting sites\"\nwebsearch query=\"CITY_NAME famous temples monuments landmarks\"\nwebsearch query=\"CITY_NAME best time to visit how to reach\"\n```\n\n**Key Information to Collect:**\n- Historical origins and etymology\n- Famous personalities associated\n- Religious/spiritual significance\n- Major tourist attractions\n- Geography and climate\n- Cultural heritage\n- Quick facts (population, distance from major cities, etc.)\n\n### 2. Design Principles\n\n**Color Scheme:**\n- White background for clean, modern look\n- Vibrant gradient accents (coral, teal, yellow, mint)\n- Dark text for readability\n- Colorful cards with hover effects\n\n**Animations:**\n- Floating background shapes\n- Fade-in on scroll\n- Card hover lift effects\n- Smooth scroll navigation\n- Gradient text animations\n- Pulse effects on badges\n\n### 3. Website Structure\n\n**Sections:**\n1. **Hero Header**\n - Large gradient text city name\n - Tagline\n - Animated badge\n - Scroll indicator\n\n2. **History Section**\n - Historical facts in card grid\n - Interactive timeline\n - Origin stories\n\n3. **Places to Visit**\n - Categorized cards (Religious, Nature, Adventure, Historic)\n - Icons and emojis for visual appeal\n - Distance information\n\n4. **Quick Facts**\n - Animated number counters\n - Grid layout\n - Key statistics\n\n5. **Interactive City Map**\n - OpenStreetMap map centered on city coordinates\n - Marker in city center with popup details\n - \"Download Map PNG\" action\n\n6. **Visual Gallery**\n - Colorful placeholder grid\n - Hover zoom effects\n\n7. **Footer**\n - Navigation links\n - Copyright\n\n### 4. Technical Implementation\n\n**CSS Features:**\n```css\n/* Animated gradient text */\nbackground: linear-gradient(135deg, #FF6B6B, #4ECDC4);\n-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\n\n/* Floating shapes */\nanimation: float 20s infinite ease-in-out;\n\n/* Card hover effects */\ntransform: translateY(-10px);\nbox-shadow: 0 20px 60px rgba(0,0,0,0.15);\n\n/* Scroll-triggered animations */\nIntersectionObserver for fade-in effects\n```\n\n**JavaScript Features:**\n- Smooth scroll navigation\n- Navbar hide/show on scroll\n- Intersection Observer for reveal animations\n- Mobile-responsive menu\n- Interactive OpenStreetMap (Leaflet)\n- City-center marker and popup\n- Download map image as PNG (with fallback)\n\n### 4.1 OpenStreetMap integration (required)\n\nUse free OpenStreetMap tiles through Leaflet.\n\n```html\n\n\n Explore the City Map \n
\n Download Map PNG \n \n```\n\n```javascript\n// Example city center (replace per city)\nconst city = {\n name: 'Kathua',\n lat: 32.3693,\n lon: 75.5254,\n zoom: 12\n};\n\nconst map = L.map('cityMap').setView([city.lat, city.lon], city.zoom);\n\nL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n maxZoom: 19,\n attribution: '© OpenStreetMap contributors'\n}).addTo(map);\n\nL.marker([city.lat, city.lon])\n .addTo(map)\n .bindPopup(`${city.name} City Center`)\n .openPopup();\n```\n\n### 4.2 Download map as PNG (if possible)\n\nClient-side PNG export from interactive tiles can fail in some browsers due to canvas/CORS restrictions.\n\n**Reliable fallback (recommended):** download a static PNG from the free OSM static map endpoint.\n\n```javascript\ndocument.getElementById('downloadMapBtn').addEventListener('click', () => {\n const url = `https://staticmap.openstreetmap.de/staticmap.php?center=${city.lat},${city.lon}&zoom=${city.zoom}&size=1280x720&markers=${city.lat},${city.lon},red-pushpin`;\n const link = document.createElement('a');\n link.href = url;\n link.download = `${city.name.toLowerCase().replace(/\\s+/g, '-')}-map.png`;\n link.click();\n});\n```\n\n**CLI option (same free endpoint):**\n\n```bash\nCITY_LAT=\"32.3693\"\nCITY_LON=\"75.5254\"\nCITY_NAME=\"kathua\"\n\ncurl -fsS \"https://staticmap.openstreetmap.de/staticmap.php?center=${CITY_LAT},${CITY_LON}&zoom=12&size=1280x720&markers=${CITY_LAT},${CITY_LON},red-pushpin\" \\\n -o \"${CITY_NAME}-map.png\"\n```\n\n### 5. Example Implementation\n\n**File Structure:**\n```\ncity-website.html\n├── Animated background shapes\n├── Fixed navigation with blur effect\n├── Hero section with gradient text\n├── History cards with top accent line\n├── Timeline with alternating layout\n├── Places grid with category badges\n├── Facts section with large numbers\n├── Interactive OpenStreetMap section (city-centered)\n├── Download Map PNG button\n├── Gallery grid with color blocks\n└── Dark footer\n```\n\n**Key CSS Variables:**\n```css\n:root {\n --primary: #FF6B6B; /* Coral */\n --secondary: #4ECDC4; /* Teal */\n --accent: #FFE66D; /* Yellow */\n --purple: #A8E6CF; /* Mint */\n --dark: #2C3E50; /* Dark text */\n --light: #F7F9FC; /* Light bg */\n}\n```\n\n### 6. Content Guidelines\n\n**History Section:**\n- 4 key historical cards\n- 3-timeline items\n- Focus on origin stories\n- Include royal/religious heritage\n\n**Places Section:**\n- 6-8 major attractions\n- Categorize: Religious, Nature, Adventure, Historic\n- Include distances from city center\n- Add emojis for visual appeal\n\n**Facts Section:**\n- 6 key statistics\n- Large numbers with gradient\n- Mix of distances, heights, years\n\n### 7. Upload & Deployment\n\n```bash\n# Upload to IPFS via Originless\ncurl -fsS -X POST -F \"file=@city-website.html\" https://filedrop.besoeasy.com/upload\n\n# Response includes:\n# - IPFS URL: https://dweb.link/ipfs/{CID}\n# - CID for permanent access\n```\n\n## Example Output\n\n**Kathua Tourism Website:**\n- URL: https://dweb.link/ipfs/QmRBGRAKvuaVNqNoyvokx2S4H7vWMiHHKsb5EMBzNEkHMB\n- Features: 2000+ years of history, 8 tourist places, animated timeline\n- Theme: Colorful gradients on white\n\n## Best Practices\n\n1. **Research Thoroughly**\n - Use multiple sources\n - Verify historical facts\n - Include local legends\n\n2. **Design for All Devices**\n - Mobile-first approach\n - Responsive grids\n - Touch-friendly interactions\n - Map container sized for mobile and desktop\n\n3. **Performance**\n - Minimize external dependencies\n - Use CSS animations (GPU accelerated)\n - Lazy load below-fold content\n\n4. **Accessibility**\n - Semantic HTML structure\n - ARIA labels where needed\n - Keyboard navigation support\n - Map controls remain keyboard reachable\n\n5. **Content Quality**\n - Engaging copy\n - Accurate information\n - Local context and flavor\n\n6. **Map Quality**\n - Keep city marker exactly at city center coordinates\n - Include attribution for OpenStreetMap contributors\n - Prefer static-map fallback for guaranteed PNG download\n\n## Variations\n\n**Theme Options:**\n- **Colorful Modern** (default): Gradients on white\n- **Elegant Dark**: Dark mode with gold accents\n- **Minimal**: Clean monochrome\n- **Cultural**: Colors reflecting local culture\n\n**Layout Options:**\n- **Standard**: Header → History → Places → Facts → Gallery\n- **Parallax**: Scroll-triggered depth effects\n- **Single Page**: All content in vertical scroll\n- **Multi-page**: Separate pages for sections\n\n## Resources\n\n**Color Palettes:**\n- https://coolors.co/ for gradient generation\n- Vibrant cities: coral (#FF6B6B), teal (#4ECDC4), yellow (#FFE66D), mint (#A8E6CF)\n\n**Icons:**\n- Emojis for universal recognition\n- Lucide icons (lightweight)\n- Custom SVG for specific landmarks\n\n**Hosting:**\n- Originless/IPFS for permanent storage\n- GitHub Pages for traditional hosting\n- Netlify for continuous deployment\n\n---\n\nThis skill combines research, design, and technical implementation to create professional city tourism websites that showcase the best of any destination.","tags":["city","tourism","website","builder","open","skills","besoeasy","agent-skills","ai-agents","claude-code","clawdbot","clawdbot-skill"],"capabilities":["skill","source-besoeasy","skill-city-tourism-website-builder","topic-agent-skills","topic-ai-agents","topic-claude-code","topic-clawdbot","topic-clawdbot-skill","topic-llm-tools","topic-mcp-server","topic-openai","topic-openclaw","topic-vibe-coding","topic-vibecoding"],"categories":["open-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/besoeasy/open-skills/city-tourism-website-builder","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add besoeasy/open-skills","source_repo":"https://github.com/besoeasy/open-skills","install_from":"skills.sh"}},"qualityScore":"0.505","qualityRationale":"deterministic score 0.51 from registry signals: · indexed on github topic:agent-skills · 111 github stars · SKILL.md body (8,605 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T12:55:03.024Z","embedding":null,"createdAt":"2026-04-18T22:10:37.291Z","updatedAt":"2026-05-02T12:55:03.024Z","lastSeenAt":"2026-05-02T12:55:03.024Z","tsv":"'-10':355 '-8':695 '/g':549 '/ipfs/':752 '/ipfs/qmrbgrakvuavnqnoyvokx2s4h7vwmihhksb5embznekhmb':766 '/staticmap.php?center=$':526,571 '/upload':745 '0':360,364,365,366 '0.15':367 '1':99,225,784 '12':446,577 '1280x720':532,579 '135deg':326 '19':463 '2':171,238,796 '2000':768 '20px':361 '20s':344 '2c3e50':666 '3':221,250,682,818 '32.3693':442,560 '4':268,313,678,834 '4.1':412 '4.2':479 '4ecdc4':328,657,951 '5':278,592,851 '6':299,673,694,715,862 '60px':362 '7':308,727 '75.5254':444,563 '8':772 'a8e6cf':663,955 'acceler':827 'accent':184,615,659,902 'access':757,835 'accur':856 'action':298 'add':708 'addeventlisten':520 'addto':467,472 'adventur':258,701 'altern':619 'anim':10,43,72,198,216,234,271,319,342,371,391,598,775,825 'appeal':265,712 'approach':804 'aria':839 'associ':152 'attract':64,157,697 'attribut':464,874 'avail':97 'background':70,177,200,322,331,599 'badg':220,235,625 'bash':108,557,730 'beauti':42 'below-fold':830 'best':135,782,1000 'bg':672 'bindpopup':474 'block':645 'blur':604 'box':358 'box-shadow':357 'browser':498 'builder':5,27 'button':640 'canvas/cors':501 'card':194,207,244,255,350,612,681 'categor':254,698 'categori':624 'center':83,284,291,401,433,477,636,707,871 'cid':753,754 'citi':2,14,24,35,52,59,86,107,111,115,125,133,169,231,280,286,290,400,425,432,436,438,476,558,561,564,572,574,581,583,589,635,706,866,870,947,994 'city-cent':399,634 'city-tourism-website-build':1 'city-website.html':597,742 'city.lat':452,470,527,534 'city.lon':453,471,528,535 'city.name':475 'city.name.tolowercase':546 'city.zoom':454,530 'citymap':450 'clean':179,904 'cli':552 'click':521 'client':487 'client-sid':486 'climat':160 'clip':332 'collect':145 'color':22,66,174,193,302,338,644,778,890,907,940 'combin':985 'comprehens':37,103 'const':437,447,522,539 'contain':812 'content':674,833,852,928 'context':859 'continu':981 'contributor':466,877 'control':847 'coolors.co':942 'coordin':287,872 'copi':855 'copyright':312 'coral':185,655,948 'counter':273 'creat':8,28,992 'creation':49 'css':316,318,649,651,824 'cultur':161,906,910 'curl':567,736 'custom':964 'dark':189,646,665,667,897,898 'deep':56 'default':892 'depend':822 'deploy':729,982 'depth':923 'design':23,67,172,797,987 'desktop':817 'destin':1003 'detail':294 'devic':80,800 'distanc':166,266,704,724 'document.createelement':541 'document.getelementbyid':518 'download':90,295,405,427,480,506,637,886 'downloadmapbtn':519 'due':499 'dweb.link':751,765 'dweb.link/ipfs/':750 'dweb.link/ipfs/qmrbgrakvuavnqnoyvokx2s4h7vwmihhksb5embznekhmb':764 'eas':347 'ease-in-out':346 'effect':75,197,210,218,307,352,377,605,924 'eleg':896 'emoji':262,709,957 'enabl':47 'endpoint':516,556 'engag':854 'etc':170 'etymolog':149 'exact':868 'exampl':431,593,758 'explor':423 'export':490 'extern':821 'f':740 'f7f9fc':670 'fact':17,40,61,118,164,242,270,626,713,792,917 'fade':203,375 'fade-in':202,374 'fail':495 'fallback':411,504,882 'famous':127,150 'featur':55,317,379,767 'ff6b6b':327,654,949 'ffe66d':660,953 'file':595,741 'filedrop.besoeasy.com':744 'filedrop.besoeasy.com/upload':743 'fill':337 'first':803 'fix':601 'flavor':861 'float':199,340,343 'focus':685 'fold':832 'footer':309,647 'free':417,512,555 'friend':809 'fss':568,737 'galleri':301,641,918 'gather':102 'generat':945 'geographi':158 'github':974 'gold':901 'gpu':826 'gradient':183,214,229,320,325,609,721,779,893,944 'grid':245,274,304,622,642,806 'guarante':884 'guidelin':675 'header':227,914 'height':725 'heritag':162,691 'hero':226,606 'hide/show':384 'histor':16,39,146,241,259,680,702,791 'histori':60,117,239,611,676,771,915 'host':94,969,978 'hover':74,196,208,305,351 'html':422,837 'icon':260,956,962 'imag':407 'implement':315,594,990 'includ':689,703,747,793,873 'indic':237 'infinit':345 'inform':104,112,143,267,857 'integr':414 'interact':81,246,279,396,492,631,810 'intersect':387 'intersectionobserv':372 'ipf':93,733,748 'item':684 'javascript':378,430,517 'kathua':440,566,760 'keep':865 'key':142,276,648,679,716 'keyboard':843,849 'l.map':449 'l.marker':469 'l.tilelayer':455 'label':840 'landmark':130,968 'larg':228,629,718 'lat':441,559,573,582 'layout':77,275,620,911 'lazi':828 'leaflet':398,421 'legend':795 'lift':209 'light':669,671 'lightweight':963 'line':616 'linear':324 'linear-gradi':323 'link':311,540 'link.click':551 'link.download':545 'link.href':543 'load':829 'local':794,858,909 'lon':443,562,575,584 'look':181 'lucid':961 'major':155,168,696 'map':88,281,283,296,406,426,428,448,468,473,481,515,638,811,846,863,881 'map.png':550,591 'marker':288,402,533,580,867 'maxzoom':462 'menu':395 'minim':820,903 'mint':188,664,954 'mix':722 'mobil':393,802,815 'mobile-first':801 'mobile-respons':392 'mode':899 'modern':9,30,65,180,891 'monochrom':905 'monument':129 'multi':933 'multi-pag':932 'multipl':788 'name':116,126,134,232,439,565,590 'natur':257,700 'navbar':383 'navig':213,310,382,602,844 'need':842 'netlifi':979 'number':272,630,719 'o':588 'observ':388 'openpopup':478 'openstreetmap':82,282,397,413,418,465,632,876 'option':87,553,889,912 'origin':147,248,687 'originless':735 'originless/ipfs':970 'osm':513 'output':759 'overview':44 'page':926,934,936,975 'palett':941 'parallax':919 'per':435 'perform':819 'perman':96,756,972 'person':151 'phase':101 'place':18,120,251,621,692,774,916 'placehold':303 'png':92,297,409,429,461,483,489,509,639,885 'popul':165 'popup':293,404 'possibl':485 'post':739 'practic':783 'prefer':878 'primari':653 'principl':173 'profession':51,993 'puls':217 'purpl':662 'pushpin':538,587 'px':356 'qualiti':853,864 'queri':114,124,132 'quick':163,269 'reach':141 'reachabl':850 'readabl':192 'recognit':960 'recommend':505 'red':537,586 'red-pushpin':536,585 'reflect':908 'reliabl':503 'religi':256,699 'religious/spiritual':153 'remain':848 'replac':434,547 'requir':415 'research':6,38,57,100,785,986 'resourc':939 'respons':76,394,746,805 'restrict':502 'reveal':390 'rgba':363 'root':652 'royal/religious':690 'scheme':175 'scroll':206,212,236,369,381,386,921,931 'scroll-trigg':368,920 'search':109 'secondari':656 'section':224,240,607,627,633,677,693,714,938 'semant':836 'separ':935 'setview':451 'shadow':359 'shape':201,341,600 'showcas':998 'side':488 'signific':154 'singl':925 'site':122 'size':531,578,813 'skill':46,984 'skill-city-tourism-website-builder' 'smooth':71,211,380 'snapshot':89 'sourc':789 'source-besoeasy' 'specif':967 'standard':913 'static':508,514,880 'static-map':879 'staticmap.openstreetmap.de':525,570 'staticmap.openstreetmap.de/staticmap.php?center=$':524,569 'statist':277,717 'storag':973 'stori':249,688 'structur':223,596,838 'stun':29 'support':845 'svg':965 'taglin':233 'teal':186,658,950 'technic':314,989 'templ':128 'text':190,215,230,321,333,336,610,668 'theme':777,888 'thorough':786 'tile':419,493 'tile.openstreetmap.org':457 'time':136 'timelin':247,617,683,776 'top':614 'topic-agent-skills' 'topic-ai-agents' 'topic-claude-code' 'topic-clawdbot' 'topic-clawdbot-skill' 'topic-llm-tools' 'topic-mcp-server' 'topic-openai' 'topic-openclaw' 'topic-vibe-coding' 'topic-vibecoding' 'touch':808 'touch-friend':807 'tourism':3,11,25,31,53,761,995 'tourist':63,119,156,773 'tradit':977 'transform':353 'translatey':354 'transpar':339 'trigger':370,922 'univers':959 'upload':728,731 'url':523,544,749,763 'use':416,787,823 'variabl':650 'variat':887 'verifi':790 'vertic':930 'via':734 'vibrant':182,946 'visit':20,121,138,253 'visual':264,300,711 'webkit':330,335 'webkit-background-clip':329 'webkit-text-fill-color':334 'websearch':113,123,131 'websit':4,12,26,32,54,222,762,996 'white':69,176,781,895 'workflow':98 'x':459,738 'y':460 'year':726,769 'yellow':187,661,952 'z':458 'zoom':306,445,529,576","prices":[{"id":"296a7d08-55b2-4374-9915-7a014d1f2fc3","listingId":"437c03a5-a133-41c7-a137-872648718d65","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"besoeasy","category":"open-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:10:37.291Z"}],"sources":[{"listingId":"437c03a5-a133-41c7-a137-872648718d65","source":"github","sourceId":"besoeasy/open-skills/city-tourism-website-builder","sourceUrl":"https://github.com/besoeasy/open-skills/tree/main/skills/city-tourism-website-builder","isPrimary":false,"firstSeenAt":"2026-04-18T22:10:37.291Z","lastSeenAt":"2026-05-02T12:55:03.024Z"}],"details":{"listingId":"437c03a5-a133-41c7-a137-872648718d65","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"besoeasy","slug":"city-tourism-website-builder","github":{"repo":"besoeasy/open-skills","stars":111,"topics":["agent-skills","ai","ai-agents","claude-code","clawdbot","clawdbot-skill","llm-tools","mcp-server","openai","openclaw","vibe-coding","vibecoding"],"license":null,"html_url":"https://github.com/besoeasy/open-skills","pushed_at":"2026-03-31T13:05:30Z","description":"Battle-tested skill library for AI agents. Save 98% of API costs with ready-to-use code for crypto, PDFs, search, web scraping & more. No trial-and-error, no expensive APIs.","skill_md_sha":"49d39badcac532ec3caa3c5e495e96fe28bc44cc","skill_md_path":"skills/city-tourism-website-builder/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/besoeasy/open-skills/tree/main/skills/city-tourism-website-builder"},"layout":"multi","source":"github","category":"open-skills","frontmatter":{"name":"city-tourism-website-builder","description":"Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs."},"skills_sh_url":"https://skills.sh/besoeasy/open-skills/city-tourism-website-builder"},"updatedAt":"2026-05-02T12:55:03.024Z"}}