SmartDefaults

Starts the site in the visitor's own theme and language, with no flash and no button to hunt for.

Cuándo se usa

When building the boot of a site, adding a theme or language switcher, or when the page flashes light.

SKILL.md

# SmartDefaults

The site starts in the theme and language the visitor expects, without them
touching anything.

## Theme: no toggle by default

The theme follows the system **always**, live: if the visitor switches their OS
from dark to light with the tab open, the page follows on its own.

- **Tier A, the one to use unless there is a strong reason not to:** pure CSS,
  zero JavaScript, so a flash is impossible. The palette lives on :root for light
  and is fully redefined inside @media (prefers-color-scheme: dark). The browser
  re-evaluates that media query by itself, so following the system live comes for
  free.
- **Tier B, the exception:** only when the product genuinely needs the user to
  PIN a theme against their system setting. Then the choice is stored and read by
  an inline script placed BEFORE the first stylesheet. Decide later and the
  browser has already painted, so the user sees the change: that is the flash.
- If a project already has a manual toggle, propose removing it and moving to
  tier A before accepting it as given.

Resolution order in tier B: a stored user choice always wins; with nothing
stored, the system theme; as a last resort, light. While there is no explicit
choice, listen for the system change so the page follows it live.

## Language: auto-select, never force

Redirecting automatically by browser language breaks the back button, breaks
bookmarks and confuses crawlers. Google Search Central states it outright. So:

1. If there is a stored choice, respect it ALWAYS.
2. If there is none, first visit: read the browser's language list and match the
   closest one among the languages the site supports.
3. If none matches, the site's native language.

Auto-detection only runs on the first visit. Once the user picks, that choice
wins forever and the site never guesses again. The manual selector stays visible
and reachable.

## Cheap details almost nobody adds

- color-scheme: light dark in the CSS, so scrollbars and native browser controls
  follow the theme.
- The body needs its own background colour; without it the browser's shows through.
- If the site has separate URLs per language, add the alternate hreflang tags.
  With swapped texts on the same URL they do not apply. That is where this skill
  ends and SiteIndex begins, the one that makes those versions exist for search
  engines.

## The check

Change the SYSTEM theme and reload: the page must follow with not a single frame
of the opposite theme. With nothing stored, the language must auto-select; with
something stored, it must ignore the browser language.