Ajit-ApTech/premium-liquid-glass

Premium Liquid Glass (Vidrio Líquido Premium)

Objetivo: una interfaz que se sienta calmada, espacial y costosa. El vidrio es un material para los controles que flotan sobre el contenido. No es un estilo para esparcir por todas partes. Prueba de éxito: los usuarios dicen "esto se siente limpio y en capas", nunca "alguien le puso desenfoque a todo".

Este skill controla material, jerarquía, profundidad, movimiento y accesibilidad en Android (Compose), iOS (SwiftUI), Flutter, y Web (CSS / Tailwind). La marca del proyecto controla identidad, paleta y copia. Los tokens de marca predeterminados están en assets/tokens.json.

0. Seguridad y alcance

• Trabaja solo dentro del proyecto que el usuario haya seleccionado. No leas secretos, claves o variables de entorno. No hagas solicitudes de red ni instales paquetes; si se necesita una librería, menciónala y deja que el usuario decida.
• Propón cambios antes de modificar el código de la aplicación existente.
• Usa solo contenido de ejemplo ficticio.
• Nunca uses fuentes de Apple (San Francisco) o SF Symbols en plataformas que no sean de Apple. Usa Inter, Roboto o fuentes apropiadas para la plataforma con iconos estilo Material Symbols / Lucide. En iOS (SwiftUI), las fuentes nativas SF Symbols y del sistema son estándar.
• Los hechos marcados (VERIFY) pueden desactualizarse con las versiones de las APIs; siempre confírmalos con las dependencias del proyecto.

1. Las cinco reglas estrictas

1. El contenido nunca es vidrio. Las tarjetas, filas de lista, formularios, fondos de página y medios permanecen opacos o con superficie suave.
2. Vidrio solo en la capa flotante: pastilla de navegación inferior, barra superior sobre contenido desplazable, botón de acción flotante, láminas inferiores y menús, campo de búsqueda, toasts/snackbars y chips pequeños flotantes.
3. Nunca vidrio sobre vidrio. Dentro de una superficie de vidrio, separa los elementos con rellenos sólidos, divisores sutiles o diferencias de opacidad.
4. La legibilidad supera la estética. El texto del cuerpo necesita un contraste de 4.5:1 (texto grande e iconos 3:1) sobre el fondo del peor caso. Ejecuta scripts/contrast_check.py.
5. Toda superficie de vidrio tiene un fallback sólido (versiones antiguas del SO, configuración de accesibilidad de transparencia reducida, ahorro de batería, baja capacidad de GPU o navegadores que carecen de backdrop-filter).

Pregunta de control antes de aplicar vidrio a cualquier elemento: "¿Qué rol funcional comunica este material?" Respuestas válidas: flota sobre contenido desplazable; es temporal o contextual; debe mantenerse accesible mientras el contenido se mueve debajo. Sin respuesta = sin vidrio.

2. Flujo de trabajo universal

1. Inspecciona: Plataforma objetivo (Android Compose, iOS SwiftUI, Flutter, Web), límites de versión del SO, tokens de tema existentes, estructura de navegación, requisitos de accesibilidad y objetivos de rendimiento.
2. Mapa de capas (antes de cualquier código): Tabla de elementos -> capa (contenido / estructura / flotante) -> vidrio sí/no -> nivel -> razón. Preséntalo con el plan.
3. Tokens: Comienza desde assets/tokens.json; ajusta los colores de marca; vuelve a ejecutar python scripts/contrast_check.py --tokens assets/tokens.json para cada nivel en ambos modos.
4. Construye con plantillas de plataforma:
   • Android: assets/GlassTheme.kt & references/compose-implementation.md
   • iOS (SwiftUI): assets/GlassView.swift & references/swiftui-implementation.md
   • Flutter: assets/glass_theme.dart & references/flutter-implementation.md
   • Web (CSS/Tailwind): assets/glass.css, assets/tailwind-glass.config.js & references/web-implementation.md
5. Verifica: Revisa con references/review-checklist.md y scripts/audit_compose.py (Android). Reporta evidencia (ratios de contraste, cantidad de capas de vidrio por pantalla, renderizado de fallback).

3. Niveles de material (valores iniciales)

Nivel	Uso	Desenfoque	Relleno (oscuro)	Relleno (claro)
ninguno	contenido, tarjetas, listas, fondos	-	Superficie opaca	Superficie opaca
fino	controles solo de icono o de etiqueta grande, chips	16 dp/px	tinta @ 0.55	blanco @ 0.55
regular	pastilla de navegación, barra superior, campo de búsqueda, FAB, toasts	24 dp/px	tinta @ 0.66	blanco @ 0.70
grueso	láminas, menús, diálogos, superposiciones con mucho texto	32 dp/px	tinta @ 0.78	blanco @ 0.82
cortina	oscurecimiento detrás de láminas modales	0-8 dp/px	negro @ 0.20-0.45	negro @ 0.20-0.45

Detalles y números de contraste verificados: references/tokens.md. Los rellenos se tiñen con el color de tinta de la superficie, no con blanco puro, para que el texto en modo oscuro sobreviva a fondos brillantes.

4. Verificaciones de realidad por plataforma

Android (Jetpack Compose)

• Modifier.blur() / RenderEffect desenfoca el contenido del propio elemento, no lo que está detrás de él. El desenfoque de fondo real necesita una librería (Haze es Apache-2.0 y soporta Compose) o desenfoque de ventana para diálogos (API 31+).
• Los efectos de desenfoque requieren Android 12 (API 31) o superior (VERIFY). Por debajo de API 31, renderiza siempre la superficie de fallback sólida.
• Presupuesto: Como máximo 2-3 capas desenfocadas simultáneas por pantalla. Nunca desenfoques elementos de lista.
• Detalles completos: references/compose-implementation.md.

iOS (SwiftUI)

• Usa los materiales nativos de SwiftUI: .ultraThinMaterial (nivel fino), .thinMaterial / .regularMaterial (nivel regular) y .thickMaterial (nivel grueso).
• Soporta esquinas continuas de iOS con RoundedRectangle(cornerRadius: ..., style: .continuous).
• Usa .presentationBackground(.thinMaterial) para láminas inferiores (iOS 16.4+).
• Detalles completos: references/swiftui-implementation.md.

Flutter

• Usa BackdropFilter con ImageFilter.blur(sigmaX: tier.blur, sigmaY: tier.blur) envuelto en ClipRRect.
• Siempre envuélvelo en RepaintBoundary para evitar repintar el desenfoque de fondo en cada fotograma.
• Nunca uses BackdropFilter dentro de elementos de ListView.builder o GridView.builder.
• Detalles completos: references/flutter-implementation.md.

Web (CSS / Tailwind CSS)

• Incluye siempre tanto -webkit-backdrop-filter: blur(...) como backdrop-filter: blur(...) para compatibilidad entre navegadores (Safari requiere -webkit-).
• Especifica siempre un fallback @supports not (backdrop-filter: blur(1px)) para navegadores antiguos.
• Implementa siempre un fallback @media (prefers-reduced-transparency: reduce) a fondos sólidos.
• Detalles completos: references/web-implementation.md.

5. Modos de accesibilidad (implementa todos)

• Transparencia reducida: Verifica las banderas de accesibilidad del sistema (prefers-reduced-transparency en Web, accessibilityReduceTransparency en SwiftUI, accessibleNavigation en Flutter, o un toggle en la app en Android). Reemplaza el vidrio por tokens de superficie sólida con un borde visible de 1 dp/px.
• Fuente grande (200%) y lectores de pantalla: Sin información transmitida solo por color; etiquetas en controles solo de icono; orden de enfoque lógico.
• Movimiento reducido: Reemplaza el movimiento elástico con desvanecimientos rápidos (150 ms); preserva la retroalimentación de estado.
• Objetivos táctiles: Mínimo 48x48 dp / 44x44 pt. Los gestos (deslizar) siempre deben proporcionar un botón o una alternativa de menú accesible.

6. Componentes y geometría

Especificaciones para pastilla de navegación, barra superior, FAB, láminas, campo de búsqueda, chips, tarjetas y pilas de triaje: references/components.md. Usa radios de esquina consistentes:

• Chips pequeños: 999 (pastilla completa)
• Controles / botones pequeños: 16 dp/pt
• Tarjetas de contenido (opacas): 24 dp/pt
• Pastilla de navegación flotante: 28 dp/pt
• Láminas modales: 32 dp/pt
• Radio de elemento anidado = radio exterior - relleno.

7. Movimiento y hápticos

Animaciones elásticas (250-350 ms de duración), desvanecimientos cortos (150 ms), rebase mínimo o nulo. Un sutil clic háptico en los umbrales de activación (deslizamiento completado, selección de pastilla). Estado presionado: escala 0.97 más un resaltado suave. Respeta la configuración del sistema de movimiento reducido.

8. Modo de generación de prompts de imagen (pantallas de referencia)

Al generar prompts para maquetas de UI, sigue references/image-prompts.md: una pantalla por prompt, bloque de estilo autocontenido, texto exacto en pantalla, vidrio solo en la capa flotante, "las tarjetas son opacas", barra de estado precisa para la plataforma. Usa las salidas como referencias de diseño y estado de ánimo, luego implementa en código con los tokens de diseño.

9. Modo de revisión

Cuando se te pida revisar un diseño o base de código:

1. Clasifica cada elemento de UI en su capa (contenido vs. flotante).
2. Cuenta las capas de vidrio por pantalla (aplica el presupuesto máximo de 2-3).
3. Busca anti-patrones (vidrio en tarjetas, vidrio anidado en vidrio, fallbacks faltantes).
4. Ejecuta la verificación de contraste (python scripts/contrast_check.py --tokens assets/tokens.json).
5. Para proyectos Android, ejecuta python scripts/audit_compose.py <src>.
6. Enumera los hallazgos por severidad con orientación correctiva de references/review-checklist.md.

10. Referencias y archivos

• references/principles.md - Principios espaciales centrales e inspiración de diseño de Apple
• references/tokens.md - Tablas de tokens, valores de color y números de contraste verificados
• references/compose-implementation.md - Arquitectura de Android Compose y fragmentos de código
• references/swiftui-implementation.md - Arquitectura de iOS SwiftUI y fragmentos de código
• references/flutter-implementation.md - Arquitectura de Flutter y fragmentos de código
• references/web-implementation.md - Arquitectura de Web CSS y Tailwind CSS y fragmentos de código
• references/components.md - Geometría de componentes, diseños y estados
• references/image-prompts.md - Plantillas de prompts para generación de maquetas por IA
• references/review-checklist.md - Puertas de calidad y anti-patrones
• scripts/contrast_check.py - Script de verificación de contraste WCAG
• scripts/audit_compose.py - Script de escaneo estático de Compose
• assets/tokens.json - Esquema completo de tokens de diseño
• assets/GlassTheme.kt - Plantilla de Jetpack Compose
• assets/GlassView.swift - Plantilla de SwiftUI
• assets/glass_theme.dart - Plantilla de Flutter
• assets/glass.css y assets/tailwind-glass.config.js - Plantillas de Web CSS y Tailwind