besoeasy/city-tourism-website-builder
Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs.
npx skills add https://github.com/besoeasy/open-skills --skill city-tourism-website-builderCreate stunning, modern tourism websites for any city with comprehensive research, historical facts, and beautiful animations.
This skill enables the creation of professional city tourism websites featuring:
Gather comprehensive information about the city:
# Search for city information
websearch query="CITY_NAME history facts tourist places visiting sites"
websearch query="CITY_NAME famous temples monuments landmarks"
websearch query="CITY_NAME best time to visit how to reach"
Key Information to Collect:
Color Scheme:
Animations:
Sections:
CSS Features:
/* Animated gradient text */
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Floating shapes */
animation: float 20s infinite ease-in-out;
/* Card hover effects */
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
/* Scroll-triggered animations */
IntersectionObserver for fade-in effects
JavaScript Features:
Use free OpenStreetMap tiles through Leaflet.
<!-- In <head> -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- In body -->
<section id="map" aria-label="City map section">
<h2>Explore the City Map</h2>
<div id="cityMap" style="height: 420px; border-radius: 16px;"></div>
<button id="downloadMapBtn" type="button" aria-label="Download Map PNG">Download Map PNG</button>
</section>
// Example city center (replace per city)
const city = {
name: 'Kathua',
lat: 32.3693,
lon: 75.5254,
zoom: 12
};
const map = L.map('cityMap').setView([city.lat, city.lon], city.zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([city.lat, city.lon])
.addTo(map)
.bindPopup(`${city.name} City Center`)
.openPopup();
Client-side PNG export from interactive tiles can fail in some browsers due to canvas/CORS restrictions.
Reliable fallback (recommended): download a static PNG from the free OSM static map endpoint.
document.getElementById('downloadMapBtn').addEventListener('click', () => {
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`;
const link = document.createElement('a');
link.href = url;
link.download = `${city.name.toLowerCase().replace(/\s+/g, '-')}-map.png`;
link.click();
});
CLI option (same free endpoint):
CITY_LAT="32.3693"
CITY_LON="75.5254"
CITY_NAME="kathua"
curl -fsS "https://staticmap.openstreetmap.de/staticmap.php?center=${CITY_LAT},${CITY_LON}&zoom=12&size=1280x720&markers=${CITY_LAT},${CITY_LON},red-pushpin" \
-o "${CITY_NAME}-map.png"
File Structure:
city-website.html
├── Animated background shapes
├── Fixed navigation with blur effect
├── Hero section with gradient text
├── History cards with top accent line
├── Timeline with alternating layout
├── Places grid with category badges
├── Facts section with large numbers
├── Interactive OpenStreetMap section (city-centered)
├── Download Map PNG button
├── Gallery grid with color blocks
└── Dark footer
Key CSS Variables:
:root {
--primary: #FF6B6B; /* Coral */
--secondary: #4ECDC4; /* Teal */
--accent: #FFE66D; /* Yellow */
--purple: #A8E6CF; /* Mint */
--dark: #2C3E50; /* Dark text */
--light: #F7F9FC; /* Light bg */
}
History Section:
Places Section:
Facts Section:
# Upload to IPFS via Originless
curl -fsS -X POST -F "[email protected]" https://filedrop.besoeasy.com/upload
# Response includes:
# - IPFS URL: https://dweb.link/ipfs/{CID}
# - CID for permanent access
Kathua Tourism Website:
Theme Options:
Layout Options:
Color Palettes:
Icons:
Hosting:
This skill combines research, design, and technical implementation to create professional city tourism websites that showcase the best of any destination.
Take besoeasy/city-tourism-website-builder from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
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.