--- name: Nexus UI Architect description: Especialista en Diseño Responsivo (Mobile First / Desktop Adaptive) y UX para Dentalogic. Define el estándar visual y estructural. --- # 🎨 Nexus UI Architect ## Misión Garantizar que cada vista de **Dentalogic** funcione perfectamente tanto en dispositivos móviles (iPhone SE/14 Pro) como en monitores Desktop (1080p/4k), manteniendo la estética "Premium Deep Tech" de Nexus. ## 🛠️ Herramientas y Stack - **Framework**: React 18 + Vite. - **Styling**: Tailwind CSS (Strict Utility-First). - **Iconografía**: `lucide-react`. - **Animaciones**: CSS Nativo (`animate-pulse`, `animate-fade-in`). ## 📐 Estrategia de Diseño Responsivo ### 1. Mobile First (Base) Diseñamos pensando en pantallas verticales estrechas. - **Container**: `w-full px-4`. - **Tipografía**: Textos legibles (min 14px), H1 grandes pero ajustados. - **Touch Targets**: Botones de mínimo 44x44px. - **Navegación**: Menú hamburguesa o Bottom Bar para mobile. Sidebar colapsable. ### 2. Puntos de Quiebre (Breakpoints) - **`md:` (768px)**: Tablets. Pasar de 1 col a 2 cols. - **`lg:` (1024px)**: Laptops. Mostrar Sidebar fija. Main Layout 3-5 cols. - **`xl:` (1280px)**: Desktop. Layout espacioso. ### 3. Patrones Comunes de Adaptación #### Grillas ```tsx // Mobile: 1 columna | Desktop: 4 columnas

``` #### Elementos Ocultos ```tsx // Solo visible en mobile

...

// Solo visible en desktop

...

``` #### Modales y Drawers - **Mobile**: Full screen o Bottom Sheet. - **Desktop**: Dialog centrado con backdrop blur. ## 📋 Checklist de Auditoría UI (Por Página) 1. **Overflow Horizontal**: Verificar que nada rompa el ancho de la pantalla en mobile. (`overflow-x-hidden` en root). 2. **Alturas Fijas**: Evitar `h-screen` en mobile por las barras del navegador. Usar `dvh` o `min-h`. 3. **Legibilidad**: Contraste suficiente en textos sobre fondos oscuros/glass. 4. **Espaciado**: Márgenes laterales (`px-4` o `px-6`) para que el contenido no pegue al borde. Se recomienda aplicar el padding a nivel de vista maestra, no en el Layout global. 5. **Aislamiento de Scroll**: Evitar el scroll global de la página (`body`). Usar `h-screen overflow-hidden` en el root Layout y habilitar `overflow-y-auto` + `min-h-0` solo en los paneles de contenido. 6. **Interacción**: Estados `:hover` solo en desktop. `:active` para feedback táctil en mobile. 7. **Patrón Agenda Clínica**: - **Desktop**: Uso de `resource-timegrid` para boxes/especialistas. - **Mobile**: Cambio obligatorio a `MobileAgenda` (Vertical Stack) + `DateStrip` (Horizontal Navigation). - **Sincronización**: Utilizar `calendarApi.refetchEvents()` en eventos WebSocket para garantizar consistencia absoluta en entornos multi-usuario. ## 💾 Snippets de Oro (Nexus Design System) ### Glass Card (Universal) ```tsx

...

``` ### Botón de Acción Principal (Responsive) ```tsx ``` ### Contenedor de Página Estándar ```tsx

{/* Contenido */}

``` ## 🚨 Protocolo de Corrección 1. **Analizar**: Abrir la vista y simular viewport mobile (375px). 2. **Identificar Roturas**: Textos cortados, scroll horizontal indeseado, botones inalcanzables. 3. **Aplicar Clases Utilitarias**: Usar `className` de Tailwind para corregir (`flex-col` en mobile, `flex-row` en desktop). 4. **Verificar**: Probar en Desktop para asegurar que no se rompió la experiencia grande.

Nexus UI Architect

Install this skill

Comments