Liquid Glass

What it does

The Liquid Glass skill enables AI agents to design native macOS and iOS applications adhering to Apple's Liquid Glass design principles and Human Interface Guidelines (HIG). It facilitates the creation of visually appealing user interfaces with realistic reflections and refractions, mimicking the appearance of glass surfaces. The core concept involves layering UI elements – a "Glass Layer" for navigation controls placed above a "Content Layer" which displays the application's primary content.

When to use it

• Creating macOS applications on version 14 or later.
• Developing iOS applications on version 26 or later.
• Designing user interfaces that require a modern, visually striking aesthetic.
• Implementing floating navigation elements above core app content.
• Building UI components like cards, rows with hover effects, and badges using Liquid Glass materials.

Key capabilities

• Three-Layer Model: Separates navigation/controls (Glass Layer) from the main application content (Content Layer).
• Five Principles: Content First, Depth Through Light, Adaptive Tinting, Semantic Emphasis, Accessibility Built-In.
• Material Options: Offers a range of material thicknesses (.ultraThinMaterial to .ultraThickMaterial) for visual depth.
• Glass Effect Variants: Provides .glassEffect options like .regular, .clear, and .identity.
• Interactive Glass Effects: Adds bounce and shimmer animations to glass elements with the .interactive() modifier.
• Button Styling: Includes predefined button styles (.glass for secondary, .glassProminent for primary).

Example prompts

• "Create a macOS button using the Liquid Glass design with a regular glass effect."
• "Generate an iOS card component with a thick material and rounded corners."
• "Design a row element that uses the hover effect to subtly highlight it with a translucent background."

Tips & gotchas

• Layering is crucial: Remember that the Glass Layer must always sit above the Content Layer. Applying glass effects directly to content elements will violate design principles.
• macOS/iOS Version Requirements: Certain features and materials are only available on specific macOS (14+) and iOS (26+) versions.
• Container for Multiple Elements: When using multiple glass elements, they must be wrapped within a GlassEffectContainer.