ganbatte-os 0.2.37 → 0.2.41

package/.gos/skills/prd-from-intake/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: prd-from-intake
+description: >
+  Converte intake.md (saida de idea-intake) em PRD lean otimizado para LLM. Foco em problema,
+  persona, JTBD, telas-chave, criterios de aceite e metricas. NAO inclui decisoes tecnicas
+  (deixadas para adr-tech-decisions). Output: docs/prd/PRD-NNN-<slug>/prd.md.
+argument-hint: "<INTAKE-id> [--descartavel] [--lean|--full]"
+allowedTools: [Read, Glob, Grep, Bash, Write, Edit, AskUserQuestion]
+sourceDocs:
+  - templates/prdLeanTemplate.md
+use-when:
+  - tem-se um intake.md pronto e precisa do PRD
+  - usuario diz "transforma essa ideia em PRD"
+do-not-use-for:
+  - ideia ainda nao validada (rode idea-intake primeiro)
+  - decisoes tecnicas (use adr-tech-decisions)
+  - planejamento de tela (use plan-blueprint)
+metadata:
+  category: documentation
+---
+
+Voce esta executando como **Product Manager Lean** via skill `prd-from-intake`. Le um intake.md e produz PRD enxuto, otimizado para servir de contexto a outras skills (plan-blueprint, adr-tech-decisions, design-to-code).
+
+## Contrato
+
+1. Input obrigatorio: `INTAKE-id` (ex: INTAKE-007-agendamento-mae).
+2. Resolver path: `docs/intake/<INTAKE-id>/intake.md`. Ausente -> abortar.
+3. Modos:
+   - `--lean` (default): PRD em <500 palavras, somente o essencial.
+   - `--full`: PRD completo com riscos, dependencias, edge cases.
+4. Se `descartavel: true` no intake -> forca `--lean` automaticamente. Sobrescrever so com flag explicita.
+5. Output unico: `docs/prd/PRD-NNN-<slug>/prd.md`. NNN = ultimo PRD + 1.
+
+## Estrutura do PRD lean
+
+```markdown
+---
+prd_id: PRD-NNN-<slug>
+intake_ref: INTAKE-NNN-<slug>
+descartavel: <bool>
+status: pronto-para-adr
+created_at: <iso>
+---
+
+# <Titulo>
+
+## TL;DR (1 paragrafo, max 4 linhas)
+<problema + persona + solucao + metrica de sucesso, comprimido>
+
+## Quem usa
+<persona em 2 linhas>
+
+## Por que existe
+<problema em 2 linhas, citando 1 historia real do intake>
+
+## O que faz (3-7 bullets)
+- <feature 1>
+- <feature 2>
+
+## Telas-chave
+| # | Tela | Proposito | Inputs | Outputs |
+|---|------|-----------|--------|---------|
+| 1 | <nome> | <verbo + objeto> | <dado entrada> | <dado saida> |
+
+## Criterios de aceite (do nao-tecnico)
+- [ ] Usuario consegue <acao primaria> em menos de <X> passos
+- [ ] <criterio mensurivel>
+
+## Metrica de sucesso
+<copia da metrica humana do intake + 1 metrica quantitativa derivada>
+
+## NAO faz parte (escopo negativo)
+- <bullet>
+
+## Proximo passo
+- Rodar `*adr-tech-decisions PRD-NNN-<slug>` para definir arquitetura.
+```
+
+## Compressao automatica
+
+Se contagem de tokens do intake.md > 2000:
+1. Tentar usar `gos-compress` (skill wrapper sandeco) com rate=0.5 sobre intake.md antes de ler.
+2. Se `gos-compress` indisponivel (nao inicializado), usar fallback de leitura direta + summarizar antes de gerar PRD.
+
+## Regras criticas
+
+- **Zero tecnologia**: nao mencionar framework, banco, deploy. Sao decisoes do ADR.
+- **Compressao agressiva no lean**: se passou de 500 palavras, comprime ate caber.
+- **Anti-template**: nao copiar bullets do intake literal — sintetizar. PRD e nova obra, nao paraphrase.
+- **Marcar descartavel**: o flag se propaga ate o ADR, plan-blueprint e codegen — define se vale a pena ter testes E2E, CI/CD, rate limit, etc.
+
+## Input
+
+$ARGUMENTS

package/.gos/skills/prototype-orchestrator/SKILL.md

@@ -0,0 +1,120 @@
+---
+name: prototype-orchestrator
+description: >
+  Orquestra pipeline ideia-para-prototipo end-to-end: idea-intake -> prd-from-intake ->
+  adr-tech-decisions -> stitch/figma generate-design -> design-critique -> handoff para
+  design-to-code. Pensado para usuarios nao-tecnicos com MVP descartavel. Decision gates
+  entre fases para abortar cedo.
+argument-hint: "<frase da ideia ou 'continuar'> [--skip-figma] [--full-stack]"
+allowedTools: [Read, Glob, Grep, Bash, Write, Edit, AskUserQuestion]
+sourceDocs:
+  - skills/idea-intake/SKILL.md
+  - skills/prd-from-intake/SKILL.md
+  - skills/adr-tech-decisions/SKILL.md
+  - skills/figma-implement-design/SKILL.md
+  - skills/design-to-code/SKILL.md
+  - skills/figma-print-diff/SKILL.md
+use-when:
+  - usuario nao-tecnico chega com uma ideia e quer prototipo visivel
+  - ja existe intake mas usuario quer levar ate Figma+codigo
+  - preciso iterar de "ideia" ate "tela rodando" sem perder contexto entre fases
+do-not-use-for:
+  - tarefas tecnicas pontuais (use plan-blueprint direto)
+  - quando ja existe stack.md + PRD (entre direto via plan-blueprint)
+metadata:
+  category: orchestration
+---
+
+Voce esta executando como **Orquestrador Ideia-Prototipo** via skill `prototype-orchestrator`. Coordena 5 skills em sequencia com decision gates entre cada uma. Conduzido pelo `gos-master` para preservar comprehension gate cross-fase.
+
+## Pipeline
+
+```
+[ideia bruta]
+   |
+   v
+1. idea-intake -> intake.md  (gate: usuario valida resumo)
+   |
+   v
+2. prd-from-intake -> prd.md  (gate: usuario aprova TL;DR)
+   |
+   v
+3. adr-tech-decisions -> ADR + stack.md  (gate: usuario confirma decisoes tecnicas)
+   |
+   v
+4. (opcional) Stitch/Figma generate-design -> frames Figma  (gate: usuario aprova mockups)
+   |
+   v
+5. plan-blueprint por tela -> plan + tasks  (gate: validate-plan)
+   |
+   v
+6. design-to-code + figma-implement-design -> codigo
+   |
+   v
+7. figma-print-diff -> ajustes ate aprovacao visual
+```
+
+## Estado da orquestracao
+
+Persistido em `.gos-local/prototype-session.json`:
+
+```json
+{
+  "session_id": "proto-2026-05-09T14-22-03",
+  "slug": "<derivado da ideia>",
+  "current_phase": 3,
+  "phases": {
+    "1_intake": { "status": "done", "ref": "INTAKE-007-agendamento-mae" },
+    "2_prd": { "status": "done", "ref": "PRD-007-agendamento-mae" },
+    "3_adr": { "status": "in-progress", "ref": null },
+    "4_figma": { "status": "pending", "ref": null },
+    "5_plans": { "status": "pending", "refs": [] },
+    "6_codegen": { "status": "pending" },
+    "7_visual_qa": { "status": "pending" }
+  },
+  "started_at": "<iso>",
+  "updated_at": "<iso>"
+}
+```
+
+## Decision gates entre fases
+
+Cada gate usa `AskUserQuestion` com 3 opcoes:
+1. **Aprovar e seguir** -> avanca para proxima fase.
+2. **Iterar nesta fase** -> volta para a skill da fase atual com contexto adicional.
+3. **Abortar** -> grava sessao como `aborted` e devolve resumo.
+
+## Pre-flight
+
+1. Se `$ARGUMENTS == "continuar"`: ler `prototype-session.json`, retomar da fase atual.
+2. Senao: criar nova sessao + chamar fase 1 (idea-intake) com a frase da ideia.
+3. Verificar dependencias: skills `idea-intake`, `prd-from-intake`, `adr-tech-decisions` existem em `skills/`. Falta -> abortar.
+4. `--skip-figma` pula fase 4 (caso usuario queira ir direto para codigo).
+5. `--full-stack` forca perfil B/C no ADR (mesmo que descartavel).
+
+## Execucao
+
+Para cada fase pendente:
+1. Imprimir cabecalho `[fase N/7] <nome>`.
+2. Invocar skill correspondente via `gos-master` (com comprehension gate).
+3. Persistir `ref` no session.json apos sucesso.
+4. Aplicar decision gate.
+5. Avancar.
+
+## Compressao de contexto entre fases
+
+Para evitar inflacao de tokens (problema central do framework):
+- A cada fase, comprimir output da anterior via `gos-compress` rate=0.4 antes de passar para a proxima.
+- Manter snapshot integral em disco (`docs/intake/...`, `docs/prd/...`, etc.) — apenas o contexto in-memory e comprimido.
+- Se `gos-compress` indisponivel: usar resumo manual de 200 palavras + path do arquivo original.
+
+## Regras criticas
+
+- **Sempre perguntar (regra do dono)**: cada gate e obrigatorio. Nunca avancar fase sem confirmacao.
+- **Descartavel-first**: se intake marcou descartavel, pular Storybook, E2E, design system robusto.
+- **Anti-loop**: limite de 3 iteracoes por fase. Se exceder, sugerir abortar.
+- **Output rastreavel**: ao final, gerar `docs/prototypes/PROTO-NNN-<slug>/index.md` com links para todos os artefatos.
+
+## Input
+
+$ARGUMENTS

package/.gos/skills/registry.json

@@ -25,6 +25,17 @@
     { "slug": "progress-tracker", "path": "skills/progress-tracker/SKILL.md" },
     { "slug": "execute-plan", "path": "skills/execute-plan/SKILL.md" },
     { "slug": "validate-plan", "path": "skills/validate-plan/SKILL.md" },
-    { "slug": "audit-screenshots", "path": "skills/audit-screenshots/SKILL.md" }
+    { "slug": "audit-screenshots", "path": "skills/audit-screenshots/SKILL.md" },
+    { "slug": "idea-intake", "path": "skills/idea-intake/SKILL.md" },
+    { "slug": "prd-from-intake", "path": "skills/prd-from-intake/SKILL.md" },
+    { "slug": "adr-tech-decisions", "path": "skills/adr-tech-decisions/SKILL.md" },
+    { "slug": "prototype-orchestrator", "path": "skills/prototype-orchestrator/SKILL.md" },
+    { "slug": "gos-caveman", "path": "skills/gos-caveman/SKILL.md" },
+    { "slug": "gos-compress", "path": "skills/gos-compress/SKILL.md" },
+    { "slug": "figma-print-diff", "path": "skills/figma-print-diff/SKILL.md" },
+    { "slug": "ui-guardrails", "path": "skills/ui-guardrails/SKILL.md" },
+    { "slug": "cloudflare-pages-setup", "path": "skills/cloudflare-pages-setup/SKILL.md" },
+    { "slug": "typeform-form-pattern", "path": "skills/typeform-form-pattern/SKILL.md" },
+    { "slug": "timer-component-pattern", "path": "skills/timer-component-pattern/SKILL.md" }
   ]
 }

package/.gos/skills/timer-component-pattern/SKILL.md

@@ -0,0 +1,245 @@
+---
+name: timer-component-pattern
+description: >
+  Gera componente Timer (countdown) React + TS com state machine, persistencia,
+  atalhos de teclado, edicao inline, tema dark/light, controles via Lucide React.
+  Baseado em code-kata-timer adaptado para React.
+argument-hint: "<descricao do uso ou 'spec' para ver anatomia>"
+allowedTools: [Read, Glob, Grep, Bash, Write, Edit, AskUserQuestion]
+sourceDocs:
+  - libraries/timer-pattern-spec.md
+  - libraries/lucide-icons-policy.md
+  - libraries/ui-guardrails-checklist.md
+use-when:
+  - usuario pede pomodoro, code kata timer, countdown, contador regressivo
+  - precisa de timer com play/pause/reset/edit
+  - quer atalhos de teclado (Space, R, E)
+do-not-use-for:
+  - cronometro (countup) — variar via `mode: 'countup'` flag
+  - timer de polling (use TanStack Query refetchInterval)
+  - calendar/scheduler (use componente diferente)
+metadata:
+  category: ui-pattern
+---
+
+Voce esta executando como **Timer Pattern Generator** via skill `timer-component-pattern`. Gera componente React baseado em `libraries/timer-pattern-spec.md`.
+
+## Pre-flight
+
+1. AskUserQuestion:
+   - "Tempo default em segundos? (ex: 30 para code kata, 1500 para pomodoro 25min)"
+   - "Som ao terminar? (Web Audio beep / arquivo / nenhum)"
+   - "Tema dark/light togglavel? (sim / so dark / so light)"
+   - "Persistir entre sessoes? (localStorage / nao)"
+   - "Atalhos teclado? (sim default / nao)"
+   - "Editar tempo inline? (sim / nao — botao edit aparece se sim)"
+2. Validar stack: `lucide-react`, shadcn `Button`. Senao -> instruir instalacao.
+
+## Arquivos gerados
+
+```
+src/components/timer/
+  Timer.tsx                 # componente principal
+  hooks/
+    useTimer.ts             # hook com state machine
+    useTimerKeyboard.ts     # atalhos
+  utils/
+    formatTime.ts           # MM:SS
+    beep.ts                 # Web Audio (opcional)
+  types.ts                  # TimerStatus, TimerSettings
+```
+
+## Componente principal
+
+```tsx
+import { useEffect } from 'react';
+import { Play, Pause, RotateCcw, Pencil, Activity } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useTimer } from './hooks/useTimer';
+import { useTimerKeyboard } from './hooks/useTimerKeyboard';
+import { TimerStatus, isRunning } from './types';
+import { formatTime } from './utils/formatTime';
+
+interface TimerProps {
+  defaultSeconds?: number;
+  onComplete?: (duration: number) => void;
+  enableEdit?: boolean;
+  enableKeyboard?: boolean;
+}
+
+export function Timer({
+  defaultSeconds = 30,
+  onComplete,
+  enableEdit = true,
+  enableKeyboard = true,
+}: TimerProps) {
+  const timer = useTimer(defaultSeconds);
+
+  useTimerKeyboard({
+    enabled: enableKeyboard,
+    status: timer.status,
+    actions: timer,
+  });
+
+  useEffect(() => {
+    function onDone(e: Event) {
+      const evt = e as CustomEvent<{ duration: number }>;
+      onComplete?.(evt.detail.duration);
+    }
+    window.addEventListener('timer:done', onDone);
+    return () => window.removeEventListener('timer:done', onDone);
+  }, [onComplete]);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-8 py-12">
+      {/* Indicator */}
+      {isRunning(timer.status) && (
+        <Activity className="h-6 w-6 text-primary animate-pulse" aria-label="Em execucao" />
+      )}
+
+      {/* Display */}
+      {timer.status === TimerStatus.EDITING ? (
+        <input
+          type="number"
+          autoFocus
+          defaultValue={timer.seconds}
+          className="text-7xl md:text-9xl font-mono font-bold tabular-nums bg-transparent w-72 text-center outline-none border-b-2 border-primary"
+          onBlur={(e) => {
+            const v = Number(e.currentTarget.value);
+            if (v > 0) timer.setSeconds(v);
+            timer.setStatus(TimerStatus.STOPPED);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') e.currentTarget.blur();
+            if (e.key === 'Escape') timer.setStatus(TimerStatus.STOPPED);
+          }}
+        />
+      ) : (
+        <div
+          className="text-7xl md:text-9xl font-mono font-bold tabular-nums"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {formatTime(timer.seconds)}
+        </div>
+      )}
+
+      {/* Controls */}
+      <div className="flex gap-3">
+        {timer.status === TimerStatus.RUNNING ? (
+          <Button onClick={timer.pause} size="lg" aria-label="Pausar">
+            <Pause className="h-5 w-5" />
+          </Button>
+        ) : (
+          <Button
+            onClick={timer.start}
+            size="lg"
+            disabled={timer.seconds === 0}
+            aria-label="Iniciar"
+          >
+            <Play className="h-5 w-5" />
+          </Button>
+        )}
+
+        <Button
+          onClick={() => timer.reset()}
+          size="lg"
+          variant="outline"
+          aria-label="Resetar"
+        >
+          <RotateCcw className="h-5 w-5" />
+        </Button>
+
+        {enableEdit && (
+          <Button
+            onClick={() => timer.setStatus(TimerStatus.EDITING)}
+            size="lg"
+            variant="outline"
+            disabled={isRunning(timer.status)}
+            aria-label="Editar tempo"
+          >
+            <Pencil className="h-5 w-5" />
+          </Button>
+        )}
+      </div>
+
+      {/* Hint atalhos */}
+      {enableKeyboard && (
+        <p className="text-xs text-muted-foreground">
+          Espaco play/pause - R reset - E editar
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+## State machine (types.ts)
+
+Conforme `libraries/timer-pattern-spec.md`:
+
+```ts
+export const TimerStatus = {
+  STOPPED: 'STOPPED',
+  COUNTDOWN: 'COUNTDOWN',
+  RUNNING: 'RUNNING',
+  PAUSED: 'PAUSED',
+  EDITING: 'EDITING',
+} as const;
+
+export type TimerStatusType = typeof TimerStatus[keyof typeof TimerStatus];
+
+export const isRunning = (s: TimerStatusType) =>
+  s === TimerStatus.RUNNING || s === TimerStatus.COUNTDOWN;
+```
+
+## Hook useTimer (com persistencia opcional)
+
+Detalhe completo em `libraries/timer-pattern-spec.md`. Pontos criticos:
+- `setInterval` com cleanup em `useEffect` return + ao parar.
+- Ao restaurar `localStorage`: SEMPRE forcar status STOPPED (evita timer fantasma).
+- Dispatch `CustomEvent('timer:done')` ao zerar.
+
+## Estados visuais
+
+- **Loading**: NA.
+- **Empty**: tempo `00:00` -> Play disabled, mensagem "Tempo zerado, edite para comecar".
+- **Error**: NA em runtime.
+- **Running**: `Activity` icon pulsando + `animate-pulse` no display opcional.
+- **Done**: tela ou toast com `CheckCircle2` quando atinge 0.
+
+## Som ao terminar (utils/beep.ts)
+
+Web Audio API (sem assets):
+```ts
+export function beep(frequency = 800, duration = 200) {
+  const ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
+  const osc = ctx.createOscillator();
+  osc.connect(ctx.destination);
+  osc.frequency.value = frequency;
+  osc.start();
+  setTimeout(() => { osc.stop(); ctx.close(); }, duration);
+}
+```
+
+Disparado em `useEffect` quando `seconds === 0 && previousSeconds !== 0`.
+
+## Modos disponiveis
+
+Flags do componente:
+- `mode="countdown"` (default) — diminui ate 0.
+- `mode="countup"` — sobe a partir de 0 (cronometro).
+- `mode="pomodoro"` — alterna 25min foco / 5min pausa.
+
+Cada modo so muda a logica do hook, UI e controles ficam iguais.
+
+## Anti-patterns embutidos (warning ao usuario)
+
+- "Sem cleanup de setInterval" -> recusar — gera memory leak.
+- "Restaurar status RUNNING do localStorage" -> recusar — timer fantasma.
+- "Emoji nos botoes" -> recusar — usar Lucide.
+- "Sem `tabular-nums`" -> warning — digitos pulam visualmente.
+
+## Input
+
+$ARGUMENTS

package/.gos/skills/typeform-form-pattern/SKILL.md

@@ -0,0 +1,210 @@
+---
+name: typeform-form-pattern
+description: >
+  Gera estrutura de form passo-a-passo estilo Typeform (uma pergunta por vez), com
+  questions[] tipadas, hooks de navegacao, validacao Zod, animacao, progress bar e
+  estados visuais. Lucide React (zero emoji). React + TS + Tailwind + shadcn.
+argument-hint: "<descricao do form ou 'spec' para ver a anatomia>"
+allowedTools: [Read, Glob, Grep, Bash, Write, Edit, AskUserQuestion]
+sourceDocs:
+  - libraries/typeform-pattern-spec.md
+  - libraries/lucide-icons-policy.md
+  - libraries/ui-guardrails-checklist.md
+use-when:
+  - usuario pede form de cadastro/onboarding/quiz/lead/survey
+  - precisa coletar dados em multiplas etapas com baixo cognitive load
+  - mobile-first form
+do-not-use-for:
+  - settings page com varios campos editaveis simultaneamente (use form tradicional)
+  - input simples 1-2 campos (overhead nao compensa)
+metadata:
+  category: ui-pattern
+---
+
+Voce esta executando como **Typeform Pattern Generator** via skill `typeform-form-pattern`. Gera estrutura completa baseada em `libraries/typeform-pattern-spec.md`.
+
+## Pre-flight
+
+1. Pergunta ao usuario:
+   - "Quantas perguntas previstas?" (estimar — pode evoluir)
+   - "Salvar progresso entre sessoes? (sessionStorage / Supabase / nao)"
+   - "Tem tela de Welcome inicial? E de Review final?"
+   - "Submit final manda pra Supabase, Workers, ou apenas mostra resultado?"
+2. Validar stack: deve existir `tailwind.config`, `lucide-react` no package.json, shadcn `Button`, `Input`, `Card`, `Label`. Senao -> propor instalar.
+3. Aplicar `libraries/lucide-icons-policy.md` — zero emoji, todos icones via Lucide.
+
+## Geracao
+
+### Arquivos criados
+
+```
+src/components/<feature>/
+  questions.ts              # tipos + array de questions
+  TypeformContainer.tsx     # estado + navegacao
+  questions/
+    WelcomeQuestion.tsx
+    TextQuestion.tsx
+    NumberQuestion.tsx
+    ChoiceQuestion.tsx
+    MultiChoiceQuestion.tsx
+    ReviewQuestion.tsx
+  hooks/
+    useTypeformFlow.ts
+  schemas/
+    formSchema.ts           # Zod
+```
+
+### Estrutura base de `questions.ts`
+
+```ts
+import type { ComponentType } from 'lucide-react';
+import * as Icons from 'lucide-react';
+
+export type QuestionType =
+  | 'welcome' | 'text' | 'number' | 'choice' | 'multiChoice' | 'date' | 'review';
+
+export interface QuestionOption {
+  value: string;
+  label: string;
+  description?: string;
+  iconName?: keyof typeof Icons;
+}
+
+export interface Question<F = Record<string, unknown>> {
+  id: string;
+  type: QuestionType;
+  field: keyof F | null;
+  question: string | ((data: F) => string);
+  description?: string;
+  placeholder?: string;
+  suffix?: string;
+  decimal?: boolean;
+  buttonText?: string;
+  options?: QuestionOption[];
+  validate?: (value: unknown, data: F) => string | null;
+  showWhen?: (data: F) => boolean;
+}
+
+// Exemplo:
+export const questions: Question<FormData>[] = [
+  {
+    id: 'welcome',
+    type: 'welcome',
+    field: null,
+    question: 'Vamos comecar',
+    description: 'Sera rapido — leva 2 minutos.',
+    buttonText: 'Comecar',
+  },
+  {
+    id: 'name',
+    type: 'text',
+    field: 'name',
+    question: 'Como podemos te chamar?',
+    placeholder: 'Seu nome',
+    validate: (v) => (!v ? 'Campo obrigatorio' : null),
+  },
+  // ...
+];
+```
+
+### Hook `useTypeformFlow`
+
+Encapsula:
+- `currentIndex`, `setCurrentIndex`
+- `data`, `updateField`
+- `activeQuestions` (filtrado por `showWhen`)
+- `currentQ`
+- `handleNext` (com validacao)
+- `handlePrevious`
+- `handleKeyPress` (Enter, Esc)
+- `progress` (% concluido)
+- Persistencia opcional (sessionStorage ou Supabase)
+
+### Container
+
+```tsx
+export function TypeformContainer({ onComplete }: Props) {
+  const flow = useTypeformFlow(questions);
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <ProgressBar value={flow.progress} />
+
+      <main className="flex-1 flex items-center justify-center px-4">
+        <div className={`max-w-2xl w-full transition-all duration-300 ${
+          flow.isAnimating ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0'
+        }`}>
+          <QuestionRenderer question={flow.currentQ} flow={flow} />
+        </div>
+      </main>
+
+      <NavButtons flow={flow} />
+    </div>
+  );
+}
+```
+
+### Estados visuais (UI guardrails)
+
+Aplicar `libraries/ui-guardrails-checklist.md`:
+
+- **Loading** (submitting): botao final disabled + `<Loader2 className="h-4 w-4 animate-spin mr-2" />`.
+- **Empty** (questions = []): tela "Nenhuma pergunta configurada" com `<AlertCircle />`.
+- **Error**: inline acima do CTA primario.
+- **Success**: tela final com `<CheckCircle2 className="h-16 w-16 text-success" />` + redirect/proximos passos.
+- **Skeleton**: nao aplicavel (form nao tem fetch inicial geralmente).
+
+### Validacao com Zod
+
+```ts
+// schemas/formSchema.ts
+import { z } from 'zod';
+
+export const formSchema = z.object({
+  name: z.string().min(2, 'Minimo 2 caracteres'),
+  email: z.string().email('Email invalido'),
+  age: z.coerce.number().int().min(13, 'Minimo 13 anos').max(120),
+  // ...
+});
+
+export type FormData = z.infer<typeof formSchema>;
+```
+
+Chamar no submit final:
+```ts
+const result = formSchema.safeParse(data);
+if (!result.success) {
+  // mostrar primeiro erro inline
+}
+```
+
+### Acessibilidade obrigatoria
+
+- `aria-live="polite"` no container que troca de question.
+- `aria-label` em botoes voltar / Lucide-icon-only.
+- `useEffect` foca o input ao mudar de question.
+- Roles ARIA em listas de opcoes (`role="radiogroup"` para choice).
+
+### Atalhos teclado
+
+- `Enter` -> next.
+- `Esc` ou `Backspace` (em campo vazio) -> previous.
+- Em multiChoice: setas para navegar opcoes, espaco para toggle.
+
+## Customizacao por usuario
+
+Apos gerar estrutura base, AskUserQuestion:
+1. "Cor primaria? (default: shadcn primary)"
+2. "Animacao de transicao? (fade / slide / nenhuma)"
+3. "Progress bar: top, bottom, ou nao?"
+4. "Permite voltar e editar respostas? (sim/nao)"
+
+## Anti-patterns embutidos (gera com warning se usuario insistir)
+
+- "Quero todas as perguntas em uma tela" -> form tradicional, nao typeform-pattern.
+- "Sem progress bar" -> warning, mas gera (UX ruim em mobile).
+- "Emoji nas opcoes" -> recusar, usar Lucide.
+
+## Input
+
+$ARGUMENTS