pwa-auditlisted

# PWA Audit Scanner que detecta violacoes de usabilidade mobile-first em componentes React/TSX. ## Diferenca do `mobile-pwa-usability` | Skill | Proposito | |-------|-----------| | `mobile-pwa-usability` | **Guia** — checklist para aplicar ao construir componentes | | `pwa-audit` | **Scanner** — busca violacoes em codigo existente | ## Quando Usar - Apos criar/modificar multiplos componentes interativos - Auditoria periodica de compliance PWA - Sprint de revisao mobile-first (como o sprint PWA Review) - Antes de release que afeta componentes de UI ## Criterios de Auditoria | Criterio | Regra | Padrao Correto | Violacao | |----------|-------|----------------|----------| | Touch targets | min 44x44px | `min-h-[var(--touch-target-min)]` | `h-6`, `h-8`, `p-1`, `p-1.5` em botoes | | Font size inputs | min 16px | `text-base` | `text-sm`, `text-xs` em `<input>`, `<textarea>`, `<select>` | | Touch manipulation | Eliminar tap delay | `touch-manipulation` | Ausencia em elementos clicaveis | | Search inputs | Semantica mobile | `type="search"` + `inputMode="search"` | `type="text"` em campos de busca | | Safe areas | Suporte notch | `env(safe-area-inset-*)` | Elementos fixos sem safe area | ## Procedimento de Scan ### Fase 1: Definir Escopo Determinar quais arquivos auditar: ```bash # Escopo completo (todos os componentes interativos) find src -name "*.tsx" | grep -v __tests__ | grep -v '.test.' | grep -v '.stories.' # Por layer find src/primitives -name "*.tsx" | grep -v __