swiftui-liquid-glass

iOS 26+ Liquid Glass API for glassmorphism effects. Use when user wants glass effects, frosted backgrounds, translucent UI, or .glassEffect() modifier guidance.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "swiftui-liquid-glass" with this command: npx skills add maroffo/claude-forge/maroffo-claude-forge-swiftui-liquid-glass

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

ParameterTypePurpose
intensityDoubleGlass blur strength (0.0-1.0)
tintColorGlass tint color
styleGlassEffectStyle.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())

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

newsletter-digest

No summary provided by upstream source.

Repository SourceNeeds Review
General

react-nextjs

No summary provided by upstream source.

Repository SourceNeeds Review
General

rails

No summary provided by upstream source.

Repository SourceNeeds Review
General

golang

No summary provided by upstream source.

Repository SourceNeeds Review