UI Max

¿Qué hace UI Max?

Prioriza la usabilidad del producto sobre los efectos decorativos. Elige el sistema coherente más simple que satisfaga el requisito; no acumules librerías de componentes.

Comienza con el producto

Antes de cambiar código:

1. Inspecciona el framework, router, sistema de CSS, librería de componentes, librerías de iconos y animaciones, stack de formularios, tokens de diseño, modo oscuro y patrones establecidos.
2. Define el objetivo del usuario, el flujo de trabajo principal, la jerarquía de información, las acciones primarias y secundarias, los estados requeridos, las superficies responsivas y el comportamiento del teclado.
3. Reutiliza en este orden: componentes locales, primitivas del sistema de diseño existente, shadcn/ui, Radix UI, 21st.dev, una librería de mejora especializada, implementación personalizada.
4. Mantén un sistema de UI estable existente. Nunca introduzcas un sistema completo competidor por un componente atractivo.

Elige una base

Para nuevas interfaces de producto en React, usa por defecto:

React + TypeScript + Tailwind CSS
shadcn/ui -> Primitivas de Radix UI
Iconos Lucide
Motion para React solo donde sea útil
React Hook Form + Zod para formularios sustanciales
TanStack Table solo para comportamiento avanzado de tablas

No fuerces este stack en proyectos con un sistema establecido o en proyectos Vue/Svelte. Usa librerías nativas del ecosistema allí.

Clasifica la superficie antes de seleccionar adiciones:

• UI core del producto: shadcn/ui + Radix UI + Tailwind CSS.
• UI de producto AI: añade Cult UI solo para patrones reales de flujo de trabajo de IA; usa Motion Primitives para transiciones moderadas.
• Página de marketing: usa 21st.dev para la estructura, Magic UI selectivamente, y Aceternity solo para secciones genuinamente de alto impacto.
• Aplicación con muchos datos: añade TanStack Table cuando la ordenación, filtrado, paginación, selección, visibilidad, virtualización o modelos de datos complejos lo justifiquen.
• Micro-interacción: usa Motion Primitives o Motion. Usa UIverse solo después de una revisión de accesibilidad y mantenibilidad.

Lee references/component-selection.md al elegir, instalar u obtener librerías/componentes, comparar alternativas o investigar patrones visuales.

Implementa de forma coherente

Normaliza cada componente reutilizado o copiado según:

• tokens de color semánticos del proyecto
• escalas de tipografía, espaciado, radio y sombra
• familia de iconos
• convenciones de accesibilidad
• comportamiento responsivo
• temas claro y oscuro

Usa tokens semánticos en lugar de valores codificados dispersos. Mantén los controles relacionados cerca; separa secciones no relacionadas; evita tarjetas anidadas injustificadas; usa listas/tablas para comparación y tarjetas para elementos individualmente accionables y heterogéneos. Mantén las acciones primarias obvias y las acciones destructivas lejos de las acciones rutinarias.

Usa una fuente de interfaz y una familia de iconos, a menos que la marca requiera lo contrario. Usa movimiento solo para comunicar estado, jerarquía, continuidad, causa/efecto, progreso o foco. Respeta prefers-reduced-motion.

Lee references/design-standards.md antes de una implementación visual sustancial, trabajo responsivo, diseño de estados, formularios, tablas o trabajo de accesibilidad.

Cubre estados reales

Para UI asíncrona o basada en datos, considera:

• carga inicial y actualización en segundo plano
• resultados vacíos y sin coincidencias de búsqueda
• éxito, advertencia, error y fallo parcial
• estados deshabilitados y sin conexión
• permisos o integraciones faltantes
• datos obsoletos

Prefiere esqueletos cuando la estructura es conocida. Haz que los errores digan qué falló, por qué cuando se sepa, si el trabajo se conserva y qué lo resuelve. Nunca uses datos simulados sin sentido, análisis falsos, actividad de agente fabricada o controles no funcionales en un producto terminado.

Limpia la UI existente

Audita duplicación, espaciado, colores, tipografía, variantes, iconos, diseño anidado, utilidades repetidas, capacidad de respuesta, accesibilidad, código/dependencias no utilizados, sobrecarga de animación y estados faltantes.

Consolida primitivas repetidas o que contienen comportamiento, como botones, entradas, insignias de estado, diálogos, menús, pestañas, encabezados de página, estados vacíos/error/carga, elementos de barra lateral y filas de proyecto. No abstracts el marcado de una sola vez sin un beneficio de consistencia, lógica, reutilización o prueba.

Tokeniza valores repetidos. Elimina envoltorios innecesarios, tarjetas anidadas, divisores decorativos, etiquetas repetidas, acciones/estados redundantes, descripciones excesivas y movimiento injustificado.

Valida la salida renderizada

Verifica:

• HTML semántico, nombres accesibles, etiquetas, orden de tabulación lógico, operación con teclado, foco en diálogos, foco visible y contraste
• estados de carga, vacío, deshabilitado, error, éxito, texto largo y confirmación destructiva
• diseños estrechos y anchos sin recortes, tablas ilegibles, desplazamiento de diseño o desbordamiento horizontal
• comportamiento de movimiento reducido, temas claro/oscuro y navegación responsiva
• formateador, linter, TypeScript, pruebas, compilación de producción y salida de consola

Prueba a 320, 375, 768, 1024, 1280 y 1440 px cuando sea relevante. Para extensiones de navegador, también prueba anchos de ventana emergente alrededor de 320–420 px y paneles laterales alrededor de 320–600 px.

Inspecciona la UI realmente renderizada en anchos estrechos y anchos antes de afirmar que está completa. Usa un bucle de capturas de pantalla o el flujo de trabajo de validación visual existente del proyecto; confirma las superficies específicas de la plataforma en el objetivo real.

Informa del trabajo de UI

Cuando se te pida diseñar o reconstruir una página, proporciona secciones concisas para:

1. Interpretación del producto: objetivo, flujo de trabajo principal, información clave, acción principal.
2. Plan de componentes: estructura, componentes reutilizables, base, adiciones especializadas, comportamiento responsivo, estados importantes.
3. Implementación: código funcional en el stack existente.
4. Validación: accesibilidad, capacidad de respuesta, estados, comportamiento del teclado, consistencia de tokens de diseño y revisión visual renderizada.

No devuelvas un catálogo de librerías a menos que el usuario solicite opciones.