summer Solstice countdown

---

name: summer description: "Display a beautiful time dashboard showing a live summer countdown to the summer solstice, today's sunrise/sunset times in China (Beijing), and current time info. Use this skill whenever the user asks about summer countdown, days until summer, summer solstice 2026, sunrise or sunset in China, Beijing sunrise, time until summer, or wants a time/seasonal clock widget. Also trigger when the user asks how long until summer, when does summer start, what time is sunrise in China, or any combination of summer + time + China topics."

---

Summer Time Skill — Summer Countdown + China Sunrise

This skill renders a live interactive time dashboard with three main panels:

1. Summer Countdown — live ticking countdown to summer Solstice by API 2. China Sunrise/Sunset — today's sunrise and sunset times for Beijing, China (fetched via open-meteo / sunrise-sunset API) 3. Current Time — today's date and a live clock

How to build this widget

Create an .html file and present it. The file must:

Summer Countdown Target

Target datetime: fetch the UTC Solstice time from https://aa.usno.navy.mil/api/seasons?year=2026

Source: Summer Countdown – Countdown to target datetime

Display: days, hours, minutes, seconds — all ticking live with setInterval

Beijing Sunrise Data

Fetch from the sunrise-sunset API at runtime using the Beijing coordinates:

Latitude: 39.9075

Longitude: 116.3972

API endpoint: https://api.sunrise-sunset.org/json?lat=39.9075&lng=116.3972&formatted=0&date=today

Note: the API returns UTC times, convert to CST (UTC+8)

Display: sunrise time, sunset time, solar noon, day length

Widget Layout

Three cards side by side (or stacked on narrow screens):

[ Summer Countdown ]  [ Beijing Sunrise ]  [ Current Time ]
  XX days               Sunrise: HH:MM       Today's date
  XX hours              Sunset: HH:MM        Live clock HH:MM:SS
  XX minutes            Day length: H:MM
  XX seconds

Visual style

Clean, flat cards using CSS variables

Sun/summer color accents (amber/orange tones) for the countdown card

Teal/blue tones for sunrise card

Gray/neutral for current time

Live ticking every second via setInterval(update, 1000)

Responsive grid: repeat(auto-fit, minmax(200px, 1fr))

Code structure

Important notes

The summer solstice countdown target is fetched from API

Sunrise data is fetched live from the API each page load

All times display in 24h format with leading zeros

Day length = sunset minus sunrise in hours and minutes

If the API call fails, show a friendly fallback: "Sunrise: ~5:44 · Sunset: ~18:47" (Beijing April averages)