affaan-m avatar

Liquid Glass Design

A focused implementation guide for Apple's iOS 26 Liquid Glass material system across SwiftUI, UIKit, and WidgetKit. You get the core glassEffect() modifier patterns, the GlassEffectContainer that enables morphing between elements, and the namespace-based ID system for smooth transitions. The UIKit coverage shows how to use UIGlassEffect with UIVisualEffectView, and the widget section handles accented rendering modes for tinted home screens. Most useful when you're actually building for iOS 26 and need the specific API calls rather than design theory. The spacing parameter for controlling when glass elements merge is the kind of detail that saves you from guessing.

skills.sh installs
6.4K
GitHub stars
300.3K
last updated
Aug 21, 2026

Install

$ npx -y skills add affaan-m/ecc --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/ecc
Categories
Mobile Development, Design & UI/UX
First seen
Jul 14, 2026

More from affaan-m/ecc

All 263
1affaan-m avataraccessibilityaffaan-m/eccDesign, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility tr6.1Kskills.sh installs
2trailofbits avatarfirebase-apk-scannertrailofbits/skillsScans Android APKs for Firebase security misconfigurations including open databases, storage buckets, authentication issues, and exposed cloud functions. Use wh5.8Kskills.sh installs
3trailofbits avatarconstant-time-analysistrailofbits/skillsDetects timing side-channel vulnerabilities in cryptographic code. Use when implementing or reviewing crypto code, encountering division on secrets, secret-depe5.8Kskills.sh installs
4jeffallan avatarvue-expertjeffallan/claude-skillsBuilds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, impleme4.7Kskills.sh installs
5dotnet avatarassertion-qualitydotnet/skillsAnalyzes the variety and depth of assertions across test suites in any language. Use when the user asks to evaluate assertion quality, find shallow tests, ident4.3Kskills.sh installs
6dotnet avatartest-gap-analysisdotnet/skillsPerforms pseudo-mutation analysis on production code in any language to find gaps in existing tests. Use when the user asks to find weak or shallow tests, disco4.3Kskills.sh installs