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-code

Installs 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
1wondelai avatardesign-sprintwondelai/skillsRun a structured 5-day process to prototype, test, and validate product ideas with real users. Use when the user mentions "design sprint", "validate before we b5.7Kskills.sh installs
2affaan-m avatarmotion-advancedaffaan-m/eccAdvanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loader5.6Kskills.sh installs
3julianoczkowski avatardesign-flowjulianoczkowski/designer-skillsRun the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go t5.3Kskills.sh installs
4samber avatarskill-progressive-disclosure-designsamber/cc-skillsDecide how to split skill content between SKILL.md and reference files for context efficiency and reliable triggering. Use this whenever creating a new Claude s5.1Kskills.sh installs
5ehmo avatarmacos-design-guidelinesehmo/platform-design-skillsApple Human Interface Guidelines for Mac. Use when building macOS apps with SwiftUI or AppKit, implementing menu bars, toolbars, window management, or keyboard 4.5Kskills.sh installs
6vinvcn avatarcodebase-designvinvcn/mattpocock-skills-zh-cn用于设计深模块的共享词汇。适用于用户想设计或改进模块接口、寻找深化机会、决定 seam 放在哪里、让代码更容易测试或更适合 AI 导航,或其他技能需要深模块词汇时。4.3Kskills.sh installs