skills.rest
AlexW00
AlexW00COMMUNITY
Explore all skills by this author →
Website𝕏@AlexWeichartGitHub

liquid-glass-design

Implement iOS 26 Liquid Glass effects in SwiftUI, UIKit, and WidgetKit.

70|4|Updated Jul 22, 2025
Search Tags:#ui design#swiftui#uikit#widgetkit#liquid glass#glass effect#ios 26
One-click install
npx skills add https://github.com/AlexW00/Zettel --skill liquid-glass-design-alexw00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: liquid-glass-design
Source: https://github.com/AlexW00/Zettel/tree/main/.agents/skills/liquid-glass-design
Command: npx skills add https://github.com/AlexW00/Zettel --skill liquid-glass-design-alexw00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adopting Apple's iOS 26 Liquid Glass design language requires learning new APIs across SwiftUI, UIKit, and WidgetKit, and developers often struggle with correct container usage, morphing transitions, and widget rendering modes. ## Core Features & Use Cases - SwiftUI Glass Effects: Apply .glassEffect() with tint, shape, and interactivity options, plus GlassEffectContainer for merging and morphing multiple glass elements. - UIKit Integration: Use UIGlassEffect, UIGlassContainerEffect, scroll edge effects, and toolbar glass customization for UIKit-based views. - WidgetKit Support: Handle accented rendering modes, accent groups, and container backgrounds so widgets match tinted Home Screen appearances. - Use Case: When migrating an existing app's blur-based cards and toolbars to iOS 26, follow the patterns to replace legacy materials with morphing Liquid Glass containers. ## Quick Start Ask the assistant to add a Liquid Glass effect with a tinted, interactive capsule shape to a SwiftUI button in your iOS 26 project.

Frequently Asked Questions about liquid-glass-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Liquid Glass effect to a SwiftUI view in iOS 26?▼

Apply the .glassEffect() modifier after your layout modifiers like padding and frame. Customize it with .tint(Color), .interactive(), and a shape such as .capsule, .circle, or .rect(cornerRadius:).

How do I create morphing transitions between glass elements in SwiftUI?▼

Wrap the views in a GlassEffectContainer, assign each element a glassEffectID with a shared @Namespace, and animate hierarchy changes with withAnimation. The container morphs glass shapes as elements appear or disappear.

Does Liquid Glass work in UIKit apps?▼

Yes, UIKit supports Liquid Glass through UIGlassEffect applied to UIVisualEffectView, with tintColor and isInteractive properties. Use UIGlassContainerEffect to group multiple glass views, matching the SwiftUI container pattern.

Why should I use GlassEffectContainer instead of standalone glassEffect modifiers?▼

Multiple standalone glass views hurt rendering performance and cannot morph into each other. GlassEffectContainer optimizes rendering and lets nearby elements blend their shapes based on the spacing parameter.

How do widgets support the tinted Home Screen appearance in iOS 26?▼

Detect the accented mode with the widgetRenderingMode environment value, mark views with .widgetAccentable() for hierarchy, and set image rendering via .widgetAccentedRenderingMode(.monochrome). The system then applies tinted glass styling automatically.

Related Skills

Explore More Software Engineering Skills→
bluewaves-creationsbluewaves-creations

foundation-models

Enable on-device AI inference in Swift apps using Apple Foundation Models.

Official
Advanced
kk20300113-pngkk20300113-png

liquid-glass-design

Implements iOS 26 Liquid Glass design for SwiftUI, UIKit, WidgetKit apps.

Community
Intermediate
venomez-vipervenomez-viper
1

liquid-glass

Implement Liquid Glass design with glassEffect across Apple UI frameworks.

Community
Advanced
Michae2xlMichae2xl

liquid-glass-design

Integrate dynamic glass materials into iOS 26+ apps with SwiftUI, UIKit, and WidgetKit.

Community
Intermediate