Landing Conformance — UX

landing-pages specs/landing-pages/conformance-ux.kmd

Detector de conformance de UX de landing pages: responsividade mobile (breakpoints 768/480 + hamburger) e toggle de tema claro/escuro (anti-flash + color-scheme + botão). Severity ADVISORY (reporta, não bloqueia) — vira HARD quando koder_web_kit#030 torna a conformidade alcançável pelo gerador de landing build-time. Sub-checks de UX do detector de landing (koder-tools#032); o sub-check de privacy (HARD) vive em `conformance-privacy.kmd`.

Quando esta spec se aplica

Todos os triggers

Spec — Landing Conformance: UX (responsive + theme)

Sub-checks advisory do detector de conformance de landing (koder-tools#032). Formalizam os checks de responsividade e tema do /k-housekeep Fase 2 (hoje grep inline no skill) como detector do koder-spec-audit, rodando no sweep e (futuramente) no gate de CI.

Por que advisory (por ora)

koder-tools#032 é blocked_by koder_web_kit#030: responsive/theme só podem virar hard quando o gerador de landing build-time (#030) torna a conformidade alcançável de forma determinística. Até lá são advisory — reportam drift sem bloquear. Promoção a hard = trocar severity: advisory → hard neste frontmatter (e, se desejado, dividir responsive↔theme em specs separadas, já que responsive→hard e theme permanece advisory por landing-pages/products.kmd §C vs themes/light-dark.kmd).

Checks

Responsividade mobile (landing-pages/products.kmd §C)

  1. @media (max-width: 768px) presente.
  2. @media (max-width: 480px) presente.
  3. Hamburger: classe .nav-toggle presente (nav colapsável no breakpoint).

Toggle de tema (specs/themes/light-dark.kmd)

  1. Script anti-flash no <head>: localStorage.getItem('theme') e matchMedia('(prefers-color-scheme:dark)').
  2. color-scheme declarado no CSS (:root claro / [data-theme="dark"] escuro).
  3. Botão toggle: toggleTheme( (JS) ou <koder-theme-toggle (web kit).

Audit

koder-spec-audit run executa conformance-ux-audit.sh <index.html> por landing casada. Cada check ausente vira uma entry em applied (drift advisory). Contrato (specs/audit/frontmatter.kmd):

  • Exit 0 — todos os checks presentes (pass).
  • Exit 1 — ≥1 check ausente (drift; severity advisory ⇒ reporta).
  • Exit 2 — erro interno.

Referências