Menu
Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | city-tourism-website-builder |
| description | Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs. |
Create 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:
Hero Header
History Section
Places to Visit
Quick Facts
Interactive City Map
Visual Gallery
Footer
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/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/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 "file=@city-website.html" https://filedrop.besoeasy.com/upload
# Response includes:
# - IPFS URL: https://dweb.link/ipfs/{CID}
# - CID for permanent access
Kathua Tourism Website:
Research Thoroughly
Design for All Devices
Performance
Accessibility
Content Quality
Map Quality
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.
Upload and host files anonymously using decentralized storage with Originless and IPFS.
Automate web browsers for AI agents using agent-browser CLI with deterministic element selection.
Log all file changes (write, edit, delete) to a SQLite database for debugging and audit. Use when: (1) Tracking code changes, (2) Debugging issues, (3) Auditing file modifications, or (4) The user asks to track file changes.
Fetch current and historical crypto prices and compute ATH or ATL over common time windows.
Host static websites and assets via zip upload to Originless IPFS. Use when: (1) Deploying static sites, (2) Hosting HTML/CSS/JS projects, (3) Sharing web assets publicly, or (4) User asks to host static files.
Search for torrents by title or IMDB ID via a Torznab-compatible API. Use when: (1) User asks to find a torrent for a movie or show, (2) You need a magnet link for a given title, or (3) User provides an IMDB ID and wants download options.