liquid-glass

Liquid Glass for SwiftUI

Liquid Glass is the material Apple introduced in iOS 26 for the functional layer: the controls and navigation that float above an app's content. Standard SwiftUI components adopt it automatically when you build with the iOS 26 or 27 SDK. Custom views opt in with glassEffect(_:in:).

This skill covers the API, the system chrome that already uses glass, the iOS 27 changes, Apple's design rules, accessibility, performance, and anti-patterns. It also includes copy-ready patterns and full-screen examples.

Scope

• In scope. SwiftUI on iOS, iPadOS, Mac Catalyst, macOS, tvOS, and watchOS 26 and later, built with Xcode 26 or later. The iOS 27 APIs need Xcode 27.
• visionOS. Glass, glassEffect, GlassEffectContainer, and the glass button styles are not available there. visionOS uses its own system glass and glassBackgroundEffect.
• Out of scope. UIKit and AppKit (UIGlassEffect, NSGlassEffectView), React Native, Flutter, and app icons (made in Icon Composer).
• Deployment targets below 26. System components still get Liquid Glass when built with the 26 or 27 SDK. Custom glass needs if #available(iOS 26.0, *). See references/10-migrating-to-ios27.md.

Workflow

For a design question without code, answer from the decision tree, the golden rules, and 02, with 05 §4 for legibility; skip the checklist and the linter. For code, copy this checklist into your response and tick items off as you go:

- [ ] 1. Find the deployment target and platforms (IPHONEOS_DEPLOYMENT_TARGET, Package.swift platforms).
         Target 26.x → gate every iOS 27 API with `if #available(iOS 27.0, *)`.
- [ ] 2. Classify every view: functional layer (controls and navigation floating above content) or content layer.
- [ ] 3. Choose APIs with the decision tree below. Prefer system components.
- [ ] 4. Write the code. Check each glass, toolbar, tab, or sheet signature against references/01 and 08.
- [ ] 5. Run the linter: python3 <skill-dir>/scripts/check_glass.py <files-or-folders> --target <deployment target>
         Fix what it reports and re-run until it is clean.
- [ ] 6. Walk checklists/pre-ship-checklist.md.