skills.rest
gustavscirulis
gustavscirulisCOMMUNITY
Explore all skills by this author →
𝕏@gustavscirulisGitHub

liquid-glass

Implement Apple's Liquid Glass design language across SwiftUI, AppKit, UIKit, and WidgetKit.

114|8|Updated Mar 4, 2025
Search Tags:#design#ui#swiftui#appkit#uikit#widgetkit#glass effect
One-click install
npx skills add https://github.com/gustavscirulis/snapgrid --skill liquid-glass-gustavscirulis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: liquid-glass
Source: https://github.com/gustavscirulis/snapgrid/tree/main/.claude/skills/skills/design/liquid-glass
Command: npx skills add https://github.com/gustavscirulis/snapgrid --skill liquid-glass-gustavscirulis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the implementation of Apple's modern Liquid Glass design language across various Apple UI frameworks, providing visually appealing and interactive glass-like effects.

Core Features & Use Cases

  • Cross-Platform Glass Effects: Apply .glassEffect() in SwiftUI, NSGlassEffectView in AppKit, UIGlassEffect in UIKit, and integrate with WidgetKit.
  • Interactive & Tinted Effects: Create dynamic UIs that respond to user interaction and apply custom color tints.
  • Morphing Transitions: Achieve fluid animations between views using GlassEffectContainer and glassEffectUnion.
  • Use Case: A user wants to create a sleek, modern settings panel in their macOS app using SwiftUI, incorporating blurred, interactive glass elements for buttons and content cards.

Quick Start

Apply a basic glass effect to a Text view in SwiftUI by appending .glassEffect() to it.

Frequently Asked Questions about liquid-glass

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

FAQPage Schema
How do I apply Liquid Glass effects in SwiftUI?▼

To apply Liquid Glass effects in SwiftUI, append the `.glassEffect()` modifier to any view such as Text. This creates modern, transparent, and interactive UI elements that align with Apple's latest design language.

Can I use Liquid Glass effects in UIKit and AppKit?▼

Yes, Liquid Glass effects are fully supported in UIKit and AppKit. You can implement them using `UIGlassEffect` for iOS apps and `NSGlassEffectView` for macOS applications to create consistent glass-like interfaces.

What is the best way to create morphing transitions between glass elements?▼

The best way to create fluid morphing transitions between glass elements is by using `GlassEffectContainer` and `glassEffectUnion`. These APIs allow interactive UI views to merge and animate seamlessly during user interactions.

Does Liquid Glass support custom color tinting for UI components?▼

Yes, Liquid Glass supports custom color tinting for UI components. You can create dynamic interfaces that apply custom color tints to transparent glass elements, allowing for personalized visual styling across SwiftUI, UIKit, and AppKit.

How do Liquid Glass effects work with WidgetKit?▼

Liquid Glass integrates with WidgetKit by supporting specific widget rendering modes. This allows developers to apply the modern glass design language to interactive widgets across Apple platforms.

Can I add Liquid Glass edge effects to scroll views in SwiftUI?▼

Yes, you can add Liquid Glass edge effects to scroll views in SwiftUI. The implementation supports advanced use cases including scroll view edge effects, creating fluid visual boundaries as users scroll through content.

Related Skills

Explore More Design & Creative Skills→
jtvarisjtvaris

liquid-glass

Implement Liquid Glass design across Apple UI frameworks with glassEffect APIs.

Community
Advanced
ano4lano4l

liquid-glass

Apply Liquid Glass glass effects across SwiftUI, AppKit, UIKit, and WidgetKit.

Community
Advanced
femitzfemitz

swiftui-liquid-glass

Apply Liquid Glass effects to SwiftUI views for iOS 26+.

Community
Advanced
GatsbyhateyouGatsbyhateyou

glassmorphism

Generate frosted glass UI elements with adjustable blur and transparency using Tailwind CSS.

Community
Basic