theus-cli-linux-x64 1.2.2 → 1.4.0

package/vendor/theus-arsenal/skills/diseno-liquid-glass/SKILL.md

@@ -1,282 +0,0 @@
----
-name: diseno-liquid-glass
-description: Sistema de diseño Liquid Glass de iOS 26 — material de vidrio dinámico con desenfoque,
-  reflejos y morphing interactivo para SwiftUI, UIKit y WidgetKit. Úsala al construir o migrar
-  interfaces al nuevo lenguaje visual de Apple.
----
-
-# Sistema de diseño Liquid Glass (iOS 26)
-
-Patrones para implementar Liquid Glass de Apple: un material dinámico que desenfoca el contenido que hay detrás, refleja el color y la luz del entorno y reacciona a interacciones táctiles y de puntero. Cubre la integración con SwiftUI, UIKit y WidgetKit.
-
-## Cuándo usarla
-
-- Al construir o actualizar apps para iOS 26+ con el nuevo lenguaje de diseño.
-- Al implementar botones, tarjetas, barras de herramientas o contenedores con estilo de vidrio.
-- Al crear transiciones de morphing entre elementos de vidrio.
-- Al aplicar efectos Liquid Glass a widgets.
-- Al migrar efectos de desenfoque/material existentes a la nueva API de Liquid Glass.
-
-## Patrón principal — SwiftUI
-
-### Efecto de vidrio básico
-
-La forma más simple de añadir Liquid Glass a cualquier vista:
-
-```swift
-Text("¡Hola, mundo!")
-    .font(.title)
-    .padding()
-    .glassEffect()  // Por defecto: variante regular, forma de cápsula
-```
-
-### Personalizar forma y tinte
-
-```swift
-Text("¡Hola, mundo!")
-    .font(.title)
-    .padding()
-    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))
-```
-
-Opciones clave de personalización:
-
-- `.regular` — efecto de vidrio estándar
-- `.tint(Color)` — añade un tinte de color para dar prominencia
-- `.interactive()` — reacciona a interacciones táctiles y de puntero
-- Forma: `.capsule` (por defecto), `.rect(cornerRadius:)`, `.circle`
-
-### Estilos de botón de vidrio
-
-```swift
-Button("Púlsame") { /* acción */ }
-    .buttonStyle(.glass)
-
-Button("Importante") { /* acción */ }
-    .buttonStyle(.glassProminent)
-```
-
-### GlassEffectContainer para múltiples elementos
-
-Envuelve siempre múltiples vistas de vidrio en un contenedor, por rendimiento y para habilitar el morphing:
-
-```swift
-GlassEffectContainer(spacing: 40.0) {
-    HStack(spacing: 40.0) {
-        Image(systemName: "scribble.variable")
-            .frame(width: 80.0, height: 80.0)
-            .font(.system(size: 36))
-            .glassEffect()
-
-        Image(systemName: "eraser.fill")
-            .frame(width: 80.0, height: 80.0)
-            .font(.system(size: 36))
-            .glassEffect()
-    }
-}
-```
-
-El parámetro `spacing` controla la distancia de fusión: los elementos más cercanos mezclan sus formas de vidrio entre sí.
-
-### Unir efectos de vidrio
-
-Combina varias vistas en una sola forma de vidrio con `glassEffectUnion`:
-
-```swift
-@Namespace private var namespace
-
-GlassEffectContainer(spacing: 20.0) {
-    HStack(spacing: 20.0) {
-        ForEach(symbolSet.indices, id: \.self) { item in
-            Image(systemName: symbolSet[item])
-                .frame(width: 80.0, height: 80.0)
-                .glassEffect()
-                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
-        }
-    }
-}
-```
-
-### Transiciones de morphing
-
-Crea un morphing suave cuando los elementos de vidrio aparecen o desaparecen:
-
-```swift
-@State private var isExpanded = false
-@Namespace private var namespace
-
-GlassEffectContainer(spacing: 40.0) {
-    HStack(spacing: 40.0) {
-        Image(systemName: "scribble.variable")
-            .frame(width: 80.0, height: 80.0)
-            .glassEffect()
-            .glassEffectID("pencil", in: namespace)
-
-        if isExpanded {
-            Image(systemName: "eraser.fill")
-                .frame(width: 80.0, height: 80.0)
-                .glassEffect()
-                .glassEffectID("eraser", in: namespace)
-        }
-    }
-}
-
-Button("Alternar") {
-    withAnimation { isExpanded.toggle() }
-}
-.buttonStyle(.glass)
-```
-
-### Extender el scroll horizontal bajo la barra lateral
-
-Para permitir que el contenido de scroll horizontal se extienda bajo una barra lateral o un inspector, asegúrate de que el contenido del `ScrollView` alcance los bordes inicial/final del contenedor. El sistema gestiona automáticamente el desplazamiento bajo la barra lateral cuando el layout llega hasta los bordes — no hace falta ningún modificador adicional.
-
-## Patrón principal — UIKit
-
-### UIGlassEffect básico
-
-```swift
-let glassEffect = UIGlassEffect()
-glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
-glassEffect.isInteractive = true
-
-let visualEffectView = UIVisualEffectView(effect: glassEffect)
-visualEffectView.translatesAutoresizingMaskIntoConstraints = false
-visualEffectView.layer.cornerRadius = 20
-visualEffectView.clipsToBounds = true
-
-view.addSubview(visualEffectView)
-NSLayoutConstraint.activate([
-    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
-    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
-    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
-    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
-])
-
-// Añade el contenido a contentView
-let label = UILabel()
-label.text = "Liquid Glass"
-label.translatesAutoresizingMaskIntoConstraints = false
-visualEffectView.contentView.addSubview(label)
-NSLayoutConstraint.activate([
-    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
-    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
-])
-```
-
-### UIGlassContainerEffect para múltiples elementos
-
-```swift
-let containerEffect = UIGlassContainerEffect()
-containerEffect.spacing = 40.0
-
-let containerView = UIVisualEffectView(effect: containerEffect)
-
-let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
-let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
-
-containerView.contentView.addSubview(firstGlass)
-containerView.contentView.addSubview(secondGlass)
-```
-
-### Efectos de borde en el scroll
-
-```swift
-scrollView.topEdgeEffect.style = .automatic
-scrollView.bottomEdgeEffect.style = .hard
-scrollView.leftEdgeEffect.isHidden = true
-```
-
-### Integración de vidrio en la barra de herramientas
-
-```swift
-let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
-favoriteButton.hidesSharedBackground = true  // Excluirse del fondo de vidrio compartido
-```
-
-## Patrón principal — WidgetKit
-
-### Detección del modo de renderizado
-
-```swift
-struct MyWidgetView: View {
-    @Environment(\.widgetRenderingMode) var renderingMode
-
-    var body: some View {
-        if renderingMode == .accented {
-            // Modo tintado: fondo de vidrio tematizado con tinte blanco
-        } else {
-            // Modo a todo color: apariencia estándar
-        }
-    }
-}
-```
-
-### Grupos de acento para la jerarquía visual
-
-```swift
-HStack {
-    VStack(alignment: .leading) {
-        Text("Título")
-            .widgetAccentable()  // Grupo de acento
-        Text("Subtítulo")
-            // Grupo primario (por defecto)
-    }
-    Image(systemName: "star.fill")
-        .widgetAccentable()  // Grupo de acento
-}
-```
-
-### Renderizado de imágenes en modo acentuado
-
-```swift
-Image("myImage")
-    .widgetAccentedRenderingMode(.monochrome)
-```
-
-### Fondo del contenedor
-
-```swift
-VStack { /* contenido */ }
-    .containerBackground(for: .widget) {
-        Color.blue.opacity(0.2)
-    }
-```
-
-## Decisiones de diseño clave
-
-| Decisión | Razón |
-|----------|-------|
-| Envolver en GlassEffectContainer | Optimización de rendimiento; habilita el morphing entre elementos de vidrio |
-| Parámetro `spacing` | Controla la distancia de fusión — ajusta cuán cerca deben estar los elementos para mezclarse |
-| `@Namespace` + `glassEffectID` | Habilita transiciones de morphing suaves ante cambios en la jerarquía de vistas |
-| Modificador `interactive()` | Opt-in explícito para reacciones táctiles/de puntero — no todo el vidrio debe responder |
-| UIGlassContainerEffect en UIKit | Mismo patrón de contenedor que SwiftUI, por consistencia |
-| Modo de renderizado acentuado en widgets | El sistema aplica vidrio tintado cuando el usuario elige la pantalla de inicio tintada |
-
-## Buenas prácticas
-
-- **Usa siempre GlassEffectContainer** al aplicar vidrio a varias vistas hermanas — habilita el morphing y mejora el rendimiento de renderizado.
-- **Aplica `.glassEffect()` después** de los demás modificadores de apariencia (frame, font, padding).
-- **Usa `.interactive()`** solo en elementos que responden a la interacción del usuario (botones, elementos conmutables).
-- **Elige el spacing con cuidado** en los contenedores para controlar cuándo se fusionan los efectos de vidrio.
-- **Usa `withAnimation`** al cambiar jerarquías de vistas para habilitar transiciones de morphing suaves.
-- **Prueba en todas las apariencias** — modo claro, modo oscuro y modos acentuado/tintado.
-- **Garantiza el contraste de accesibilidad** — el texto sobre vidrio debe seguir siendo legible.
-
-## Antipatrones a evitar
-
-- Usar varias vistas `.glassEffect()` sueltas sin un GlassEffectContainer.
-- Anidar demasiados efectos de vidrio — degrada el rendimiento y la claridad visual.
-- Aplicar vidrio a todas las vistas — resérvalo para elementos interactivos, barras de herramientas y tarjetas.
-- Olvidar `clipsToBounds = true` en UIKit al usar radios de esquina.
-- Ignorar el modo de renderizado acentuado en widgets — rompe la apariencia de la pantalla de inicio tintada.
-- Usar fondos opacos detrás del vidrio — anula el efecto de translucidez.
-
-## Casos de uso
-
-- Barras de navegación, barras de herramientas y barras de pestañas con el nuevo diseño de iOS 26.
-- Botones de acción flotantes y contenedores estilo tarjeta.
-- Controles interactivos que necesitan profundidad visual y feedback táctil.
-- Widgets que deben integrarse con la apariencia Liquid Glass del sistema.
-- Transiciones de morphing entre estados de UI relacionados.