How can I implement glass effects in Home Screen widgets?

The skill includes patterns for WidgetKit that handle accented rendering modes and container backgrounds, ensuring widgets integrate perfectly with tinted Home Screen appearances.

What is the benefit of the .interactive() modifier?

The .interactive() modifier allows glass elements to respond visually to user input like touch or mouse pointers, providing the tactile feedback expected in the Liquid Glass system.

What is the Liquid Glass design system?

Liquid Glass is a design language introduced for iOS 26 that utilizes dynamic materials to blur background content, reflect surrounding light, and support interactive morphing between UI elements.

Does this skill support UIKit as well as SwiftUI?

Yes, the skill provides patterns for both frameworks, including UIGlassEffect for UIKit views and .glassEffect() modifiers for SwiftUI components.

How do I optimize performance when using multiple glass elements?

Always wrap sibling glass views in a GlassEffectContainer. This optimizes rendering and allows the system to calculate merge distances for smooth morphing effects.

Liquid Glass Design System

Name: Liquid Glass Design System
Author: Fabio29T

byFabio29T

0•

Mobile Development

Implements the iOS 26 Liquid Glass design language with dynamic materials, interactive morphing, and glass effects for Apple platforms.

This skill provides comprehensive patterns and implementation guides for the iOS 26 Liquid Glass design system, enabling developers to build sophisticated, translucent UI elements that react dynamically to light, color, and touch. It streamlines the creation of glass-style buttons, cards, and containers using advanced SwiftUI modifiers, UIKit's UIGlassEffect, and WidgetKit-specific rendering modes. By utilizing specialized containers and morphing logic, it ensures high-performance rendering and seamless visual transitions between UI states, making it essential for building modern, next-generation Apple applications.

主な機能

01Support for interactive glass effects that react to touch and pointer events

02Fluid morphing transitions between glass elements using GlassEffectContainer

030 GitHub stars

04Optimized rendering patterns for complex layouts with multiple glass layers

05Dynamic glass material implementation with blur and light reflection

06Seamless integration across SwiftUI, UIKit, and WidgetKit frameworks

ユースケース

01Developing interactive widgets that adapt to system-wide accented and tinted modes

02Migrating legacy UIVisualEffectView blur effects to the high-performance Liquid Glass API

03Building modern iOS 26+ applications featuring the new native design language

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fabio29t/everything-claude liquid-glass-design

For use in Claude.ai and ChatGPT

主な機能

01Support for interactive glass effects that react to touch and pointer events

02Fluid morphing transitions between glass elements using GlassEffectContainer

030 GitHub stars

04Optimized rendering patterns for complex layouts with multiple glass layers

05Dynamic glass material implementation with blur and light reflection

06Seamless integration across SwiftUI, UIKit, and WidgetKit frameworks

ユースケース

01Developing interactive widgets that adapt to system-wide accented and tinted modes

02Migrating legacy UIVisualEffectView blur effects to the high-performance Liquid Glass API

03Building modern iOS 26+ applications featuring the new native design language