liquid-glass_skill

Overview

This skill implements Apple's Liquid Glass design language with the modern .glassEffect() API for iOS and macOS 16+. It provides ready-to-use SwiftUI modifiers, container views, button styles, and AppKit helpers to create glass, tint, and morphing UI effects. Use it to build modern, transparent, interactive interfaces with smooth transitions.

How this skill works

The skill exposes SwiftUI modifiers like .glassEffect(in:), .glassEffect(.regular.tint(_:)), .interactive(), plus GlassEffectContainer and glassEffectUnion/ID APIs for grouping and morphing. It also includes AppKit equivalents (NSGlassEffectView and NSGlassEffectContainerView) for macOS. Effects blend and animate when grouped, and glassEffectID with @Namespace enables fluid morphing between view states.

When to use it

• When you need glass/blur backgrounds and translucent controls
• To add interactive, touch- or hover-reactive UI elements
• When you want morphing transitions between views using glassEffectID and @Namespace
• To replace old material-based backgrounds (.background(.material)) with a modern API
• When grouping multiple glass elements for performance and blending

Best practices

• Wrap multiple glass elements in GlassEffectContainer to improve rendering and enable proper blending
• Apply .glassEffect() last in the modifier chain after frame, padding, and layout modifiers
• Pick consistent shapes (capsule, rect with cornerRadius, or circle) to maintain a cohesive shape language
• Use glassEffectID with a shared @Namespace for smooth morphing transitions and animate state changes
• Add .interactive() to touchable elements and use .tint(Color) to signal selection or importance
• Adjust GlassEffectContainer spacing to control when effects merge; smaller spacing merges sooner

Example use cases

• Floating action bars with interactive glass buttons that morph into expanded state
• Card components with tinted glass backgrounds and consistent corner radii
• Tab bars that animate selection by tinting and using glassEffectID for morphing
• Toolbars or tool palettes that reveal/hide items and smoothly morph using @Namespace
• AppKit windows using NSGlassEffectView for sidebar or inspector glass panels