ganbatte-os 0.2.36 → 0.2.38

package/.gos/libraries/timer-pattern-spec.md

@@ -0,0 +1,252 @@
+# Timer Pattern — Spec abstrata
+
+> Abstracao do timer-de-estudo passo-a-passo, baseada em `code-kata-timer/script.js`
+> + `code-kata-timer/style.css`. Adaptado para React + TypeScript + Tailwind.
+>
+> Use quando o usuario pedir contador regressivo, timer de pomodoro, code kata,
+> stopwatch com countdown, ou qualquer interface de tempo com play/pause/edit.
+
+## State machine
+
+```ts
+export const TimerStatus = {
+  STOPPED: 'STOPPED',
+  COUNTDOWN: 'COUNTDOWN',  // animacao 3-2-1-GO antes de iniciar
+  RUNNING: 'RUNNING',
+  PAUSED: 'PAUSED',
+  EDITING: 'EDITING',      // usuario editando valor
+} as const;
+export type TimerStatusType = typeof TimerStatus[keyof typeof TimerStatus];
+
+export const isRunning = (s: TimerStatusType) =>
+  s === TimerStatus.RUNNING || s === TimerStatus.COUNTDOWN;
+```
+
+Transicoes validas:
+```
+STOPPED -> COUNTDOWN -> RUNNING -> PAUSED -> RUNNING
+                                          -> STOPPED
+EDITING <-> STOPPED  (so edita parado)
+```
+
+## Persistencia
+
+LocalStorage com chave `timerSettings`:
+```ts
+interface TimerSettings {
+  currentSeconds: number;
+  timerStatus: TimerStatusType;  // sempre STOPPED ao recarregar
+  theme: 'dark' | 'light';
+  showContributors?: boolean;     // app-specific, opcional
+}
+```
+
+**Regra critica** (do code-kata-timer original): ao carregar settings, **sempre forcar status para STOPPED** — nao restaurar RUNNING. Caso contrario timer "fantasma" continua contando.
+
+## Hook reutilizavel
+
+```ts
+export function useTimer(defaultSeconds = 30) {
+  const [status, setStatus] = useState<TimerStatusType>(TimerStatus.STOPPED);
+  const [seconds, setSeconds] = useState(defaultSeconds);
+  const intervalRef = useRef<number | null>(null);
+
+  const start = useCallback(() => {
+    if (status === TimerStatus.RUNNING) return;
+    setStatus(TimerStatus.RUNNING);
+    intervalRef.current = window.setInterval(() => {
+      setSeconds(s => {
+        if (s <= 1) {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          setStatus(TimerStatus.STOPPED);
+          // dispatch event 'timer:done' para componentes ouvirem
+          window.dispatchEvent(new CustomEvent('timer:done'));
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1000);
+  }, [status]);
+
+  const pause = useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setStatus(TimerStatus.PAUSED);
+  }, []);
+
+  const reset = useCallback((to = defaultSeconds) => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setSeconds(to);
+    setStatus(TimerStatus.STOPPED);
+  }, [defaultSeconds]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  return { status, seconds, start, pause, reset, setSeconds };
+}
+```
+
+## Display
+
+Formato `MM:SS` com font monospace (Orbitron, JetBrains Mono ou Tailwind `font-mono`):
+
+```tsx
+function formatTime(s: number) {
+  const m = Math.floor(s / 60);
+  const ss = s % 60;
+  return `${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+}
+
+<div className="text-7xl md:text-9xl font-mono font-bold tabular-nums">
+  {formatTime(seconds)}
+</div>
+```
+
+`tabular-nums` garante que digitos nao "pulem" durante a contagem.
+
+## Controles (Lucide React)
+
+```tsx
+import { Play, Pause, RotateCcw, Pencil } from "lucide-react";
+
+<div className="flex gap-3 justify-center">
+  {status === TimerStatus.STOPPED || status === TimerStatus.PAUSED ? (
+    <Button onClick={start} size="lg" aria-label="Iniciar">
+      <Play className="h-5 w-5" />
+    </Button>
+  ) : (
+    <Button onClick={pause} size="lg" aria-label="Pausar">
+      <Pause className="h-5 w-5" />
+    </Button>
+  )}
+  <Button onClick={() => reset()} size="lg" variant="outline" aria-label="Resetar">
+    <RotateCcw className="h-5 w-5" />
+  </Button>
+  <Button
+    onClick={() => setStatus(TimerStatus.EDITING)}
+    size="lg"
+    variant="outline"
+    aria-label="Editar tempo"
+    disabled={isRunning(status)}
+  >
+    <Pencil className="h-5 w-5" />
+  </Button>
+</div>
+```
+
+## Atalhos de teclado
+
+```ts
+useEffect(() => {
+  function onKey(e: KeyboardEvent) {
+    if (e.target instanceof HTMLInputElement) return; // nao interferir em editing
+    if (e.code === 'Space') { e.preventDefault(); status === TimerStatus.RUNNING ? pause() : start(); }
+    if (e.code === 'KeyR') reset();
+    if (e.code === 'KeyE') setStatus(TimerStatus.EDITING);
+  }
+  window.addEventListener('keydown', onKey);
+  return () => window.removeEventListener('keydown', onKey);
+}, [status, start, pause, reset]);
+```
+
+## Tema
+
+Variaveis CSS (root data-theme):
+- `--timer-bg`: bg principal
+- `--timer-fg`: cor do texto/digitos
+- `--timer-accent`: cor do CTA primario
+
+Toggle via `document.documentElement.dataset.theme = 'dark' | 'light'`. Persistir em `localStorage`.
+
+## Edicao inline
+
+Ao entrar em `EDITING`:
+- Display vira `<input type="number">` com mesmo styling do display.
+- Enter -> salva e volta para `STOPPED`.
+- Esc -> cancela e volta para `STOPPED`.
+
+```tsx
+{status === TimerStatus.EDITING ? (
+  <input
+    type="number"
+    autoFocus
+    defaultValue={seconds}
+    className="text-7xl font-mono font-bold tabular-nums bg-transparent w-64 text-center"
+    onBlur={(e) => {
+      const v = Number(e.currentTarget.value);
+      if (v > 0) setSeconds(v);
+      setStatus(TimerStatus.STOPPED);
+    }}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter') e.currentTarget.blur();
+      if (e.key === 'Escape') setStatus(TimerStatus.STOPPED);
+    }}
+  />
+) : (
+  <div>{formatTime(seconds)}</div>
+)}
+```
+
+## Eventos customizados
+
+Dispatch quando timer termina:
+```ts
+window.dispatchEvent(new CustomEvent('timer:done', { detail: { duration } }));
+```
+
+Componentes ouvem:
+```ts
+useEffect(() => {
+  const handler = (e: Event) => {
+    const evt = e as CustomEvent<{ duration: number }>;
+    // mostrar toast, tocar som, etc
+  };
+  window.addEventListener('timer:done', handler);
+  return () => window.removeEventListener('timer:done', handler);
+}, []);
+```
+
+## Som ao terminar (opcional)
+
+Web Audio API simples — sem precisar arquivo:
+```ts
+function beep(frequency = 800, duration = 200) {
+  const ctx = new AudioContext();
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+  osc.connect(gain);
+  gain.connect(ctx.destination);
+  osc.frequency.value = frequency;
+  osc.start();
+  setTimeout(() => { osc.stop(); ctx.close(); }, duration);
+}
+```
+
+## Estados visuais (UI guardrails)
+
+- **Loading**: nao aplicavel (timer e estado puro).
+- **Empty**: tempo zerado mostra `00:00` mas botao Iniciar disabled.
+- **Error**: nao deve haver erro em runtime — se houver, fallback para reset.
+- **Running indicator**: Lucide `Activity` pulsando ou borda do display animada.
+
+## Anti-patterns
+
+- `setInterval` sem cleanup -> memory leak.
+- Restaurar status RUNNING do localStorage -> timer fantasma.
+- Sem `tabular-nums` -> digitos pulam visualmente.
+- Sem atalho de teclado -> mau UX em uso intensivo.
+- Emoji nos botoes -> usar Lucide.
+- Sem dispatch de evento ao terminar -> componentes externos nao reagem.
+
+## Reuso no G-OS
+
+`gos-master` reconhece pedidos:
+- "timer", "contador regressivo", "countdown"
+- "pomodoro", "pomodoro timer"
+- "code kata timer", "kata"
+- "stopwatch" (variacao — countup vs countdown)
+
+Aciona skill `timer-component-pattern` que aplica spec acima.

package/.gos/libraries/typeform-pattern-spec.md

@@ -0,0 +1,204 @@
+# Typeform Pattern — Spec abstrata
+
+> Abstracao do quiz/form passo-a-passo estilo Typeform, baseada em
+> `body-metrics-edge/.examples/tsx/old/body-metrics-quiz-typeform.tsx`
+> e `template-lp-wanderson/.a8z/skills/designkit/templates/form.tsx.template`.
+>
+> Use sempre que o usuario pedir form de coleta de dados, quiz, onboarding multi-step,
+> survey, lead form, ou qualquer entrada estruturada que beneficia de **uma pergunta por vez**.
+
+## Por que esse pattern
+
+- **Conversao 2-3x maior** que forms longos (uma tela por pergunta vs paredao de inputs).
+- **Cognitive load baixo** — usuario ve so uma decisao por vez.
+- **Mobile-first natural** — funciona perfeitamente em telas pequenas.
+- **Estado intermediario salvavel** — refresh nao perde progresso.
+
+## Anatomia do pattern
+
+### 1. Question schema
+
+```ts
+export type QuestionType = 'welcome' | 'text' | 'number' | 'choice' | 'multiChoice' | 'date' | 'review';
+
+export interface QuestionOption {
+  value: string;
+  label: string;
+  description?: string;
+  iconName?: keyof typeof import('lucide-react');  // Lucide React (zero emoji)
+}
+
+export interface Question<F = Record<string, unknown>> {
+  id: string;
+  type: QuestionType;
+  field: keyof F | null;
+  question: string | ((data: F) => string);  // pode ser dinamica
+  description?: string;
+  placeholder?: string;
+  suffix?: string;
+  decimal?: boolean;
+  buttonText?: string;
+  options?: QuestionOption[];
+  validate?: (value: unknown, data: F) => string | null;  // null = ok, string = erro
+  showWhen?: (data: F) => boolean;  // condicional
+}
+```
+
+### 2. State
+
+```ts
+const [currentIndex, setCurrentIndex] = useState(0);
+const [data, setData] = useState<FormData>({});
+const [isAnimating, setIsAnimating] = useState(false);
+```
+
+Persistir em `sessionStorage` ou `Supabase row` se descartavel = false.
+
+### 3. Filtro de ativas (condicional)
+
+```ts
+const activeQuestions = questions.filter(q => !q.showWhen || q.showWhen(data));
+const currentQ = activeQuestions[currentIndex];
+```
+
+### 4. Navegacao
+
+- `Enter` -> next (com validacao).
+- `Shift+Enter` (em textarea) -> nova linha.
+- `Esc` -> previous (opcional).
+- Botao "Voltar" sempre visivel exceto na welcome.
+- Animacao opacity+translate-y com 200-300ms entre transicoes.
+
+### 5. Componentes-tipo
+
+**Welcome screen**
+```
+- Titulo grande (text-4xl/5xl)
+- Subtitulo
+- CTA primario "Comecar" (Button size lg)
+- Lucide icon ilustrativo (h-16 w-16)
+```
+
+**Text input**
+```
+- Question (text-2xl semibold)
+- Description opcional (text-base muted-foreground)
+- Input grande (h-12 ou h-14, text-lg)
+- Hint "Pressione Enter para continuar" + CornerDownLeft icon
+```
+
+**Number input**
+```
+- Igual text input mas type="number"
+- Suffix visual ao lado (ex: "anos", "kg", "cm")
+- Decimal opt-in via prop
+```
+
+**Choice (radio)**
+```
+- Stack vertical de cards clicaveis
+- Cada card: Lucide icon + label + description opcional
+- Hover ring + active filled
+- Selecao avanca automaticamente apos 300ms
+```
+
+**MultiChoice (checkbox)**
+```
+- Igual choice mas selecao acumula
+- Botao "Continuar" obrigatorio (nao auto-avanca)
+- Mostra contagem ("3 de 5 selecionados")
+```
+
+**Review (final)**
+```
+- Resumo dos dados coletados em cards
+- Botao "Editar" por secao (volta para a question correspondente)
+- CTA primario "Confirmar" / "Calcular" / "Enviar"
+```
+
+### 6. Animacao
+
+```tsx
+<div className={`transition-all duration-300 ${
+  isAnimating ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0'
+}`}>
+  {/* question */}
+</div>
+```
+
+### 7. Progress bar
+
+Top of screen, fixed:
+```tsx
+<div className="fixed top-0 left-0 right-0 h-1 bg-muted">
+  <div
+    className="h-full bg-primary transition-all duration-300"
+    style={{ width: `${((currentIndex + 1) / activeQuestions.length) * 100}%` }}
+  />
+</div>
+```
+
+### 8. Validacao
+
+Por question:
+```ts
+{
+  id: 'email',
+  type: 'text',
+  field: 'email',
+  question: 'Qual seu email?',
+  validate: (value) => {
+    if (!value) return 'Campo obrigatorio';
+    if (!/^[^@]+@[^@]+\.[^@]+$/.test(String(value))) return 'Email invalido';
+    return null;
+  }
+}
+```
+
+Erro inline abaixo do input. Nunca toast/alert.
+
+### 9. Estados visuais (UI guardrails)
+
+- **Loading** (submitting): botao disabled + Lucide `Loader2` com `animate-spin`.
+- **Empty** (review sem dados): mostrar "Voce ainda nao respondeu — comece pelo inicio."
+- **Error** (submit falhou): inline acima do CTA + botao retry.
+- **Success**: tela final com Lucide `CheckCircle2` h-16 w-16 + redirect ou prox-step.
+
+### 10. Acessibilidade
+
+- `aria-live="polite"` no container de question (anuncia mudanca pra screen reader).
+- Focus auto no input ao mudar de question (`useEffect` + `inputRef.current?.focus()`).
+- Labels via `<Label htmlFor>` ou `aria-label`.
+- Botao voltar com `aria-label="Pergunta anterior"`.
+
+## Stack obrigatorio
+
+- React 18+
+- TypeScript strict
+- Tailwind v4 + shadcn/ui (Button, Input, Card, Label)
+- Lucide React (UNICA lib de icones — zero emoji)
+- React Hook Form + Zod (validacao schema-first quando form complexo)
+
+## Variantes
+
+- **Quiz com calculo** (body-metrics-quiz original): apos ultima question, calcula metricas e mostra resultado.
+- **Lead form** (capturar email/whats): submita para Supabase.
+- **Onboarding** (apos signup): salva preferencias na profiles table.
+- **Survey publico** (NPS, feedback): tabela com RLS public-insert apenas.
+
+## Anti-patterns
+
+- Mostrar todas perguntas de uma vez como form tradicional — defeats the purpose.
+- Sem progress bar — usuario nao sabe quanto falta.
+- Pular validacao no front — mau UX (back so pra forma).
+- Auto-avanco SEM debounce em choice — usuario clica errado e ja avancou.
+- Texto unicode/emoji nas opcoes — usar `iconName` Lucide.
+- Sem estado de submitting no final — usuario clica enviar 3x.
+
+## Reuso no G-OS
+
+Quando usuario pede "form de cadastro", "quiz", "onboarding", "captura de leads":
+1. `gos-master` sugere pattern typeform.
+2. Usuario aprova -> skill `typeform-form-pattern` gera estrutura base.
+3. Customiza questions[] do dominio.
+4. Estilizacao via tokens shadcn (sem hardcoded colors).

package/.gos/libraries/ui-guardrails-checklist.md

@@ -0,0 +1,144 @@
+# UI Guardrails Checklist (detalhe)
+
+> Detalhe expandido de cada item do `ui-guardrails`. Consultar quando uma violacao precisar ser explicada ao usuario.
+
+## A — Estados visuais
+
+### A1 — Loading
+- Tela inteira: skeleton com a estrutura visual (header skeleton, lista de cards skeleton).
+- Componente isolado (ex: botao salvando): spinner inline ou disabled state.
+- Anti-padrao: tela em branco enquanto carrega.
+
+Codegen exige no plan:
+```markdown
+### Estado: loading
+- Skeleton: 3 cards 240x80px com bg-muted-foreground/10 + shimmer.
+- Trigger: query.isPending
+- Duracao max: 3s antes de error.
+```
+
+### A2 — Empty
+- Copy explicando POR QUE esta vazio.
+- Ilustracao OU icone grande.
+- CTA primario para sair do empty (criar item, importar, etc.).
+- Anti-padrao: "Nenhum dado" sem nada mais.
+
+Codegen exige:
+```markdown
+### Estado: empty
+- Copy: "Voce ainda nao tem nenhum projeto. Comece criando um."
+- Icone: FolderPlus 48px text-muted-foreground.
+- CTA: "Criar primeiro projeto" (Button variant=primary).
+```
+
+### A3 — Error
+- Mensagem clara (nao "erro 500").
+- Acao de recovery (tentar de novo, voltar, contato).
+- Distincao: erro recuperavel vs nao-recuperavel.
+
+```markdown
+### Estado: error
+- Tipo recuperavel: toast variant=error + retry inline.
+- Tipo nao-recuperavel: tela full com copy + CTA voltar.
+```
+
+### A4 — Success (quando aplicavel)
+- Toast inline ou success state pos-form.
+- Auto-dismiss em 3-5s OU acao explicita do usuario.
+
+### A5 — Default
+- Estado normal, dados presentes.
+
+## B — Responsividade
+
+### Breakpoints obrigatorios
+- Mobile: <768px (preferencia: comeca daqui — mobile-first).
+- Tablet: 768-1024px.
+- Desktop: 1024-1920px.
+
+### Comportamentos esperados
+- Sidebar -> drawer no mobile.
+- Tabela -> cards no mobile.
+- Drawer right -> bottom sheet no mobile.
+- Tipografia escala (text-base mobile, text-lg desktop ou similar).
+
+### Codegen exige no plan
+```markdown
+### Responsividade
+- Mobile: lista vira cards verticais empilhados, sem hover.
+- Tablet: 2 colunas de cards.
+- Desktop: tabela tradicional com hover.
+```
+
+## C — Acessibilidade
+
+### Roles ARIA
+- `<button>` para acao -> nao usar `<div onClick>`.
+- `<dialog>` ou `role="dialog"` + aria-labelledby para modals.
+- `role="listbox"` + `role="option"` em selects custom.
+
+### Labels
+- Input sem `<label>` visivel: usar `aria-label`.
+- Icon-only button: `aria-label="Fechar"` obrigatorio.
+
+### Focus
+- Modal aberto: focus vai para primeiro elemento focavel.
+- Modal fechado: focus volta para trigger.
+- Tab order segue ordem visual.
+- Focus indicator distinto de hover (outline 2px ring-primary).
+
+### Contraste
+- AA: 4.5:1 texto, 3:1 UI.
+- Erro inline NAO so vermelho — adicionar icone/texto "Erro:".
+
+## D — Tokens do DS
+
+### Cores
+- OK: `bg-primary`, `text-foreground`, `border-border`.
+- Anti: `bg-[#3b82f6]`, `text-blue-500` quando primary existe.
+
+### Spacing
+- OK: `gap-2`, `p-4`, `mt-6`.
+- Anti: `gap-[7px]`, `p-[13px]`.
+
+### Typography
+- OK: `text-sm`, `font-semibold`, `leading-tight`.
+- Anti: `text-[13px]`, `tracking-[0.02em]` quando token existe.
+
+### Radius
+- OK: `rounded`, `rounded-md`, `rounded-lg`.
+- Anti: `rounded-[7px]`.
+
+### Excecoes permitidas (com justificativa)
+- Animacao especifica nao-mapeada: `[animation-delay:120ms]` OK.
+- Posicionamento dinamico: `top-[calc(100%+8px)]` OK.
+
+## E — Interacao
+
+### Trigger declaration
+Cada elemento interativo precisa:
+- Trigger: o que dispara (click, hover, focus, keypress, mount, query)
+- Acao: que callback/mutation roda
+- Resultado: qual estado muda + UI feedback
+
+### Edge cases obrigatorios
+- Double-click rapido em CTA -> debounce 300ms ou disabled durante mutation.
+- Mutation lenta (>3s) -> mostrar loading inline ou progress.
+- Mutation falha -> rollback ou error state com retry.
+- Concorrencia (2 usuarios editando) -> conflict resolution declarado.
+
+## Self-check rapido
+
+Antes de submeter tela para codegen:
+
+```
+[ ] A1 loading state declarado e visualmente coerente?
+[ ] A2 empty state existe + CTA primaria?
+[ ] A3 error state com recovery?
+[ ] B responsividade nos 3 breakpoints?
+[ ] C aria-label em icon buttons + focus visivel?
+[ ] D 0 valores hardcoded fora do DS?
+[ ] E todos os triggers tem acao + resultado + edge cases?
+```
+
+Falhou em algum -> NAO codar ainda. Volte ao plano.

package/.gos/libraries/visual-diff-lenses.md

@@ -0,0 +1,114 @@
+# Visual Diff Lenses
+
+> Referencia das 6 lenses usadas por `figma-print-diff` e `audit-screenshots`. Inspirado em Nielsen Heuristics + design-critique (uxdudu) + WCAG.
+
+## Lens 1 — Layout & hierarquia
+
+Pergunta-mestra: "A estrutura espacial bate?"
+
+Sub-checks:
+- Containers principais (sidebar, header, footer, main) presentes em ambos?
+- Ordem de filhos dentro de cada container coincide?
+- Proporcoes (sidebar 240px, main 1fr) coerentes?
+- Densidade visual (cards/lista) similar?
+
+Severity guide:
+- high: container ausente/extra
+- medium: ordem trocada
+- low: proporcao 10-20% diferente
+
+## Lens 2 — Tokens visuais
+
+Pergunta-mestra: "Cor, tipo, espacamento batem com o DS?"
+
+Sub-checks:
+- Cor de background dos blocos
+- Cor de texto (primary, secondary, muted)
+- Borders e radius
+- Tipografia (family, size, weight, line-height)
+- Spacing (padding/margin/gap)
+- Shadows e elevations
+
+Severity guide:
+- high: cor de acao primaria errada
+- medium: spacing 2x diferente
+- low: radius cosmetico
+
+## Lens 3 — Estados
+
+Pergunta-mestra: "Todos os estados estao implementados?"
+
+Sub-checks:
+- Loading (skeleton, spinner)
+- Empty (placeholder, CTA)
+- Error (mensagem, recovery)
+- Success (toast, inline)
+- Hover/Focus/Active
+- Disabled
+
+Severity guide:
+- high: empty/error nao implementado
+- medium: hover sem feedback
+- low: focus ring cosmetico
+
+## Lens 4 — Conteudo
+
+Pergunta-mestra: "Textos e visuais coincidem?"
+
+Sub-checks:
+- Textos literais (sem inventar traducao)
+- Icones (mesma lib, mesma variante)
+- Imagens (placeholder vs real)
+- Dados mockados (formato, plausibilidade)
+
+Severity guide:
+- high: copy errada que altera significado
+- medium: icone trocado
+- low: lorem ipsum esquecido
+
+## Lens 5 — Interacao (inferida do estatico)
+
+Pergunta-mestra: "Affordances batem?"
+
+Sub-checks:
+- Cursor pointer onde Figma mostra elemento "clicavel"
+- Botoes com aparencia de botao (nao texto plano)
+- Inputs com aparencia de input (border, placeholder)
+- Tooltips/popovers posicionados corretamente quando visiveis
+
+Severity guide:
+- high: botao primario sem aparencia de botao
+- medium: link disfarcado de texto
+- low: cursor em element nao-clicavel
+
+## Lens 6 — Acessibilidade visual
+
+Pergunta-mestra: "Acessivel ao olhar?"
+
+Sub-checks:
+- Contraste AA (4.5:1 texto, 3:1 UI components)
+- Toque minimo 44x44px em mobile
+- Focus indicator distinto de hover
+- Texto sem so cor (icone + cor para indicar erro)
+
+Severity guide:
+- high: contraste reprovado em texto principal
+- medium: toque <44px em mobile
+- low: focus mesmo cor que hover
+
+## Composicao das lenses
+
+Ordem fixa: 1 -> 2 -> 3 -> 4 -> 5 -> 6.
+
+Por que essa ordem?
+- Layout antes de token (sem layout, token nao importa).
+- Token antes de estado (estado depende de tokens corretos).
+- Estado antes de conteudo (conteudo so faz sentido com estado completo).
+- Interacao depois de conteudo (precisa ver afford).
+- A11y por ultimo (gate final).
+
+## Anti-patterns
+
+- Pular lens 3: time esquece estados, codegen sai sem loading/empty/error.
+- Inverter 1 e 2: comeca medindo cor e nao percebe que falta sidebar inteira.
+- Severity hyperinflation: tudo high -> nada e high.