@mmerterden/multi-agent-pipeline 20.7.0 → 20.8.1

package/pipeline/skills/shared/external/swiftui-liquid-glass/SKILL.md

@@ -1,319 +1,287 @@
 ---
 name: swiftui-liquid-glass
-description: "Implement, review, or improve SwiftUI Liquid Glass effects for iOS 26+. Covers glassEffect modifier, GlassEffectContainer, glass button styles, glass toolbar, glass tab bar, morphing transitions, translucent material, vibrancy, tinting, interactive glass, ToolbarSpacer, scrollEdgeEffectStyle, backgroundExtensionEffect, and availability gating. Use when asked about Liquid Glass, glass buttons, glassEffect, GlassEffectContainer, GlassEffectTransition, glassEffectID, glassEffectUnion, scroll edge effects, or adopting iOS 26 design."
+description: "Liquid Glass in SwiftUI (iOS 26+): glassEffect, Glass tint/interactive variants, GlassEffectContainer, glassEffectID morphing, glassEffectUnion, GlassEffectTransition, glass and glassProminent button styles, glass toolbars and tab bars, ToolbarSpacer, scrollEdgeEffectStyle, backgroundExtensionEffect, material, vibrancy, tinting, availability gating with fallbacks. Use when implementing, reviewing or improving Liquid Glass, building glass buttons or controls, adding morphing or scroll edge effects, or adopting the iOS 26 design."
 metadata:
-  source: "dpearson2699/swift-ios-skills (PolyForm Perimeter 1.0.0)"
+  source: multi-agent-pipeline
 ---
 
 # SwiftUI Liquid Glass
 
-Liquid Glass is the dynamic translucent material introduced in iOS 26 (and iPadOS 26,
-macOS 26, tvOS 26, watchOS 26). It blurs content behind it, reflects surrounding color
-and light, and reacts to touch and pointer interactions. Standard SwiftUI components
-(tab bars, toolbars, navigation bars, sheets) adopt Liquid Glass automatically when
-built with the iOS 26 SDK. Use the APIs below for custom views and controls.
+Apple's 26 releases (iOS and iPadOS, macOS, tvOS, watchOS) introduced a new
+material called Liquid Glass. It blurs what lies behind it, picks up color and light
+from its surroundings, and responds to touch and pointer input.
 
-See [references/liquid-glass.md](references/liquid-glass.md) for the full API reference with additional examples.
-
-## Contents
-
-- [Workflow](#workflow)
-- [Core API Summary](#core-api-summary)
-- [Code Examples](#code-examples)
-- [Common Mistakes](#common-mistakes)
-- [Review Checklist](#review-checklist)
-- [References](#references)
+System chrome gets it for free: once an app compiles against the 26 SDK, its
+tab bars, toolbars, navigation bars and sheets are glass already. The APIs below are for your own
+views and controls. Full signatures, conformances, performance and
+accessibility notes are in [references/liquid-glass.md](references/liquid-glass.md).
 
 ## Workflow
 
-Choose the path that matches the request:
+### 1. Implement a new feature
 
-### 1. Implement a new feature with Liquid Glass
+1. List which surfaces should become glass (cards, chips, floating controls,
+   bars you draw yourself).
+2. For each one, decide the shape, how prominent it is, and whether it is
+   interactive.
+3. Put glass elements that sit together inside one `GlassEffectContainer`.
+4. Add `.glassEffect()` once padding, frame and styling are in place.
+5. Add `.interactive()` only to elements that can be tapped or focused.
+6. Where elements appear, disappear or rearrange with animation, give them
+   `glassEffectID(_:in:)` so they morph.
+7. Wrap all of it in an `#available(iOS 26, *)` check, with a fallback look.
 
-1. Identify target surfaces (cards, chips, floating controls, custom bars).
-2. Decide shape, prominence, and whether each element needs interactivity.
-3. Wrap grouped glass elements in a `GlassEffectContainer`.
-4. Apply `.glassEffect()` **after** layout and appearance modifiers.
-5. Add `.interactive()` only to tappable/focusable elements.
-6. Add morphing transitions with `glassEffectID(_:in:)` where the view hierarchy
-   changes with animation.
-7. Gate with `if #available(iOS 26, *)` and provide a fallback for earlier versions.
+### 2. Improve an existing feature
 
-### 2. Improve an existing feature with Liquid Glass
+1. Swap hand-built blur or material backgrounds for `.glassEffect()`.
+2. Group sibling glass elements in a container, which both blends them and
+   renders them together.
+3. Buttons that imitate glass by hand become `.buttonStyle(.glass)` or
+   `.buttonStyle(.glassProminent)`.
+4. Wherever items animate in or out, add morphing.
 
-1. Find custom blur/material backgrounds that can be replaced with `.glassEffect()`.
-2. Wrap sibling glass elements in `GlassEffectContainer` for blending and performance.
-3. Replace custom glass-like buttons with `.buttonStyle(.glass)` or `.buttonStyle(.glassProminent)`.
-4. Add morphing transitions where animated insertion/removal occurs.
+### 3. Review
 
-### 3. Review existing Liquid Glass usage
+Go through the checklist below, item by item.
 
-Run through the Review Checklist below and verify each item.
-
-## Core API Summary
+## Core API summary
 
 ### glassEffect(_:in:)
 
-Applies Liquid Glass behind a view. Default: `.regular` variant in a `Capsule` shape.
+A `nonisolated` view modifier taking a `Glass` value (default `.regular`) and a shape (default
+`DefaultGlassEffectShape()`, a capsule). Called bare, it gives regular glass in
+a capsule.
 
-```swift
-nonisolated func glassEffect(
-    _ glass: Glass = .regular,
-    in shape: some Shape = DefaultGlassEffectShape()
-) -> some View
-```
+### Glass
 
-### Glass struct
+| Variant | Meaning |
+| --- | --- |
+| `.regular` | The standard material |
+| `.clear` | Lighter, with minimal tint, for use over rich media |
+| `.identity` | No effect at all; useful for switching glass off conditionally |
 
-| Property / Method | Purpose |
-|---|---|
-| `.regular` | Standard glass material |
-| `.clear` | Clear variant (minimal tint) |
-| `.identity` | No visual effect (pass-through) |
-| `.tint(_:)` | Add a color tint for prominence |
-| `.interactive(_:)` | React to touch and pointer interactions |
+Modifiers return a new `Glass` and chain: `.tint(_:)` adds color for
+prominence, `.interactive(_:)` makes it respond to touch and pointer.
 
-Chain them: `.regular.tint(.blue).interactive()`
+```swift
+.glassEffect(.regular.tint(.teal).interactive())
+```
 
 ### GlassEffectContainer
 
-Wraps multiple glass views for shared rendering, blending, and morphing.
+`GlassEffectContainer(spacing:)` lets its children share one rendering pass, so
+they can blend into each other and morph between shapes.
 
-```swift
-GlassEffectContainer(spacing: 24) {
-    // child views with .glassEffect()
-}
-```
+`spacing` is the distance at which neighbouring shapes start to blend. Set it
+equal to or larger than the spacing of the layout inside, so shapes merge while
+they move but stay separate at rest.
 
-The `spacing` controls when nearby glass shapes begin to blend. Match or exceed
-the interior layout spacing so shapes merge during animated transitions but remain
-separate at rest.
+### Morphing and transitions
 
-### Morphing & Transitions
+| API | Purpose |
+| --- | --- |
+| `glassEffectID(_:in:)` | Names a shape within a namespace so animation can morph it |
+| `glassEffectUnion(id:namespace:)` | Several views drawn as one combined glass shape |
+| `glassEffectTransition(_:)` | How glass appears and disappears |
 
-| Modifier | Purpose |
-|---|---|
-| `glassEffectID(_:in:)` | Stable identity for morphing during view hierarchy changes |
-| `glassEffectUnion(id:namespace:)` | Merge multiple views into one glass shape |
-| `glassEffectTransition(_:)` | Control how glass appears/disappears |
+`GlassEffectTransition` values:
 
-Transition types: `.matchedGeometry` (default when within spacing), `.materialize`
-(fade content + animate glass in/out), `.identity` (no transition).
+- `.matchedGeometry`: morph into or out of a nearby shape (the default when
+  shapes are within the container's spacing).
+- `.materialize`: fade the content and animate the glass in or out, without
+  matching geometry.
+- `.identity`: no transition.
 
-### Button Styles
+### Button styles
 
 ```swift
-Button("Action") { }
-    .buttonStyle(.glass)           // standard glass button
+Button("Send", systemImage: "paperplane") { send() }
+    .buttonStyle(.glass)
 
-Button("Primary") { }
-    .buttonStyle(.glassProminent)  // prominent glass button
+Button("Book now") { book() }
+    .buttonStyle(.glassProminent)
 ```
 
-### Scroll Edge Effects and Background Extension (iOS 26+)
-
-These complement Liquid Glass when building custom toolbars and scroll views:
+### Edge effects and extended backgrounds (iOS 26+)
 
 ```swift
-ScrollView {
-    content
-}
-.scrollEdgeEffectStyle(.soft, for: .top)  // Configures edge effect at scroll boundaries
-
-// Duplicate view into mirrored copies at safe area edges with blur (e.g., under sidebars)
-content
-    .backgroundExtensionEffect()
+ScrollView { feed }
+    .scrollEdgeEffectStyle(.soft, for: .top)
 ```
 
-### ToolbarSpacer (iOS 26+)
+`.scrollEdgeEffectStyle(_:for:)` sets how content fades or cuts off where it
+meets a floating bar at a scroll edge.
 
-Creates a visual break between items in toolbars:
+`.backgroundExtensionEffect()` extends a view past the safe area by drawing
+mirrored, blurred copies of it at the edges. A hero image in a split view's
+detail column can then continue underneath the sidebar.
+
+### ToolbarSpacer (iOS 26+)
 
 ```swift
 .toolbar {
-    ToolbarItem { Button("Edit") { } }
+    ToolbarItem { Button("Revert", systemImage: "clock.arrow.circlepath") { revert() } }
     ToolbarSpacer(.fixed)
-    ToolbarItem { Button("Share") { } }
+    ToolbarItem { Button("Done") { finish() } }
 }
 ```
 
-## Code Examples
+A fixed spacer splits the items into separate glass groups.
 
-### Basic glass effect with availability gate
+## Code examples
+
+### A gated glass card
 
 ```swift
-if #available(iOS 26, *) {
-    Text("Status")
-        .padding()
-        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
-} else {
-    Text("Status")
-        .padding()
-        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
-}
-```
+struct StatusCard: View {
+    let title: String
 
-### Grouped glass elements in a container
+    var body: some View {
+        let label = Text(title).font(.headline).padding(20)
 
-```swift
-GlassEffectContainer(spacing: 24) {
-    HStack(spacing: 24) {
-        ForEach(tools) { tool in
-            Image(systemName: tool.icon)
-                .frame(width: 56, height: 56)
-                .glassEffect(.regular.interactive())
+        if #available(iOS 26, *) {
+            let tappable = Glass.regular.interactive()
+            label.glassEffect(tappable, in: .rect(cornerRadius: 18))
+        } else {
+            label.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 18))
         }
     }
 }
 ```
 
-### Morphing transition
+### A row of glass controls
+
+Container spacing matches the stack spacing so the circles blend only when they
+move toward each other.
 
 ```swift
-@State private var isExpanded = false
-@Namespace private var ns
-
-var body: some View {
-    GlassEffectContainer(spacing: 40) {
-        HStack(spacing: 40) {
-            Image(systemName: "pencil")
-                .frame(width: 80, height: 80)
-                .glassEffect()
-                .glassEffectID("pencil", in: ns)
-
-            if isExpanded {
-                Image(systemName: "eraser.fill")
-                    .frame(width: 80, height: 80)
-                    .glassEffect()
-                    .glassEffectID("eraser", in: ns)
+@available(iOS 26, *)
+struct PlaybackControls: View {
+    private let symbols = ["backward.fill", "play.fill", "forward.fill"]
+    private let gap: CGFloat = 20
+
+    var body: some View {
+        GlassEffectContainer(spacing: gap) {
+            HStack(spacing: gap) {
+                ForEach(symbols, id: \.self) { symbol in
+                    Image(systemName: symbol)
+                        .font(.title2)
+                        .frame(width: 60, height: 60)
+                        .glassEffect(.regular.interactive())
+                }
             }
         }
     }
-
-    Button("Toggle") {
-        withAnimation { isExpanded.toggle() }
-    }
-    .buttonStyle(.glass)
 }
 ```
 
-### Unioning views into a single glass shape
+### Morphing between states
 
 ```swift
-@Namespace private var ns
-
-GlassEffectContainer(spacing: 20) {
-    HStack(spacing: 20) {
-        ForEach(items.indices, id: \.self) { i in
-            Image(systemName: items[i])
-                .frame(width: 80, height: 80)
-                .glassEffect()
-                .glassEffectUnion(id: i < 2 ? "group1" : "group2", namespace: ns)
+@available(iOS 26, *)
+struct ExpandingActions: View {
+    @Namespace private var glassSpace
+    @State private var expanded = false
+
+    var body: some View {
+        let gap: CGFloat = 36
+        return GlassEffectContainer(spacing: gap) {
+            HStack(spacing: gap) {
+                Button("Compose", systemImage: "square.and.pencil") {
+                    withAnimation(.bouncy) { expanded.toggle() }
+                }
+                .buttonStyle(.glass)
+                .glassEffectID("compose", in: glassSpace)
+
+                if expanded {
+                    Button("Attach", systemImage: "paperclip") { }
+                        .buttonStyle(.glass)
+                        .glassEffectID("attach", in: glassSpace)
+                }
+            }
         }
     }
 }
 ```
 
-### Tinted glass badge
+### Merging selected shapes with a union
 
 ```swift
-struct GlassBadge: View {
-    let icon: String
-    let tint: Color
+@available(iOS 26, *)
+struct FilterChips: View {
+    @Namespace private var chipSpace
+    let filters = ["Today", "Week", "Month", "Year"]
 
     var body: some View {
-        Image(systemName: icon)
-            .font(.title2)
-            .padding()
-            .glassEffect(.regular.tint(tint), in: .rect(cornerRadius: 12))
+        let gap: CGFloat = 12
+        return GlassEffectContainer(spacing: gap) {
+            HStack(spacing: gap) {
+                ForEach(filters.indices, id: \.self) { index in
+                    Text(filters[index])
+                        .padding(.horizontal, 14)
+                        .padding(.vertical, 8)
+                        .glassEffect()
+                        .glassEffectUnion(id: index < 2 ? "short" : "long", namespace: chipSpace)
+                }
+            }
+        }
     }
 }
 ```
 
-## Common Mistakes
+Chips 0 and 1 render as one glass shape and chips 2 and 3 as another.
 
-### DON'T: Apply Liquid Glass to every surface
-
-Overuse distracts from content. Glass should emphasize key interactive elements, not decorate everything.
+### A tinted badge
 
 ```swift
-// WRONG: Glass on everything
-VStack {
-    Text("Title").glassEffect()
-    Text("Subtitle").glassEffect()
-    Divider().glassEffect()
-    Text("Body").glassEffect()
-}
-
-// CORRECT: Glass on primary interactive elements only
-VStack {
-    Text("Title").font(.title)
-    Text("Subtitle").font(.subheadline)
-    Divider()
-    Text("Body")
-}
-.padding()
-.glassEffect()
-```
-
-### DON'T: Nest GlassEffectContainer inside another
-
-Nested containers cause undefined rendering behavior.
+@available(iOS 26, *)
+struct CountBadge: View {
+    let count: Int
+    let accent: Color
 
-```swift
-// WRONG
-GlassEffectContainer {
-    GlassEffectContainer {
-        content.glassEffect()
+    var body: some View {
+        Text(count, format: .number)
+            .font(.caption.bold())
+            .padding(.horizontal, 10)
+            .padding(.vertical, 4)
+            .glassEffect(.regular.tint(accent), in: .rect(cornerRadius: 10))
     }
 }
-
-// CORRECT: Single container wrapping all glass views
-GlassEffectContainer {
-    content.glassEffect()
-}
-```
-
-### DON'T: Add .interactive() to non-interactive elements
-
-`.interactive()` adds visual affordance suggesting tappability. Using it on decorative glass misleads users.
-
-### DON'T: Apply .glassEffect() before layout modifiers
-
-Glass calculates its shape from the final frame. Applying it before padding/frame produces incorrect bounds.
-
-```swift
-// WRONG: Glass applied before padding
-Text("Label").glassEffect().padding()
-
-// CORRECT: Glass applied after layout
-Text("Label").padding().glassEffect()
 ```
 
-### DON'T: Forget accessibility testing
-
-Always test with Reduce Transparency and Reduce Motion enabled. Glass degrades gracefully but verify content remains readable.
-
-### DON'T: Skip availability checks
-
-Liquid Glass requires iOS 26+. Gate with `if #available(iOS 26, *)` and provide a fallback.
-
-## Review Checklist
-
-- [ ] **Availability**: `if #available(iOS 26, *)` present with fallback UI.
-- [ ] **Container**: Multiple glass views wrapped in `GlassEffectContainer`.
-- [ ] **Modifier order**: `.glassEffect()` applied after layout/appearance modifiers.
-- [ ] **Interactivity**: `.interactive()` used only where user interaction exists.
-- [ ] **Transitions**: `glassEffectID` used with `@Namespace` for morphing animations.
-- [ ] **Transition type**: `.matchedGeometry` for nearby effects; `.materialize` for distant ones.
-- [ ] **Consistency**: Shapes, tints, and spacing are uniform across related elements.
-- [ ] **Performance**: Glass effects are limited in number; container used for grouping.
-- [ ] **Accessibility**: Tested with Reduce Transparency and Reduce Motion enabled.
-- [ ] **Button styles**: Standard `.glass` / `.glassProminent` used for buttons.
-- [ ] Ensure types driving Liquid Glass effects are Sendable; apply glass effects on @MainActor context
+## Common mistakes
+
+1. **Glass everywhere.** Too much glass competes for attention. Put it on the
+   key interactive elements; for a padded group of labels, use one glass
+   surface for the group, not one per label.
+2. **Nested containers.** A `GlassEffectContainer` inside another gives
+   undefined rendering. Use one container per group.
+3. **`.interactive()` on decoration.** It tells the user the element can be
+   pressed. Leave it off anything that cannot.
+4. **Glass before padding or frame.** The effect sizes its shape from the
+   frame at the point where it is applied; add it before `.padding()` or
+   `.frame()` and the shape comes out too small.
+5. **Skipping accessibility settings.** Turn on Reduce Transparency, then
+   Reduce Motion, and confirm text stays readable in each.
+6. **No availability gate.** Every one of these APIs needs iOS 26. Gate it and
+   give older systems a fallback.
+
+## Review checklist
+
+- [ ] `#available(iOS 26, *)` gate with a fallback
+- [ ] Multiple glass views grouped in a `GlassEffectContainer`
+- [ ] `.glassEffect()` placed after layout and appearance modifiers
+- [ ] `.interactive()` only where the user can interact
+- [ ] `glassEffectID` paired with a `@Namespace` for morphing
+- [ ] `.matchedGeometry` for nearby shapes, `.materialize` for distant ones
+- [ ] Related elements share shapes, tints and spacing
+- [ ] Glass kept to a small number of surfaces, grouped by containers
+- [ ] Checked once with Reduce Transparency on and once with Reduce Motion on
+- [ ] Buttons use `.glass` or `.glassProminent` rather than hand-built glass
+- [ ] Values that drive glass (IDs, tints) are `Sendable`, and the effects are applied from main-actor view code
 
 ## References
 
-- Full API guide: [references/liquid-glass.md](references/liquid-glass.md)
-- Apple docs: [Applying Liquid Glass to custom views](https://sosumi.ai/documentation/swiftui/Applying-Liquid-Glass-to-custom-views)
-- Apple docs: [Adopting Liquid Glass](https://sosumi.ai/documentation/technologyoverviews/adopting-liquid-glass)
+- [references/liquid-glass.md](references/liquid-glass.md): signatures, transitions, performance, accessibility
+- [Article: glass on custom views](https://developer.apple.com/documentation/swiftui/applying-liquid-glass-to-custom-views)
+- [Overview: adopting the new material](https://developer.apple.com/documentation/technologyoverviews/adopting-liquid-glass)