skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

ask-weather-forecast

Integrates and troubleshoots the use-weather-forecast React widget with Open-Meteo data and IP geolocation.

74|11|Updated Jul 4, 2024
Search Tags:#troubleshooting#react#widget#geolocation#open-meteo#cloudflare worker#weather forecast
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-weather-forecast-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-weather-forecast
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-weather-forecast
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-weather-forecast-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires use-weather-forecast, grab-url, react, react-dom.

What problem does it solve? Embedding a weather forecast widget in a React app involves hidden pitfalls: IP geolocation rate limits, wrong-city results, malformed request URLs, and caching surprises. This Skill provides the operational knowledge to integrate, configure, and debug the use-weather-forecast package correctly. ## Core Features & Use Cases - Widget Integration: Set up the WeatherForecast component, useWeatherForecast hook, and getWeatherForecast function with explicit coordinates, a geo Worker endpoint, or default IP lookups. - Location Resolution Control: Understand the 12-hour location cache, provider fallback chain (ipwho.is, ipapi.co, geojs, freeipapi), and when to deploy the bundled Cloudflare geo Worker to avoid 429 rate limits. - Troubleshooting & Extension: Diagnose 400 Bad Request errors caused by the grab-url query-string trap, add new WMO weather codes and icons, and manage the layered fallback across Open-Meteo providers. - Use Case: Your widget shows the datacenter's city instead of the visitor's and intermittently hits 429 errors — use this Skill to deploy the geo Worker and pass geoEndpoint so Cloudflare edge geo resolves locations without quota. ## Quick Start Ask the assistant to help you embed the WeatherForecast component in your React app with explicit coordinates and a deployed geo Worker endpoint.

Frequently Asked Questions about ask-weather-forecast

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a weather forecast widget to a React app?▼

Install the use-weather-forecast npm package and render the WeatherForecast component with optional props like compact, temperatureUnit, and windSpeedUnit. Forecast data comes from Open-Meteo with no API key, and location resolves via IP geolocation by default.

Why does my weather widget show the wrong city?▼

IP geolocation likely resolved your server, a VPN exit, or a datacenter instead of the visitor. Pass explicit latitude and longitude props, or deploy the bundled Cloudflare geo Worker and set geoEndpoint so edge geo data is used.

How do I fix 429 Too Many Requests from ipwho.is?▼

Free IP lookup providers share a 1,000 requests-per-day quota across everyone on your domain. Verify the 12-hour location cache is enabled, then deploy the geo Worker with bun run worker:deploy and pass geoEndpoint to bypass third-party quotas.

Why does the Open-Meteo request return 400 Bad Request?▼

The cause is usually a malformed URL, not a bad query: handing grab-url a path that already contains a question mark produces a double question mark that Open-Meteo rejects. Use splitUrl so grab-url composes the query string itself.

Does the weather widget work with server-side rendering?▼

The component is client-side only and guards its localStorage cache behind typeof window checks. Mark the host boundary with 'use client' in frameworks like Next.js to avoid SSR errors.

How do I add a new weather condition icon?▼

Open-Meteo returns numeric WMO weather codes that getWeatherIcon in src/weatherCodes.ts maps to a WeatherCondition union. Add the new code mapping there, extend the WeatherCondition union if needed, and provide the corresponding SVG for WeatherIcon.

Related Skills

Explore More Software Engineering Skills→
softweeksoftweek

weather

Retrieve current weather conditions and forecasts for any global location.

Community
Basic
chendongqichendongqi
110

sales-sales-forecaster

Forecast sales revenue and quotas across pipelines and regions.

Community
Advanced
AgentiveCityAgentiveCity
2

cloudflare-security-hardening

Configure WAF rules, rate limiting, IP lists, and secure headers for Cloudflare Workers APIs.

Official
Advanced
eggent-aieggent-ai
330

weather

Fetch current weather conditions and forecasts via wttr.in or Open-Meteo.

Official
Basic