Liquid Glass Design
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of liquid-glass-design by affaan-m - installs and ranking accrue to the original listing.
liquid-glass-design is a Claude Code skill that guides developers through implementing Apple's iOS 26 Liquid Glass material with blur, reflection, and interactive morphing across SwiftUI, UIKit, and WidgetKit.
About
liquid-glass-design is an ECC skill for building Apple's iOS 26 Liquid Glass interface material in native Apple frameworks. The skill walks through blur stacks, reflection layers, and interactive morphing patterns that match the system aesthetic across SwiftUI, UIKit, and WidgetKit targets. Developers reach for liquid-glass-design when shipping iOS 26-era interfaces that need depth, glass translucency, and touch-responsive visual transitions without reverse-engineering WWDC samples from scratch. The published readme notes Japanese translation is still in progress, so the English SKILL.md in the ECC repository remains the authoritative implementation reference for layout, materials, and widget constraints.
- Implements dynamic Liquid Glass material with blur and live reflection from surrounding content
- Supports .regular, .tint(Color), .interactive(), and custom shapes including capsule, rect, and circle
- Covers SwiftUI, UIKit, and WidgetKit integration patterns
- Provides ready-to-use glass button, card, toolbar, and container styles
- Includes morphing transition examples between glass elements
Liquid Glass Design by the numbers
- 1,414 all-time installs (skills.sh)
- +95 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill liquid-glass-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you implement iOS 26 Liquid Glass in SwiftUI?
Quickly implement Apple's iOS 26 Liquid Glass material with blur, reflection, and interactive morphing across SwiftUI, UIKit, and WidgetKit.
Who is it for?
iOS developers targeting iOS 26 who need native Liquid Glass materials across apps and widgets.
Skip if: Teams building cross-platform React Native or Flutter UIs without native SwiftUI or UIKit customization.
When should I use this skill?
A developer asks to add Liquid Glass, glassmorphism, or iOS 26 system materials to SwiftUI, UIKit, or WidgetKit screens.
What you get
Production-ready SwiftUI, UIKit, and WidgetKit views using Liquid Glass blur, reflection, and morphing patterns.
- Liquid Glass view implementations
- WidgetKit glass layouts
Files
liquid-glass-design - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/liquid-glass-design/SKILL.md
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Choose liquid-glass-design over generic UI design skills when the target is Apple's iOS 26 Liquid Glass APIs in native Swift frameworks.
FAQ
Which Apple frameworks does liquid-glass-design cover?
liquid-glass-design covers SwiftUI, UIKit, and WidgetKit for iOS 26 Liquid Glass materials. The skill focuses on blur, reflection, and interactive morphing rather than backend or deployment setup.
When should developers use liquid-glass-design?
Developers should use liquid-glass-design when building iOS 26 interfaces that need system-style glass depth and touch morphing. Activate it during native UI implementation, not for web or cross-platform stacks.