Create a hyper-local weather dashboard with hourly and 7-day forecasts, radar imagery, and severe weather alerts. Your AI agent pulls current conditions for any city and publishes a clean, visually rich forecast page — updated automatically so visitors always see fresh data without you lifting a finger.
Build Prompt
Copy this prompt into Claude Code
Build a static HTML weather forecast dashboard for [Your City, State]. Dark theme: background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent #0ea5e9 (sky blue). All data stored inline: `const CURRENT = {...}`, `const HOURLY = [...]` (24 entries), `const DAILY = [...]` (7 entries), `const ALERTS = [...]`, `const LAST_UPDATED = "..."`.
CURRENT object: city, region, country, lat, lon, tempF, tempC, feelsLikeF, feelsLikeC, condition (text), conditionEmoji, humidity, windMph, windDir, windGustMph, pressureIn, visibilityMiles, uvIndex, dewpointF, cloudCoverPct, isDay (bool).
HOURLY entries: hour (0-23), tempF, condition, conditionEmoji, precipChancePct, windMph, windDir, humidityPct.
DAILY entries: dayName, date, highF, lowF, condition, conditionEmoji, precipChancePct, precipInches, windMph, sunrise, sunset, moonPhase.
ALERTS array: title, severity (Minor/Moderate/Severe/Extreme), description, effective, expires, areas.
Layout sections:
1. Hero: large condition emoji (4rem), current temp in white 3rem font, feels-like, city name, last updated time.
2. Conditions row: 6 metric tiles (Humidity, Wind, Pressure, UV Index, Visibility, Dew Point) each with icon emoji, value, label — all in #12121a surfaces.
3. Hourly scroll: horizontal scrollable row of 24 hour blocks — hour label, emoji, temp, precip % bar.
4. 7-Day forecast: full-width rows with day name, emoji, high/low bar chart (inline SVG gradient bar between low and high), precip chance.
5. Alerts banner (amber #f59e0b background) shown only when ALERTS.length > 0 — collapsible with details.
6. Moon & Sun: card with today's sunrise, sunset, moon phase emoji, and day length.
7. Footer: "Weather data researched and updated every 3 hours" + source attribution "Data: Open-Meteo & NWS".
Units toggle (°F / °C) using JavaScript — store preference in localStorage. Responsive: mobile shows vertical stack, desktop shows side-by-side panels.
SEO: JSON-LD WeatherForecast dataset, city-specific title and meta. Canonical for the city URL.
Add cron comment:
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Multi-City Support
Add a city switcher dropdown to serve forecasts for multiple locations from a single deployed site.
Activity Recommendations
Show AI-generated activity suggestions based on conditions: "Great day for hiking — 68°F and sunny."
Historical Comparison
Display "warmer/cooler than average" context by comparing today's temps to 30-year climate normals.
Pollen & Air Quality
Add AQI index and pollen count tiles for allergy sufferers — high-value data for suburban audiences.
Clothing Suggester
Recommend what to wear today based on temperature, wind, and precipitation probability.
Agriculture Mode
Add frost risk, soil temperature, and growing degree day data for farmers and gardeners.
Update Prompt
Update Prompt — Re-fetch and refresh forecast data
Fetch fresh weather data for [City, State] from the Open-Meteo API. Update CURRENT conditions, HOURLY forecast for the next 24 hours, DAILY forecast for the next 7 days, and any active ALERTS from the National Weather Service. Set LAST_UPDATED to the current UTC timestamp. Redeploy to AccessAgent.ai.
SEO Tips
Use city + "weather forecast" as your primary keyword — "Austin weather forecast" gets hundreds of thousands of monthly searches.
Add JSON-LD Dataset schema with temporalCoverage and spatialCoverage for the forecast data.
Create neighborhood-level pages for large cities ("Brooklyn weather", "South Austin weather") for less competitive keywords.
Include a "weather history" section with last week's actuals — this creates evergreen indexable content beyond the ephemeral forecast.
Target seasonal queries like "[City] first frost date" or "[City] average rainfall in June" with dedicated factual sections.
Monetization Ideas
Local business display ads — HVAC companies, umbrella retailers, and landscapers pay premiums to reach weather-checking audiences.
Affiliate links to weather gear on Amazon (rain jackets, snow shovels, fans) that match current conditions.
Premium forecast newsletter with extended 14-day outlook and severe weather pre-alerts for $3/month.
White-label weather pages for local news sites, event venues, and tourism boards at a monthly SaaS fee.
Contextual ads via Google AdSense — weather pages have very high RPMs due to local advertiser competition.