swiftui-liquid-glass

This skill guides implementation and review of swiftui features using the liquid glass api introduced in a recent ios release. It covers choosing where glass treatment belongs, preferring native glass modifiers and containers over custom blurs, applying effects after layout modifiers, and keeping shapes consistent across related surfaces. The dependency that matters is platform version. The skill only applies to projects targeting that release or newer, and it instructs checking availability with compile-time gating plus fallbacks for older systems. On a project that must support earlier versions, the glass treatment becomes a progressive enhancement rather than the default look.

Use case: adopting modern glass surfaces in a swiftui screen

This skill is about using the platform's glass material in a ui framework correctly: where it belongs, in what order the modifiers go, and how to gate it behind an availability check. It covers reviewing existing usage as well as introducing the material to a new screen. ## What it does - Reviews where the material should and should not appear. - Checks modifier order, shape usage and container placement. - Introduces a glass container when several glass elements sit together. - Makes glass interactive only for elements that respond to touch or pointer input. - Gates usage behind an availability check with a non glass fallback. ## When it is the wrong choice It depends on a recent platform version, so any deployment target below it needs the fallback path exercised rather than assumed. Ordering matters more than it looks: the visual modifier has to come after layout and appearance modifiers, and getting that wrong produces subtle rendering problems instead of a clean error. Grouping multiple glass elements matters too, because leaving them uncontained costs performance that only shows up on a device. And a review needs the real view code, since a description of the screen is not enough to judge ordering or container placement. ```json { "prefer": "native glass apis over custom blurs", "container": "group several glass elements together", "order": "glass modifier after layout and appearance modifiers", "gate": "availability check with a non glass fallback" } ``` ## Working notes - Interactive glass is only for tappable or focusable elements. - Shapes should stay consistent across related elements for a cohesive look. - Morphing transitions belong only where the view hierarchy changes with animation.