City Tourism Website Builder Agent Skill
Research and create modern, animated tourism websites for cities with historical facts, places to visit, and colorful designs.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/besoeasy/open-skills --skill city-tourism-website-builderWhat it tells the agent to use
found in the instruction textThe instruction itself
16 sections, as written by the authorCity 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:
# 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:
- Hero Header
- Large gradient text city name
- Tagline
- Animated badge
- Scroll indicator
- History Section
- Historical facts in card grid
- Interactive timeline
- Origin stories
- Places to Visit
- Categorized cards (Religious, Nature, Adventure, Historic)
- Icons and emojis for visual appeal
- Distance information
- Quick Facts
- Animated number counters
- Grid layout
- Key statistics
- Interactive City Map
- OpenStreetMap map centered on city coordinates
- Marker in city center with popup details
- "Download Map PNG" action
- Visual Gallery
- Colorful placeholder grid
- Hover zoom effects
- Footer
- Navigation links
- Copyright
4. Technical Implementation
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:
- 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.
<!-- 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();
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.
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"
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:
: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 major attractions
- Categorize: Religious, Nature, Adventure, Historic
- Include distances from city center
- Add emojis for visual appeal
Facts Section:
- 6 key statistics
- Large numbers with gradient
- Mix of distances, heights, years
7. Upload & Deployment
# 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
Example Output
Kathua Tourism Website:
- URL: https://dweb.link/ipfs/QmRBGRAKvuaVNqNoyvokx2S4H7vWMiHHKsb5EMBzNEkHMB
- Features: 2000+ years of history, 8 tourist places, animated timeline
- Theme: Colorful gradients on white
Best Practices
- Research Thoroughly
- Use multiple sources
- Verify historical facts
- Include local legends
- Design for All Devices
- Mobile-first approach
- Responsive grids
- Touch-friendly interactions
- Map container sized for mobile and desktop
- Performance
- Minimize external dependencies
- Use CSS animations (GPU accelerated)
- Lazy load below-fold content
- Accessibility
- Semantic HTML structure
- ARIA labels where needed
- Keyboard navigation support
- Map controls remain keyboard reachable
- Content Quality
- Engaging copy
- Accurate information
- Local context and flavor
- Map Quality
- Keep city marker exactly at city center coordinates
- Include attribution for OpenStreetMap contributors
- Prefer static-map fallback for guaranteed PNG download
Variations
Theme Options:
- Colorful Modern (default): Gradients on white
- Elegant Dark: Dark mode with gold accents
- Minimal: Clean monochrome
- Cultural: Colors reflecting local culture
Layout Options:
- Standard: Header → History → Places → Facts → Gallery
- Parallax: Scroll-triggered depth effects
- Single Page: All content in vertical scroll
- Multi-page: Separate pages for sections
Resources
Color Palettes:
- https://coolors.co/ for gradient generation
- Vibrant cities: coral (#FF6B6B), teal (#4ECDC4), yellow (#FFE66D), mint (#A8E6CF)
Icons:
- Emojis for universal recognition
- Lucide icons (lightweight)
- Custom SVG for specific landmarks
Hosting:
- Originless/IPFS for permanent storage
- GitHub Pages for traditional hosting
- Netlify for continuous deployment
This skill combines research, design, and technical implementation to create professional city tourism websites that showcase the best of any destination.
Other skills for the same job
different authors, same section of the catalogue
Assists in writing high-quality content by conducting research, adding citations, improving hooks, iterating on outlines, and providing real-time feedback on each section. Transforms your writing process from solo effort to collaborative partnership.
Identifies high-quality leads for your product or service by analyzing your business, searching for target companies, and providing actionable contact strategies. Perfect for sales, business development, and marketing professionals.
Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.
Efficient database search tool for bioRxiv preprint server. Use this skill when searching for life sciences preprints by keywords, authors, date ranges, or categories, retrieving paper metadata, downloading PDFs, or conducting literature reviews.
Query and analyze scholarly literature using the OpenAlex database. This skill should be used when searching for academic papers, analyzing research trends, finding works by authors or institutions, tracking citations, discovering open access publications, or conducting bibliometric analysis across 240M+ scholarly works. Use for literature searches, research output analysis, citation analysis, and academic database queries.
Access USPTO APIs for patent/trademark searches, examination history (PEDS), assignments, citations, office actions, TSDR, for IP analysis and prior art searches.
Multiagent AI system for scientific research assistance that automates research workflows from data analysis to publication. This skill should be used when generating research ideas from datasets, developing research methodologies, executing computational experiments, performing literature searches, or generating publication-ready papers in LaTeX format. Supports end-to-end research pipelines with customizable agent orchestration.
Automated LLM-driven hypothesis generation and testing on tabular datasets. Use when you want to systematically explore hypotheses about patterns in empirical data (e.g., deception detection, content analysis). Combines literature insights with data-driven hypothesis testing. For manual hypothesis formulation use hypothesis-generation; for creative ideation use scientific-brainstorming.
How to use it
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.