kennedys0/taste-style-enterprise

Usa este skill solo después de que un usuario elija explícitamente o una configuración de proyecto confirmada lo especifique. Para solicitudes de UI nuevas no explicadas, usa un selector de estilo como estilo: enterprise en lugar de decidir el gusto del usuario aquí. Las anulaciones existentes de marca, accesibilidad y usuario prevalecen sobre todos los ejemplos a continuación. La siguiente guía de estilo no es un permiso para comenzar a codificar UI antes de la selección de estilo.

Pack de estilo: Enterprise / Data-first

ID: enterprise
Firma: Paneles operativos densos en información, alineación de datos tabulares, tokens de estado semánticos, productividad mediante teclado y arquitectura de flujo de trabajo confiable.

Este es un pack de estilo, no un valor predeterminado obligatorio. Cárgalo solo después de una selección explícita o de un estilo de proyecto aplicable confirmado. Las instrucciones del proyecto pueden anular elecciones individuales. Preserva la accesibilidad, la utilidad y las restricciones de marca. Las fuentes son sugerencias, no dependencias requeridas. Una plantilla de tarjeta de consumo con 3 números KPI falsos y un gráfico circular decorativo no califica como Enterprise Data-first.

Buena opción / Compensaciones

• Funciona bien para: Plataformas B2B SaaS, consolas de administración operativas, monitores de infraestructura en la nube, portales fintech y de trading, backends de logística y cadena de suministro, y herramientas de productividad intensivas en datos.
• Ten cuidado con: Páginas de aterrizaje de marketing de consumo donde el ritmo narrativo y la marca visual emocional tienen prioridad sobre el escaneo tabular denso.
• Direcciones de referencia:
  • Consola en la nube moderna (estilo Linear / Stripe / Vercel): Base neutra de pizarra nítida (#0F1117 oscuro o #F9FAFB claro), filas de tabla compactas de 36 px, cifras tabulares (font-variant-numeric: tabular-nums), divisores de línea finos (#E5E7EB o #262933) y tokens de estado semánticos.
  • Escritorio de operaciones de alta densidad: Escritorio blanco limpio con filas compactas de 32 px, barras de búsqueda y filtro con atajos de teclado (⌘K), encabezados de tabla fijos y paneles maestro-detalle responsivos.

Puerta de fidelidad de datos empresariales — obligatoria

Antes de considerar completa una página empresarial, la ventana inicial debe leerse visiblemente como un panel de datos funcional, denso y profesional. Si un usuario eligió este estilo, una plantilla de consumo sobredimensionada con tarjetas de métricas decorativas y cero estructura tabular escaneable es un FRACASO directo.

Una implementación empresarial data-first exitosa demuestra todos los siguientes elementos:

1. Arquitectura tabular densa en información: Los registros y entidades principales se presentan en tablas de datos estructuradas y escaneables o listas maestro-detalle compactas con alturas de fila consistentes (32px–40px) y encabezados de columna explícitos.
2. Numerales tabulares y alineación al ras: Todos los números, montos financieros, métricas y marcas de tiempo aplican font-variant-numeric: tabular-nums. Las columnas numéricas se alinean estrictamente a la derecha; las columnas de texto se alinean a la izquierda.
3. Tokens de estado semánticos con contraste legible: Los indicadores de estado (Saludable, Degradado, Fallido, Pendiente) usan píldoras de token semántico calibradas con texto oscuro accesible sobre fondos tintados suaves (p. ej., Éxito: fondo #ECFDF5 con texto #065F46, que cumple WCAG AA 4.5:1).
4. Facilidades de productividad y atajos: Las barras de búsqueda tienen sugerencias de activación por teclado (⌘K o /), los encabezados de tabla tienen indicadores de ordenación (▲/▼) y las barras de acción por lotes aparecen al seleccionar registros.
5. Integridad de estado veraz: Las tablas incluyen barras de paginación reales (mostrando Mostrando 1–25 de 1,420 elementos), manejo responsivo de desplazamiento horizontal y estados vacío/carga/error dedicados.

Prueba de primera ventana: En una captura de pantalla de escritorio, identifica la tabla de datos densa, los encabezados ordenables, la barra de filtro y los números tabulares sin leer el título de la página. Si parece una página de marketing de consumo con tarjetas grandes vacías, reconstrúyela como una vista operativa funcional.

Excepción explícita de densidad empresarial — las tablas de datos son obligatorias

Anulación específica empresarial: La precaución universal anti-slop contra el desorden de paneles o múltiples cuadros de métricas NO DEBE interpretarse como un mandato para ocultar tablas de datos, barras de herramientas de filtro o indicadores de estado aquí. En software empresarial auténtico (Stripe, Datadog, AWS, Bloomberg), los datos densos y escaneables son el requisito principal de la interfaz.

• Tratamientos empresariales permitidos: Tablas de datos compactas (filas de 32px–40px), cuadrículas de metadatos de varias columnas, barras de herramientas de filtro, barras de búsqueda con insignias de atajo de teclado, barras de acción por lotes y píldoras de estado semántico.
• Límite anti-slop: Nunca inventes métricas de ingresos falsas, mini sparklines decorativas sin escalas de eje o gráficos circulares animados que no transmitan datos operativos. Los campos de datos reales, estados vacíos e indicadores de estado verdaderos son obligatorios.
• Interpretación anti-slop: Evalúa los diseños empresariales por escaneabilidad, densidad de información y eficiencia de tareas, no tratando de eliminar controles operativos necesarios. La densidad tabular que acelera el trabajo es diseño auténtico.

Tipografía y escritura

Sans serif de UI neutra y altamente legible: Inter, Source Sans 3, SF Pro o sans del sistema. Monoespaciada para identificadores y hashes: JetBrains Mono o mono del sistema. Cuerpo y celdas de tabla: 13–14 px (interlineado 1.45); encabezados de columna: 12 px mayúsculas (peso 600, tracking 0.05em); métricas: 20–28 px con cifras tabulares.

Dirección de color

• Modo claro (Consola en la nube moderna):
  • Base del lienzo: Pizarra neutra suave (#F9FAFB).
  • Superficie / Tabla: Blanco puro (#FFFFFF).
  • Tinta principal / Tipografía: Pizarra oscura (#111827).
  • Texto secundario / Atenuado: Pizarra equilibrada (#6B7280).
  • Bordes finos: #E5E7EB.
  • Resaltado de fila al pasar: #F8FAFC.
• Modo oscuro (Panel de control en la nube):
  • Base del lienzo: Pizarra oscura (#0F1117).
  • Superficie / Tabla: Carbón elevado (#161922).
  • Tinta principal / Tipografía: Pizarra nítida (#F9FAFB).
  • Texto secundario / Atenuado: Gris equilibrado (#9CA3AF).
  • Bordes finos: #232733.
  • Resaltado de fila al pasar: #1F2430.
• Marca principal: Azul empresarial oscuro (#2563EB claro / #3B82F6 oscuro).
• Tokens de estado semánticos (Calibrados WCAG AA para ambos modos):
  • Éxito (Saludable): Claro: #065F46 sobre #ECFDF5 (borde #A7F3D0); Oscuro: #34D399 sobre rgba(16, 185, 129, 0.15) (borde rgba(16, 185, 129, 0.35)).
  • Advertencia (Degradado): Claro: #92400E sobre #FEF3C7 (borde #FDE68A); Oscuro: #FBBF24 sobre rgba(245, 158, 11, 0.15) (borde rgba(245, 158, 11, 0.35)).
  • Error (Fallido): Claro: #991B1B sobre #FEE2E2 (borde #FECACA); Oscuro: #F87171 sobre rgba(239, 68, 68, 0.15) (borde rgba(239, 68, 68, 0.35)).
  • Neutro (Pendiente / Inactivo): Claro: #374151 sobre #F3F4F6 (borde #E5E7EB); Oscuro: #9CA3AF sobre rgba(156, 163, 175, 0.12) (borde rgba(156, 163, 175, 0.25)).
• Regla de acoplamiento de tema: El lienzo, las tablas, la tinta del texto y las insignias semánticas DEBEN adaptarse juntos. Nunca muestres texto de modo oscuro sobre tablas claras o texto verde oscuro de modo claro sobre fondos de consola oscuros.

Diseño y geometría

Ritmo base de 4px con incrementos de densidad de 8/12/16px; radios de esquina sutiles de 4px–6px; alturas de fila de tabla consistentes (36px predeterminado, 32px compacto). Los diseños maestro-detalle se dividen flexiblemente en escritorio y se apilan limpiamente en móvil.

Superficies, profundidad, textura

Las superficies son limpias, planas e impulsadas por bordes. Las sombras de elevación están reservadas estrictamente para menús flotantes, tooltips y diálogos modales (0 4px 12px rgba(0, 0, 0, 0.08)). Sin efectos decorativos de vidrio o arcilla en cuadrículas de datos.

Anatomía e interacción de componentes

• Tabla de datos: Fila de encabezado fija, resaltado de fila cebra o al pasar (#F8FAFC), columnas numéricas alineadas a la derecha, texto alineado a la izquierda.
• Barra de filtro y búsqueda: Entrada de búsqueda integrada con insignia ⌘K, menús desplegables de filtro de selección múltiple y selector de rango de fechas.
• Insignia de estado semántico: Píldora redondeada compacta con punto indicador de color y texto accesible.
• Pie de paginación: Rango de página actual, selector de elementos por página y botones de siguiente/anterior.

Movimiento

Transiciones de retroalimentación lineales mínimas de 100–140 ms. Prioriza la estabilidad sólida y el movimiento cero durante la actualización de datos o el filtrado de tablas.

Receta opcional de Anime.js v4

• Decisión de movimiento: Flash sutil de resaltado de fila en actualización de datos o transición deslizante de panel.
• Duración inicial: 120ms (0 = inmediato); ajusta según la tarea y preferencia del usuario.
• Evita: Transiciones de página decorativas, gráficos con rebote, cargadores giratorios en consultas rápidas.
• Dependencia: CSS/nativo por defecto. Sigue el motor de Taste en references/motion-engine.md cuando esté disponible; el skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Redacción de UI y microcopy

Objetivo, preciso y amigable para auditorías. Ejemplos: "1,420 registros encontrados", "Filtrar por estado", "Exportar CSV", "Última actualización hace 2 minutos". Evita lemas vagos de IA conversacional.

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado modo claro	Valor predeterminado modo oscuro
--taste-ent-bg	#f9fafb	#0f1117
--taste-ent-surface	#ffffff	#161922
--taste-ent-ink	#111827	#f9fafb
--taste-ent-muted	#6b7280	#9ca3af
--taste-ent-border	1px solid #e5e7eb	1px solid #232733
--taste-ent-radius	6px	6px
--taste-ent-row-height	36px	36px
--taste-ent-accent	#2563eb	#3b82f6
--taste-ent-font-body	Inter, -apple-system, system-ui, sans-serif	Inter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration	100ms	100ms

Los tokens representan una dirección y no están garantizados para copiar y pegar en cada paleta/plataforma. Define --taste-ent-* a nivel de proyecto, asegura el contraste de color y adáptalo mediante tokens de tema en lugar de dispersar valores literales.

Composición de héroe (primer viewport completo)

Cuando un portafolio/landing/página de inicio orientada al público tenga un héroe: usa una composición de encabezado+héroe de una pantalla visible. Altura base en min-height: 100svh con respaldo 100vh, restando el real encabezado solo cuando está en flujo normal; deja que el héroe se expanda para accesibilidad y pantallas móviles cortas. No apliques esto a paneles privados u otras pantallas de tareas; las anulaciones directas del usuario ganan. Dirección específica del estilo: Ancla la vista de apertura con un resumen de panel de trabajo: barra de filtro clave, resumen de datos en vivo y una acción operativa inmediata. Evita la inflación de tarjetas de consumo y espacios vacíos. Consulta el enrutador references/hero-layout.md cuando esté presente. El uso independiente sigue los mismos principios responsivos y anti-slop.

Puerta de calidad específica del estilo

• Hacer: Verificar numerales tabulares (tabular-nums) y alineación a la derecha en datos numéricos; asegurar que las insignias semánticas cumplan con WCAG AA en ambos modos claro y oscuro; proporcionar barras de paginación y búsqueda/filtro completas; probar encabezados de tabla fijos; verificar el cambio de modo oscuro/claro para que todas las filas, bordes y texto cambien en pares sincronizados.
• No hacer: No reemplaces tablas de datos con cuadrículas de tarjetas de consumo; evita sparklines decorativas sin escala; no inventes números de métricas falsos que no tengan contraparte de backend; evita colisiones de contraste de tema como texto verde oscuro sobre fondos oscuros o texto oscuro sobre filas de tabla oscuras.
• Confirmar consistencia en escritorio y móvil; foco de teclado visible (:focus-visible); estados de carga, vacío, deshabilitado, error y éxito; comportamiento de movimiento reducido (prefers-reduced-motion).
• No inyectes suposiciones específicas de estilo en proyectos no relacionados. Al combinar estilos, nombra explícitamente el estilo principal y las características prestadas.

Puerta universal anti-slop (autónoma)

Cada elemento debe ganarse su lugar. Contenido antes que decoración. No decores la incertidumbre. No inventes saldos, métricas, testimonios, usuarios, logotipos, aprobación, estado verificado/en vivo/en línea, actividad falsa o confirmaciones de éxito; usa estados vacío/carga/error honestos en su lugar. Los datos de demostración son aceptables solo si se solicitan y están etiquetados visiblemente.

No agregues capas decorativas de tarjeta dentro de tarjeta: una superficie anidada debe representar un límite de interacción o información distinto. Evita cuadrículas de 3 características generadas automáticamente, paneles de 4 estadísticas, afirmaciones falsas de héroes, gráficos sin propósito, spam de insignias/chips/iconos, arte decorativo no relacionado y bucles aleatorios solo para llenar el viewport. Prefiere agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan un equilibrio visual intencional.

Redacción anti-slop: sin afirmaciones genéricas como "Desbloquea tu potencial", "Experimenta el futuro", "Acelera tu flujo de trabajo", "sin fisuras" o equivalentes traducidos. Los encabezados deben comunicar contenido real, las CTA deben nombrar la acción, y el texto vacío/error/éxito debe describir estados reales y próximos pasos. Evita urgencia falsa, recuentos inventados, hype vago de IA, emojis gratuitos y muros de mayúsculas inaccesibles. Adapta el texto a este estilo y al idioma del usuario sin cambiar la verdad.

Integridad de contraste de tema y modo: Cuando un usuario solicite modo oscuro o modo claro (o construya un selector de tema), los colores de fondo y primer plano DEBEN invertirse en pares sincronizados en todas las superficies, texto, bordes, entradas e insignias semánticas. Nunca dejes texto negro sobre fondo oscuro, texto blanco sobre fondo blanco o píldoras de estado de bajo contraste ilegibles. Todos los estados deben cumplir con el contraste WCAG AA (mínimo 4.5:1 para texto normal/cuerpo, 3:1 para titulares grandes y límites interactivos).

Responsivo y movimiento: compón móvil deliberadamente, verifica etiquetas largas, estados de foco y contraste accesible; sin recorte de texto para ajustarse a un diseño moderno. Estático por defecto; usa movimiento para interacciones significativas, respeta las preferencias de movimiento reducido, evita decoración con rebote/flotante/pulso sin un estado real.

Finalización del bloque de hallazgos críticos/altos: estado/datos fabricados, acciones rotas, controles inaccesibles/recortados, texto engañoso, colisiones de contraste de tema o fallo móvil significativo deben ser corregidos. Informa lo que realmente se verificó; no reclames pruebas que no se ejecutaron.

No es un veto estético: colores expresivos, sombras, degradados, diseños de tarjetas o tratamientos decorativos son legítimos cuando son partes intencionales de la estética seleccionada y pasan las comprobaciones de usabilidad. No elimines la personalidad de la marca ni la expresión visual creativa que mejora la experiencia. La pauta aquí se dirige a interfaces vacías, ambiguas o que fingen capacidad, no a opciones de estilo vibrantes y funcionales que funcionan.