--- name: mobile-pwa-usability description: "Use when building or modifying React/Next.js components, pages, layouts, PWA configurations, or CSS/Tailwind files - enforces mobile usability standards with mandatory checks for critical issues (touch targets, viewport, safe areas, accessibility) and recommendations for PWA optimization (manifest, service worker, offline support)" version: 1.0.0 author: gustavo tags: [mobile, pwa, usability, ui] --- # 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 `` | | 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' }, ], }; ``` ### Safe Areas (Notch/Dynamic Island) ```tsx // Para elementos fixos no bottom