swiftui-liquid-glass

Name: swiftui-liquid-glass
Author: Thomas Ricouard

swiftuiiosliquid glassui/uxapple designmobile developmentfront-endios 26

⭐ 3.7k📄 MIT🕒 2026-03-29Source ↗

Install this skill

npx skills add dimillian/skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

The SwiftUI Liquid Glass skill provides guidance for integrating the iOS 26+ native glass effect API. This framework allows developers to create translucent surfaces, buttons, and containers that mimic modern Apple design standards without relying on traditional blur modifiers or custom materials. The skill focuses on correct modifier placement, efficient use of containers for groups of glass elements, and managing transition states through namespaces. It emphasizes performance by offloading complex rendering to the native engine while maintaining visual consistency across the app. The skill includes logic for version gating, ensuring that users on older iOS releases receive appropriate fallback styles. By following these architectural patterns, developers ensure their UI remains responsive, visually coherent, and compliant with updated Apple Human Interface Guidelines for depth and translucency.

When to Use This Skill

•Building translucent navigation bars or floating action buttons
•Updating legacy blur backgrounds to native Liquid Glass components
•Creating multi-element cards that share a unified depth and lighting context
•Developing interactive widgets that require high-performance transparency

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Apply iOS 26 Liquid Glass to this view
“Refactor this button to use the glass style
“How do I group these glass elements properly?
“Add a fallback for my glass effect on older iOS versions
“Use GlassEffectContainer for my collection of cards

Pro Tips

💡Always prioritize native Liquid Glass APIs (`glassEffect`, `GlassEffectContainer`, glass button styles) and strictly follow Apple's Human Interface Guidelines for consistency and optimal user experience.
💡Introduce interactive glass effects only for tappable or focusable elements to maintain clarity, prevent visual clutter, and optimize performance.
💡Ensure proper iOS 26+ availability checks are in place and provide sensible fallbacks for older OS versions or clearly define the minimum supported target.

What this skill does

•Implementation of .glassEffect modifiers with specific tint and interactivity parameters
•Wrapping complex element groups in GlassEffectContainer for optimized rendering
•Applying .glassProminent button styles for standard interaction patterns
•Managing UI state transitions using glassEffectID and @Namespace for morphing effects
•Generating backward-compatible UI fallback blocks for iOS versions prior to 26

When not to use it

✕When the deployment target includes versions older than iOS 26 without a fallback strategy
✕In high-density data visualizations where transparency reduces text legibility

Example workflow

Define the visual hierarchy and identify components requiring the glass look
Wrap related glass elements within a GlassEffectContainer to optimize rendering
Apply individual .glassEffect modifiers to target views after layout styling
Configure .interactive() status for elements requiring touch response
Implement the #available(iOS 26, *) check with a standard material fallback
Verify modifier order to ensure glass effects do not conflict with frame or padding

Prerequisites

–Xcode 16+ (or version supporting iOS 26 SDK)
–Existing SwiftUI component hierarchy

Pitfalls & limitations

!Applying glass modifiers before layout modifiers, leading to clipping or unintended bounds
!Forgetting the fallback UI, resulting in invisible elements on older OS versions
!Over-using interactive glass, which can distract from the app's primary content

FAQ

Do I need to manage blur intensity manually?

No, the Liquid Glass API handles material rendering and intensity automatically to match system defaults.

Why use GlassEffectContainer instead of individual modifiers?

It ensures the system optimizes transparency and depth across grouped elements, resulting in better performance and visual consistency.

Can I apply glass effects to non-standard shapes?

Yes, you can use any Shape type within the modifier to define the boundaries of the glass effect.

How it compares

This skill enforces native API patterns, avoiding the performance overhead and inconsistent appearance of manual backdrop-blur workarounds or custom Gaussian blur implementations.

Source & trust

⭐ 3.7k stars📄 MIT🕒 Updated 2026-03-29

View original skill on GitHub →

📄 Full skill instructions — original source: dimillian/skills

# SwiftUI Liquid Glass

## Overview
Use this skill to build or review SwiftUI features that fully align with the iOS 26+ Liquid Glass API. Prioritize native APIs (glassEffect, GlassEffectContainer, glass button styles) and Apple design guidance. Keep usage consistent, interactive where needed, and performance aware.

## Workflow Decision Tree
Choose the path that matches the request:

### 1) Review an existing feature
- Inspect where Liquid Glass should be used and where it should not.
- Verify correct modifier order, shape usage, and container placement.
- Check for iOS 26+ availability handling and sensible fallbacks.

### 2) Improve a feature using Liquid Glass
- Identify target components for glass treatment (surfaces, chips, buttons, cards).
- Refactor to use GlassEffectContainer where multiple glass elements appear.
- Introduce interactive glass only for tappable or focusable elements.

### 3) Implement a new feature using Liquid Glass
- Design the glass surfaces and interactions first (shape, prominence, grouping).
- Add glass modifiers after layout/appearance modifiers.
- Add morphing transitions only when the view hierarchy changes with animation.

## Core Guidelines
- Prefer native Liquid Glass APIs over custom blurs.
- Use GlassEffectContainer when multiple glass elements coexist.
- Apply .glassEffect(...) after layout and visual modifiers.
- Use .interactive() for elements that respond to touch/pointer.
- Keep shapes consistent across related elements for a cohesive look.
- Gate with #available(iOS 26, *) and provide a non-glass fallback.

## Review Checklist
- **Availability**: #available(iOS 26, *) present with fallback UI.
- **Composition**: Multiple glass views wrapped in GlassEffectContainer.
- **Modifier order**: glassEffect applied after layout/appearance modifiers.
- **Interactivity**: interactive() only where user interaction exists.
- **Transitions**: glassEffectID used with @Namespace for morphing.
- **Consistency**: Shapes, tinting, and spacing align across the feature.

## Implementation Checklist
- Define target elements and desired glass prominence.
- Wrap grouped glass elements in GlassEffectContainer and tune spacing.
- Use .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...)) as needed.
- Use .buttonStyle(.glass) / .buttonStyle(.glassProminent) for actions.
- Add morphing transitions with glassEffectID when hierarchy changes.
- Provide fallback materials and visuals for earlier iOS versions.

## Quick Snippets
Use these patterns directly and tailor shapes/tints/spacing.

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

Button("Confirm") { }
    .buttonStyle(.glassProminent)

## Resources
- Reference guide: references/liquid-glass.md
- Prefer Apple docs for up-to-date API details.

By Thomas Ricouard

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/swiftui-liquid-glass/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/dimillian/skills/swiftui-liquid-glass/SKILL.md
Cursor: ~/.cursor/skills/dimillian/skills/swiftui-liquid-glass/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/dimillian/skills/swiftui-liquid-glass/SKILL.md