kennedys0/taste-style-bento

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 en lugar de decidir el gusto del usuario aquí. Las marcas existentes, la accesibilidad y las anulaciones del usuario tienen prioridad sobre todos los ejemplos siguientes. 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: Bento Grid

ID: bento
Firma: Composición asimétrica de módulos tipo tarjeta con estricta jerarquía de peso visual, anatomía interna diversa de teselas y ritmo espacial unificado.

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 confirmado aplicable. Las instrucciones del proyecto pueden anular elecciones individuales. Preserva la accesibilidad, la utilidad y las restricciones de la marca. Las fuentes son sugerencias, no dependencias obligatorias. Una cuadrícula uniforme de 3x2 de tarjetas de características idénticas no califica como Bento Grid.

Buen ajuste / Compensaciones

• Funciona bien para: Resúmenes de productos, páginas de inicio de portafolios, descubrimiento de características para desarrolladores, resúmenes de paneles y exhibiciones de ecosistemas de hardware/software.
• Ten cuidado con: Datos tabulares lineales de alto volumen o flujos de transacciones paso a paso donde la asimetría de la cuadrícula distraiga de la progresión secuencial.
• Direcciones de referencia:
  • Bento Oscuro Mate Moderno: Fondo de pizarra/obsidiana (#0B0D10) con tarjetas de grafito sutilmente elevadas (#15191E), bordes translúcidos de 1px (rgba(255, 255, 255, 0.08)) y un color de acento vibrante.
  • Bento Claro Arquitectónico Limpio: Lienzo blanco roto nítido (#F8F9FA) con azulejos de porcelana blanca pura, divisores finos (rgba(0, 0, 0, 0.06)) y tipografía de carbón oscuro.

Puerta de fidelidad de cuadrícula Bento — obligatorio

Antes de considerar completa una página de cuadrícula bento, la ventana gráfica inicial debe leerse visiblemente como una composición modular asimétrica y curada. Si un usuario eligió este estilo, una cuadrícula uniforme de tarjetas idénticas (icono + título + párrafo) es un FALLO directo, ya que representa un trabajo genérico de plantilla.

Una implementación exitosa de cuadrícula bento demuestra todos los siguientes puntos:

1. Peso Visual Asimétrico Claro: La cuadrícula presenta una jerarquía focal distinta: exactamente 1 tesela héroe dominante (que abarca 2x2 o 2x1 columnas) que comunica el mensaje principal, 1-2 teselas secundarias medianas y 2-3 teselas terciarias compactas.
2. Anatomía Interna Diversa de Teselas: Cada tesela posee un diseño interno único adaptado a su contenido específico. La Tesela 1 podría presentar un bloque de código interactivo; la Tesela 2 un widget de alternancia activo; la Tesela 3 una vista previa visual o diagrama; la Tesela 4 una lectura de métrica en vivo. Los diseños repetidos idénticos en todas las teselas fallan.
3. Ritmo Espacial Unificado y Alineación de Canalones: Los bordes de las teselas se alinean estrictamente a lo largo de una cuadrícula CSS consistente (por ejemplo, 3 o 4 columnas) con canalones uniformes (16px-24px) y curvatura de esquinas coincidente (20px-28px).
4. Reestructuración Móvil Deliberada: En ventanas gráficas móviles, la bento de varias columnas se colapsa en una sola columna lógica y priorizada por contenido sin recortar contenido ni causar desbordamientos horizontales incómodos.
5. Jerarquía Interna Legible: Cada tesela tiene un encabezado claro y sucinto (18px-24px) y contenido de alto contraste, evitando muros de texto pequeño comprimido en cajas pequeñas.

Prueba de primera ventana gráfica: En una captura de pantalla de escritorio, identifica la tesela héroe dominante, las variadas presentaciones internas de las teselas y la alineación unificada de la cuadrícula sin leer el título de la página. Si todas las teselas se ven idénticas, rediseña la jerarquía de la cuadrícula.

Excepción explícita de diseño Bento — se fomentan las teselas asimétricas

Anulación específica de Bento: La precaución universal contra el trabajo genérico sobre tarjetas excesivas o desorden de paneles NO DEBE interpretarse como una prohibición de diseños de múltiples teselas aquí. Una cuadrícula bento auténtica es fundamentalmente modular y compartimentada, funcionando como una caja bento japonesa donde cada compartimento sirve un plato distinto.

• Tratamientos de diseño permitidos: Expansiones asimétricas de columna/fila de cuadrícula (grid-column: span 2; grid-row: span 2;), elevaciones sutiles de tarjetas al pasar el ratón, controles mini interactivos integrados (alternancias, pestañas de código) y brillos de borde ambientales en teselas activas.
• Límite contra trabajo genérico: Sin anidamiento de tarjeta dentro de tarjeta dentro de una tesela bento. Una tesela ya es un contenedor de información; usa jerarquía tipográfica, divisores y espaciado para la estructura interna en lugar de anidar otra tarjeta dentro de ella.
• Interpretación contra trabajo genérico: Evalúa los diseños bento por variedad de contenido, densidad de información y jerarquía de lectura, no contando tarjetas. Las cuadrículas de características uniformes son trabajo genérico; las composiciones bento asimétricas curadas son diseño auténtico.

Tipografía y escritura a máquina

Sans serif contemporánea y refinada: DM Sans, Manrope, Inter o system sans. Encabezados principales de héroe: 28-44 px (peso 700); títulos de teselas: 18-22 px (peso 600); cuerpo: 14-15 px; leyendas/etiquetas: 12-13 px. Mantén el texto del cuerpo breve y escaneable.

Dirección de color

• Modo Oscuro (Mate Moderno Predeterminado):
  • Base de Lienzo: Pizarra obsidiana profunda (#0B0D10).
  • Fondo de Tesela: Pizarra elevada (#15191E).
  • Tipografía Primaria: Porcelana nítida (#F4F4F6).
  • Texto Secundario / Apagado: Gris frío equilibrado (#9CA3AF — pasa WCAG AA 4.5:1).
  • Borde Fino: Trazo blanco translúcido (rgba(255, 255, 255, 0.08)).
• Modo Claro (Arquitectónico Limpio):
  • Base de Lienzo: Blanco roto nítido (#F8F9FA).
  • Fondo de Tesela: Porcelana blanca pura (#FFFFFF).
  • Tipografía Primaria: Tinta carbón oscura (#111827).
  • Texto Secundario / Apagado: Gris pizarra (#6B7280 — pasa WCAG AA 4.5:1).
  • Borde Fino: Trazo oscuro translúcido (rgba(0, 0, 0, 0.08)).
• Acento de Marca: Color de firma de alto contraste (por ejemplo, Violeta Eléctrico #8B5CF6, Cian #06B6D4, o Esmeralda #10B981) que cumple con un contraste mínimo de 3:1 contra los rellenos de teselas tanto oscuros como claros.
• Regla de Acoplamiento de Tema y Anti-Colisión: El lienzo, las superficies de las teselas, la tipografía y los bordes DEBEN adaptarse en pares sincronizados. Al cambiar al modo oscuro, el texto debe volverse claro; al cambiar al modo claro, el texto debe volverse oscuro. Nunca permitas texto oscuro (#111827) sobre teselas oscuras o texto blanco (#FFFFFF) sobre teselas claras.

Diseño y geometría

CSS Grid: grid-template-columns: repeat(3, 1fr) o repeat(4, 1fr); espacios: 16px-24px. Radios de tarjeta: 20px-28px. Todos los bordes de las teselas deben alinearse al ras a lo largo de las pistas de la cuadrícula horizontal y vertical.

Superficies, profundidad, textura

• Tesela Bento: Fondo sólido con trazo fino sutil (1px solid var(--taste-bento-border)) y sombra paralela ambiental suave (0 8px 24px rgba(0, 0, 0, 0.12)).
• Interacción al Pasar el Ratón: Elevación sutil (transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)).

Anatomía del componente e interacción

• Tesela Héroe (2x2 o 2x1): Propuesta de valor principal, vista previa visual o de código en vivo, CTA prominente.
• Tesela de Acción Interactiva: Alternancia integrada, filtro rápido o bloque de comando copiable.
• Tesela de Métrica / Estado: Número tabular limpio con etiqueta concreta y datos reales.
• Tesela de Exhibición: Captura de pantalla de alta fidelidad, vista previa de activo o diagrama arquitectónico.

Animación

140-220 ms de ease-out suave. Elevación restringida de tesela al pasar el ratón. Sin animaciones competitivas que distraigan en múltiples teselas simultáneamente.

Receta opcional de Anime.js v4

• Decisión de animación: Entrada escalonada sutil de teselas o elevación suave al pasar el ratón.
• Duración inicial: 180 ms (0 = inmediato); ajusta según la tarea y la preferencia del usuario.
• Evita: giros de teselas, escalado errático, distracciones de bucle flotante.
• Dependencia: CSS/nativo por defecto. Usa Anime.js v4 solo si la interacción solicitada lo justifica. Sigue los principios de references/motion-engine.md del Taste Engine cuando esté disponible; el skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Redacción de UI y microcopia

Directa, contundente e informativa. Ejemplos: "Despliegue instantáneo", "Configuración cero", "Latencia de 48ms". Evita palabras de moda vagas como "Sinergia de próxima generación".

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado modo oscuro	Valor predeterminado modo claro
--taste-bento-bg	#0b0d10	#f8f9fa
--taste-bento-surface	#15191e	#ffffff
--taste-bento-text	#f4f4f6	#111827
--taste-bento-text-muted	#9ca3af	#6b7280
--taste-bento-border	1px solid rgba(255, 255, 255, 0.08)	1px solid rgba(0, 0, 0, 0.08)
--taste-bento-radius	24px	24px
--taste-bento-gap	20px	20px
--taste-bento-shadow	0 8px 24px rgba(0, 0, 0, 0.25)	0 8px 24px rgba(0, 0, 0, 0.06)
--taste-bento-accent	#8b5cf6	#7c3aed
--taste-bento-font-body	DM Sans, Manrope, system-ui, sans-serif	DM Sans, Manrope, system-ui, sans-serif
--taste-bento-motion-duration	180ms	180ms

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

Composición de héroe (primera ventana gráfica completa)

Cuando un portafolio/landing/página de inicio pública tiene un héroe: usa una composición de encabezado+héroe de una pantalla visible. La altura base en min-height: 100svh con respaldo 100vh, restando el real encabezado solo cuando esté en flujo normal; permite 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: Organiza la sección superior como una cuadrícula bento héroe donde la historia principal del producto ocupa la tesela 2x2 principal y los puntos de prueba de apoyo la rodean. No fuerces 8 tarjetas pequeñas en la primera ventana gráfica solo para llenar la altura. Consulta el enrutador references/hero-layout.md cuando esté presente. El uso independiente sigue los mismos principios de respuesta y anti-relleno.

Puerta de calidad específica del estilo

• Haz: Verifica el claro dominio visual de la tesela héroe; asegúrate de que cada tesela tenga un diseño interno distinto; verifica el colapso de la cuadrícula en móvil; mantén un espaciado de espacios consistente; verifica el contraste del cambio de modo oscuro/claro: asegura que el lienzo, las superficies de las teselas, la tipografía y los bordes cambien en pares acoplados y pasen WCAG AA (al menos 4.5:1).
• No hagas: No generes plantillas repetidas idénticas de 3 o 4 tarjetas; evita tarjetas anidadas dentro de teselas; evita gráficos diminutos ilegibles o etiquetas de métricas falsas; no permitas colisiones de tema como texto oscuro sobre teselas oscuras, texto blanco sobre teselas blancas o bordes invisibles.
• Confirma la consistencia en escritorio y móvil; el 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 del estilo en proyectos no relacionados. Al combinar estilos, nombra explícitamente el estilo principal y las características prestadas.

Puerta universal anti-relleno (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, confirmaciones de éxito; usa estados honestos de vacío/carga/error 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éroe, gráficos sin propósito, spam de insignias/chips/iconos, ilustraciones decorativas no relacionadas y bucles aleatorios solo para llenar la ventana gráfica. Prefiere agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan un equilibrio visual intencional.

Redacción anti-relleno: sin "Libera tu potencial", "Experimenta el futuro", "Acelera tu flujo de trabajo", afirmaciones "sin problemas" genéricas o equivalentes traducidos. Los encabezados deben comunicar el contenido real, los CTA deben nombrar la acción y el texto de vacío/error/éxito debe describir estados reales y próximos pasos. Evita urgencia falsa, recuentos inventados, exageración de IA vaga, emoji gratuito y muros inaccesibles de mayúsculas. Adapta la redacción a este estilo y al idioma del usuario sin cambiar la verdad.

Integridad de contraste de modo y tema: Cuando un usuario solicite modo oscuro o modo claro (o construya un conmutador 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 ilegibles de bajo contraste. 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 animación: compón móvil deliberadamente, verifica etiquetas largas, estados de enfoque y contraste accesible; sin recorte de texto para ajustarse a un diseño moderno. Estático por defecto; usa animación para interacciones significativas, respeta las preferencias de movimiento reducido, evita la decoración de rebote/flotante/pulsante sin un estado real.

Los hallazgos críticos/altos bloquean la finalización: estado/datos fabricados, acciones rotas, controles inaccesibles/recortados, copia engañosa, colisiones de contraste de tema o fallo móvil significativo deben corregirse. Informa lo que realmente se verificó; no reclames pruebas que no se ejecutaron.

No es un veto estético: los 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 fuerces silenciosamente el minimalismo.

Anti-relleno: específico del estilo

Composición curada, no cuadrículas de tarjetas generadas automáticamente.

• Rechaza: Cuadrículas uniformes de tarjetas idénticas, tarjetas anidadas dentro de tarjetas, métricas falsas sin unidades, iconos de marcador de posición sin significado claro, teselas vacías agregadas únicamente para equilibrar una cuadrícula CSS y colisiones de color de modo oscuro/claro donde el texto permanece ilegible contra la superficie de la tesela.
• En su lugar: Diseña cada tesela en torno a características reales distintas o acciones de usuario con pesos asimétricos y encabezados escaneables.
• Verificación de copia: Cada encabezado de tesela debe comunicar una función o contenido real; cada enlace, botón o control debe tener una llamada a la acción clara; evita afirmaciones vagas de marketing como "Solución integral" o "Plataforma potente".
• Relleno de IA: Sin texto de marcador de posición de IA generado automáticamente sin contenido significativo; cada bloque de texto debe justificar su inclusión.