Skill128 repo starsupdated 2mo ago

city-tourism-website-builder

# City Tourism Website Builder This Claude Code skill researches cities and generates modern, animated tourism websites featuring historical information, attraction guides, and interactive elements. Use it to quickly create professional promotional sites for any city that include OpenStreetMap integration, colorful card-based layouts, smooth animations, responsive design, and optional map downloads.

View source Repository: open-skills

Install in Claude Code

Copy

git clone --depth 1 https://github.com/besoeasy/open-skills /tmp/city-tourism-website-builder && cp -r /tmp/city-tourism-website-builder/skills/city-tourism-website-builder ~/.claude/skills/city-tourism-website-builder

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# City Tourism Website Builder

Create stunning, modern tourism websites for any city with comprehensive research, historical facts, and beautiful animations.

## Overview

This skill enables the creation of professional city tourism websites featuring:
- Deep research on city history, facts, and tourist attractions
- Modern, colorful designs with white backgrounds
- Smooth animations and hover effects
- Responsive layouts for all devices
- Interactive OpenStreetMap centered on the city
- Optional map snapshot download as PNG
- IPFS hosting for permanent availability

## Workflow

### 1. Research Phase

Gather comprehensive information about the city:

```bash
# 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:**
- Historical origins and etymology
- Famous personalities associated
- Religious/spiritual significance
- Major tourist attractions
- Geography and climate
- Cultural heritage
- Quick facts (population, distance from major cities, etc.)

### 2. Design Principles

**Color Scheme:**
- White background for clean, modern look
- Vibrant gradient accents (coral, teal, yellow, mint)
- Dark text for readability
- Colorful cards with hover effects

**Animations:**
- Floating background shapes
- Fade-in on scroll
- Card hover lift effects
- Smooth scroll navigation
- Gradient text animations
- Pulse effects on badges

### 3. Website Structure

**Sections:**
1. **Hero Header**
   - Large gradient text city name
   - Tagline
   - Animated badge
   - Scroll indicator

2. **History Section**
   - Historical facts in card grid
   - Interactive timeline
   - Origin stories

3. **Places to Visit**
   - Categorized cards (Religious, Nature, Adventure, Historic)
   - Icons and emojis for visual appeal
   - Distance information

4. **Quick Facts**
   - Animated number counters
   - Grid layout
   - Key statistics

5. **Interactive City Map**
   - OpenStreetMap map centered on city coordinates
   - Marker in city center with popup details
   - "Download Map PNG" action

6. **Visual Gallery**
   - Colorful placeholder grid
   - Hover zoom effects

7. **Footer**
   - Navigation links
   - Copyright

### 4. Technical Implementation

**CSS Features:**
```css
/* 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:**
- Smooth scroll navigation
- Navbar hide/show on scroll
- Intersection Observer for reveal animations
- Mobile-responsive menu
- Interactive OpenStreetMap (Leaflet)
- City-center marker and popup
- Download map image as PNG (with fallback)

### 4.1 OpenStreetMap integration (required)

Use free OpenStreetMap tiles through Leaflet.

```html
<!-- 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>
```

```javascript
// 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: '&copy; OpenStreetMap contributors'
}).addTo(map);

L.marker([city.lat, city.lon])
   .addTo(map)
   .bindPopup(`${city.name} City Center`)
   .openPopup();
```

### 4.2 Download map as PNG (if possible)

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.

```javascript
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):**

```bash
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"
```

### 5. Example Implementation

**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:**
```css
:root {
  --primary: #FF6B6B;      /* Coral */
  --secondary: #4ECDC4;    /* Teal */
  --accent: #FFE66D;       /* Yellow */
  --purple: #A8E6CF;       /* Mint */
  --dark: #2C3E50;         /* Dark text */
  --light: #F7F9FC;        /* Light bg */
}
```

### 6. Content Guidelines

**History Section:**
- 4 key historical cards
- 3-timeline items
- Focus on origin stories
- Include royal/religious heritage

**Places Section:**
- 6-8