kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-09 08:53:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
6ab99f7368
afv-library/skills/building-webapp-weather-widget/SKILL.md
k-j-kim 6ab99f7368
Add webapp skills from template, sync script updates 
- Rename skill folders from salesforce-webapp-* to *-webapp-* convention
- Update sync-template-skills.js: set SKILL.md front matter name to dest folder
- Remove sync-template-skills workflow and pin-template-deps script
- Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill
- Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux

Made-with: Cursor
2026-03-18 15:06:58 -07:00

2.0 KiB
Raw Blame History

name description
building-weather-widget Adds a weather widget to React pages using the free Open-Meteo API. Use when the user asks to add weather, show a forecast, display current conditions, add a weather card, or integrate weather data into the web application.

Weather Widget

When to Use

Use this skill when:

  • Adding current weather conditions to a dashboard or sidebar
  • Displaying an hourly or daily forecast
  • Showing location-based weather for a property, event, or destination

Step 1 — Determine widget scope

Identify what weather data the user needs:

  • Current conditions only — temperature, description, wind, humidity
  • Current + hourly forecast — conditions + next 6–12 hours
  • Current + daily forecast — conditions + multi-day outlook

If unclear, ask:

"Should the weather widget show just current conditions, or include an hourly/daily forecast too?"

Step 2 — Determine location source

The widget needs a latitude/longitude. Identify where this comes from:

  • Fixed default — hardcoded city (e.g. San Francisco: 37.7749, -122.4194)
  • User's location — browser Geolocation API
  • Address-based — geocode an address to lat/lng (see the building-interactive-map skill for geocoding)
  • Prop-driven — parent component passes lat/lng

Step 3 — Implementation

Read the corresponding guides:

  • Weather data hook — read implementation/weather-hook.md for the useWeather custom hook and Open-Meteo API integration.
  • Weather UI component — read implementation/weather-ui.md for rendering weather data in a card.

Verification

Before completing:

  1. Widget shows real weather data (not mocked).
  2. Loading and error states are handled gracefully.
  3. Temperature displays in the correct unit (°F or °C).
  4. Run from the web app directory:
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
  • Lint: MUST result in 0 errors.
  • Build: MUST succeed.