Auditoría mobile UI/UX para proyectos Next.js. Use when: revisar responsive, analizar pantalla mobile, detectar problemas UX táctil, auditar componentes, mejorar mobile first, revisar breakpoints, espaciado, tipografía, jerarquía visual, accesibilidad, tap targets, card views, formularios mobile, headers, navbars, modales, grids, filtros, listados, scroll, consistencia de diseño.
Auditoría profesional de experiencia mobile para proyectos Next.js con Tailwind CSS y shadcn/ui.
Antes de revisar componentes individuales, verificar si hay problemas de raíz:
layout.tsx, main-layout.tsx, globals.cssuseIsMobile() hook? ¿Los breakpoints son coherentes (sm, md, lg)?p-6 fijo o responsive p-3 sm:p-6?Si se detecta un problema sistémico (ej: padding global excesivo, falta de card views mobile), priorizarlo antes de tocar componentes.
Para cada pantalla o componente, evaluar:
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3)md:hidden / hidden md:block)grid-cols-1 sm:grid-cols-2)p-3 sm:p-6 en vez de p-6 fijo)gap apropiado entre elementos? (no demasiado apretado ni demasiado suelto)p-4 sm:p-6)text-2xl sm:text-3xl)text-sm, evitar text-[10px] para contenido)text-muted-foreground sobre bg-card)h-10 = 40px mínimo aceptable)h-8 w-8 mín para botones icon-only)text-base en inputs? (previene zoom en iOS)aria-label cuando no tienen texto visible?focus-visible:ring-2)<nav>, <main>, <section>, <header>)sr-only)md: = 768px típicamente)Para cada problema encontrado, reportar con este formato:
**Problema**: [Descripción concreta]
**Impacto en mobile**: [Por qué afecta la experiencia]
**Mejora recomendada**: [Qué hacer]
**Código sugerido**: [Snippet con el fix]
**Mejoras futuras**: [Opcional — qué más se podría mejorar]
Clasificar hallazgos por severidad:
{/* Mobile */}
<div className="md:hidden space-y-2">
{items.map((item) => (
<div key={item.id} className="flex items-center gap-3 rounded-lg border px-3 py-2.5">
{/* Datos resumidos */}
</div>
))}
</div>
{/* Desktop */}
<div className="hidden md:block">
<Table>...</Table>
</div>
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight">Título</h1>
<div className="flex flex-1 flex-col p-3 sm:p-6">
<DialogContent className="w-[calc(100%-2rem)] max-w-lg">