PaperclipOrg
Claude Agent Skill · by Affaan M

Liquid Glass Design

Install Liquid Glass Design skill for Claude Code from affaan-m/everything-claude-code.

Install
Terminal · npx
$npx skills add https://github.com/affaan-m/everything-claude-code --skill liquid-glass-design
Works with Paperclip

How Liquid Glass Design fits into a Paperclip company.

Liquid Glass Design drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md279 lines
Expand
---name: liquid-glass-designdescription: iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.--- # 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: ```swiftText("Hello, World!")    .font(.title)    .padding()    .glassEffect()  // Default: regular variant, capsule shape``` ### Customizing Shape and Tint ```swiftText("Hello, World!")    .font(.title)    .padding()    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))``` Key customization options:- `.regular` — standard glass effect- `.tint(Color)` — add color tint for prominence- `.interactive()` — react to touch and pointer interactions- Shape: `.capsule` (default), `.rect(cornerRadius:)`, `.circle` ### Glass Button Styles ```swiftButton("Click Me") { /* action */ }    .buttonStyle(.glass) Button("Important") { /* action */ }    .buttonStyle(.glassProminent)``` ### GlassEffectContainer for Multiple Elements Always wrap multiple glass views in a container for performance and morphing: ```swiftGlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()         Image(systemName: "eraser.fill")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()    }}``` The `spacing` parameter controls merge distance — closer elements blend their glass shapes together. ### Uniting Glass Effects Combine multiple views into a single glass shape with `glassEffectUnion`: ```swift@Namespace private var namespace GlassEffectContainer(spacing: 20.0) {    HStack(spacing: 20.0) {        ForEach(symbolSet.indices, id: \.self) { item in            Image(systemName: symbolSet[item])                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)        }    }}``` ### Morphing Transitions Create smooth morphing when glass elements appear/disappear: ```swift@State private var isExpanded = false@Namespace private var namespace GlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .glassEffect()            .glassEffectID("pencil", in: namespace)         if isExpanded {            Image(systemName: "eraser.fill")                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectID("eraser", in: namespace)        }    }} Button("Toggle") {    withAnimation { isExpanded.toggle() }}.buttonStyle(.glass)``` ### Extending Horizontal Scrolling Under Sidebar To allow horizontal scroll content to extend under a sidebar or inspector, ensure the `ScrollView` content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed. ## Core Pattern — UIKit ### Basic UIGlassEffect ```swiftlet glassEffect = UIGlassEffect()glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)glassEffect.isInteractive = true let visualEffectView = UIVisualEffectView(effect: glassEffect)visualEffectView.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.layer.cornerRadius = 20visualEffectView.clipsToBounds = true view.addSubview(visualEffectView)NSLayoutConstraint.activate([    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),    visualEffectView.widthAnchor.constraint(equalToConstant: 200),    visualEffectView.heightAnchor.constraint(equalToConstant: 120)]) // Add content to contentViewlet label = UILabel()label.text = "Liquid Glass"label.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.contentView.addSubview(label)NSLayoutConstraint.activate([    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)])``` ### UIGlassContainerEffect for Multiple Elements ```swiftlet containerEffect = UIGlassContainerEffect()containerEffect.spacing = 40.0 let containerView = UIVisualEffectView(effect: containerEffect) let firstGlass = UIVisualEffectView(effect: UIGlassEffect())let secondGlass = UIVisualEffectView(effect: UIGlassEffect()) containerView.contentView.addSubview(firstGlass)containerView.contentView.addSubview(secondGlass)``` ### Scroll Edge Effects ```swiftscrollView.topEdgeEffect.style = .automaticscrollView.bottomEdgeEffect.style = .hardscrollView.leftEdgeEffect.isHidden = true``` ### Toolbar Glass Integration ```swiftlet favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))favoriteButton.hidesSharedBackground = true  // Opt out of shared glass background``` ## Core Pattern — WidgetKit ### Rendering Mode Detection ```swiftstruct MyWidgetView: View {    @Environment(\.widgetRenderingMode) var renderingMode     var body: some View {        if renderingMode == .accented {            // Tinted mode: white-tinted, themed glass background        } else {            // Full color mode: standard appearance        }    }}``` ### Accent Groups for Visual Hierarchy ```swiftHStack {    VStack(alignment: .leading) {        Text("Title")            .widgetAccentable()  // Accent group        Text("Subtitle")            // Primary group (default)    }    Image(systemName: "star.fill")        .widgetAccentable()  // Accent group}``` ### Image Rendering in Accented Mode ```swiftImage("myImage")    .widgetAccentedRenderingMode(.monochrome)``` ### Container Background ```swiftVStack { /* content */ }    .containerBackground(for: .widget) {        Color.blue.opacity(0.2)    }``` ## Key Design Decisions | Decision | Rationale ||----------|-----------|| GlassEffectContainer wrapping | Performance optimization, enables morphing between glass elements || `spacing` parameter | Controls merge distance — fine-tune how close elements must be to blend || `@Namespace` + `glassEffectID` | Enables smooth morphing transitions on view hierarchy changes || `interactive()` modifier | Explicit opt-in for touch/pointer reactions — not all glass should respond || UIGlassContainerEffect in UIKit | Same container pattern as SwiftUI for consistency || Accented rendering mode in widgets | System applies tinted glass when user selects tinted Home Screen | ## Best Practices - **Always use GlassEffectContainer** when applying glass to multiple sibling views — it enables morphing and improves rendering performance- **Apply `.glassEffect()` after** other appearance modifiers (frame, font, padding)- **Use `.interactive()`** only on elements that respond to user interaction (buttons, toggleable items)- **Choose spacing carefully** in containers to control when glass effects merge- **Use `withAnimation`** when changing view hierarchies to enable smooth morphing transitions- **Test across appearances** — light mode, dark mode, and accented/tinted modes- **Ensure accessibility contrast** — text on glass must remain readable ## Anti-Patterns to Avoid - Using multiple standalone `.glassEffect()` views without a GlassEffectContainer- Nesting too many glass effects — degrades performance and visual clarity- Applying glass to every view — reserve for interactive elements, toolbars, and cards- Forgetting `clipsToBounds = true` in UIKit when using corner radii- Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance- Using opaque backgrounds behind glass — defeats the translucency effect ## When to Use - Navigation bars, toolbars, and tab bars with the new iOS 26 design- Floating action buttons and card-style containers- Interactive controls that need visual depth and touch feedback- Widgets that should integrate with the system's Liquid Glass appearance- Morphing transitions between related UI states