
Liquid Glass Design
A solid reference for Apple's iOS 26 Liquid Glass API if you're building apps with the new material system. Covers SwiftUI's `.glassEffect()` modifier, UIKit's `UIGlassEffect`, and WidgetKit's accented rendering modes. The morphing transitions with `@Namespace` and `glassEffectID` are the interesting part, letting you animate glass shapes as views appear and disappear. One gotcha worth noting: you need `GlassEffectContainer` wrapping multiple glass elements or the morphing won't work and performance suffers. The spacing parameter controls when adjacent glass effects merge together, which takes some experimentation to get right. Useful if you're updating existing apps to match iOS 26's design language or just trying to figure out why your glass effects aren't blending properly.
- skills.sh installs
- 5.9K
- GitHub stars
- 229.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add affaan-m/everything-claude-code --skill liquid-glass-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Liquid Glass Design System (iOS 26)
Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.
When to Activate
- Building or updating apps for iOS 26+ with the new design language
- Implementing glass-style buttons, cards, toolbars, or containers
- Creating morphing transitions between glass elements
- Applying Liquid Glass effects to widgets
- Migrating existing blur/material effects to the new Liquid Glass API
Core Pattern — SwiftUI
Basic Glass Effect
The simplest way to add Liquid Glass to any view:
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect() // Default: regular variant, capsule shape
Customizing Shape and Tint
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))
Sponsors
Details
- Repository
- github.com/affaan-m/everything-claude-code
- Category
- Design & UI/UX
More from affaan-m/everything-claude-code
All 256- Security Scan5.9K
- Deployment Patterns5.8K
- Jpa Patterns5.8K
- Laravel Patterns5.8K
- Clickhouse Io5.7K
- Eval Harness5.7K
- Laravel Security5.7K
- Cpp Testing5.6K
- Iterative Retrieval5.6K
- Agent Harness Construction5.5K
- Configure Ecc5.5K
- Nutrient Document Processing5.5K
- Search First5.5K
- Verification Loop5.5K
- Agentic Engineering5.4K
- Cost Aware Llm Pipeline5.4K
- Django Verification5.4K
- Springboot Verification5.4K
- Codebase Onboarding5.3K
- Deep Research5.3K
- Rust Testing5.3K
- Ai First Engineering5.2K
- Autonomous Loops5.2K
- Content Engine5.2K