Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/openai/plugins --skill swiftui-liquid-glass- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads swiftui-liquid-glass automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
SwiftUI Liquid Glass
Overview
Use this skill to build or review SwiftUI features that fully align with the iOS 26+ Liquid Glass API. Prioritize native APIs (glassEffect, GlassEffectContainer, glass button styles) and Apple design guidance. Keep usage consistent, interactive where needed, and performance aware.
Workflow Decision Tree
Choose the path that matches the request:
1) Review an existing feature
- Inspect where Liquid Glass should be used and where it should not.
- Verify correct modifier order, shape usage, and container placement.
- Check for iOS 26+ availability handling and sensible fallbacks.
2) Improve a feature using Liquid Glass
- Identify target components for glass treatment (surfaces, chips, buttons, cards).
- Refactor to use
GlassEffectContainerwhere multiple glass elements appear. - Introduce interactive glass only for tappable or focusable elements.
3) Implement a new feature using Liquid Glass
- Design the glass surfaces and interactions first (shape, prominence, grouping).
- Add glass modifiers after layout/appearance modifiers.
- Add morphing transitions only when the view hierarchy changes with animation.
Core Guidelines
- Prefer native Liquid Glass APIs over custom blurs.
- Use
GlassEffectContainerwhen multiple glass elements coexist. - Apply
.glassEffect(...)after layout and visual modifiers. - Use
.interactive()for elements that respond to touch/pointer. - Keep shapes consistent across related elements for a cohesive look.
- Gate with
#available(iOS 26, *)and provide a non-glass fallback.
Review Checklist
- Availability:
#available(iOS 26, *)present with fallback UI. - Composition: Multiple glass views wrapped in
GlassEffectContainer. - Modifier order:
glassEffectapplied after layout/appearance modifiers. - Interactivity:
interactive()only where user interaction exists. - Transitions:
glassEffectIDused with@Namespacefor morphing. - Consistency: Shapes, tinting, and spacing align across the feature.
Implementation Checklist
- Define target elements and desired glass prominence.
- Wrap grouped glass elements in
GlassEffectContainerand tune spacing. - Use
.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))as needed. - Use
.buttonStyle(.glass)/.buttonStyle(.glassProminent)for actions. - Add morphing transitions with
glassEffectIDwhen hierarchy changes. - Provide fallback materials and visuals for earlier iOS versions.
Quick Snippets
Use these patterns directly and tailor shapes/tints/spacing.
if #available(iOS 26, *) {
Text("Hello")
.padding()
.glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
Text("Hello")
.padding()
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}
GlassEffectContainer(spacing: 24) {
HStack(spacing: 24) {
Image(systemName: "scribble.variable")
.frame(width: 72, height: 72)
.font(.system(size: 32))
.glassEffect()
Image(systemName: "eraser.fill")
.frame(width: 72, height: 72)
.font(.system(size: 32))
.glassEffect()
}
}
Button("Confirm") { }
.buttonStyle(.glassProminent)
Resources
- Reference guide:
references/liquid-glass.md - Prefer Apple docs for up-to-date API details, and use web search to consult current Apple Developer documentation in addition to the references above.
FAQ
What does the swiftui-liquid-glass skill do?
Implement and review iOS 26+ SwiftUI Liquid Glass UI. Use when adopting Liquid Glass or checking its correctness, performance, and design fit.
How do I install swiftui-liquid-glass?
Run npx skills add https://github.com/openai/plugins --skill swiftui-liquid-glass in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/swiftui-liquid-glass/ (personal) or .claude/skills/swiftui-liquid-glass/ (project).
Which AI agents can use swiftui-liquid-glass?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is swiftui-liquid-glass safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains swiftui-liquid-glass?
It is published by openai in openai/plugins, and it is an official skill from the maker of the technology it covers. It has 122 recorded installs.
More from openai/plugins
ios-memgraph-leaks
openai/plugins
Capture and inspect iOS leaks and memgraphs. Use when debugging leaked objects, retain cycles, memory growth, or before/after leak evidence.
android-emulator-qa
openai/plugins
Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.
plugin-creator
openai/plugins
Create and scaffold plugin directories for Codex with a required .codex-plugin/plugin.json, optional plugin folders/files, and baseline placeholders you can edit before publishing or testing. Use when Codex needs to create a new personal plugin, add optional plugin structure, or generate or update personal or repo-root .agents/plugins/marketplace.json entries for plugin ordering and availability metadata.
frontend-app-builder
openai/plugins
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.
frontend-testing-debugging
openai/plugins
Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.
swiftui-ui-patterns
openai/plugins
Build and refactor SwiftUI UI with component patterns and examples. Use when shaping navigation, state, layouts, controls, or screen composition.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.