mobile-pwa-usabilitylisted
Install: claude install-skill parisgroup-ai/imersao-ia-setup
# Mobile PWA Usability
Guia para criar interfaces mobile-first em PWAs React/Next.js com foco em usabilidade real.
## Quando Usar
**Triggers automáticos:**
- Componentes React (`.tsx`, `.jsx`)
- Layouts e páginas (`app/`, `pages/`)
- Configurações PWA (`manifest.json`, `manifest.ts`, `next.config.js`)
- CSS/Tailwind (`.css`, `.scss`, `tailwind.config.js`)
- Service workers
## Checklist Crítico (Bloqueante)
**PARE se qualquer item falhar. Corrija antes de continuar.**
| Item | Regra | Como Verificar |
|------|-------|----------------|
| Touch targets | Mínimo 44x44px | `min-h-[44px] min-w-[44px]` em buttons/links |
| Font size inputs | Mínimo 16px | `text-base` ou `text-[16px]` - previne zoom iOS |
| Viewport | `width=device-width, initial-scale=1` | Em `layout.tsx` ou `<head>` |
| Safe areas | Suporte a notch/islands | `pb-[env(safe-area-inset-bottom)]` |
| Contraste | WCAG AA (4.5:1 texto) | Verificar cores primárias |
| Tap delay | Sem delay 300ms | `touch-manipulation` em elementos interativos |
| Horizontal scroll | Não permitido | `overflow-x-hidden` no root |
### Viewport para Next.js 14+
```tsx
// app/layout.tsx
import { Viewport } from 'next';
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 5,
userScalable: true,
viewportFit: 'cover', // Para safe areas
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
{ media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
],
};
``