skills/maroffo/claude-forge/swiftui-liquid-glass

swiftui-liquid-glass

SKILL.md

ABOUTME: iOS 26+ Liquid Glass API for glassmorphism effects and interactive UI

ABOUTME: .glassEffect() modifier, intensity, tint, style, interactive glass, fallbacks

SwiftUI Liquid Glass

When to Invoke

  • iOS 26+ glassmorphism effects
  • Frosted glass backgrounds
  • Translucent interactive UI
  • Material design alternatives
  • Modern iOS 26 aesthetic

Capabilities

  • Apply glass effects to views
  • Interactive glass for tappable elements
  • Fallback to materials on older iOS
  • Customize glass intensity/blur
  • Layer glass containers

Basic API

import SwiftUI

@available(iOS 26, *)
struct GlassCard: View {
    var body: some View {
        VStack {
            Text("Liquid Glass")
            Text("iOS 26+")
        }
        .padding()
        .glassEffect()  // Basic glass effect
    }
}

With Fallbacks

struct AdaptiveGlassView: View {
    var body: some View {
        if #available(iOS 26, *) {
            content
                .glassEffect(intensity: 0.7)
        } else {
            content
                .background(.ultraThinMaterial)
        }
    }

    var content: some View {
        Text("Works on all iOS versions")
            .padding()
    }
}

Glass Effect Parameters

Parameter Type Purpose
intensity Double Glass blur strength (0.0-1.0)
tint Color Glass tint color
style GlassEffectStyle .light, .dark, .adaptive

Interactive Glass

@available(iOS 26, *)
struct InteractiveGlassButton: View {
    var body: some View {
        Button("Tap Me") {
            print("Tapped")
        }
        .padding()
        .glassEffect(intensity: 0.8, interactive: true)  // Responds to touch
    }
}

GlassEffectContainer

Wrap content in GlassEffectContainer { ZStack { background; foreground.glassEffect() } } for layered glass over images/content.

Common Patterns

// Card: .glassEffect(intensity: 0.75, tint: .blue.opacity(0.1)).cornerRadius(16)
// Toolbar: .glassEffect(style: .adaptive)
// Migration: see "With Fallbacks" above (.ultraThinMaterial → .glassEffect())
Weekly Installs
12
GitHub Stars
8
First Seen
Mar 1, 2026
Installed on
opencode12
github-copilot12
gemini-cli11
cursor11
codebuddy11
codex11