macos-settings-ui
macOS Settings UI with Liquid Glass
This skill produces a native macOS settings window that follows Apple's macOS 26 design guidelines. The result is a sidebar + detail NavigationSplitView with liquid glass window chrome, back/forward toolbar navigation, grouped Form sections with transparent backgrounds, and proper scroll edge effects.
Architecture Overview
The settings UI is composed of 3 layers:
-
Window Controller (
SettingsWindowController.swift) — AnNSWindowControllerthat creates theNSWindowprogrammatically with.fullSizeContentView. This is what gives the window rounded liquid glass corners. You cannot get this effect from a SwiftUIWindowscene. -
Root View (
SettingsView.swift) — ANavigationSplitViewwith a sidebar list and detail pane. Includes back/forward navigation history in the toolbar, which also forces the creation of anNSToolbar(required for the liquid glass title bar treatment). -
Detail Panes (one file per tab) — Each pane uses
Form { Section(...) { ... } }.formStyle(.grouped).scrollContentBackground(.hidden).
Why NSWindowController Instead of SwiftUI Window Scene
SwiftUI's declarative Window scene does not expose the NSWindow style mask. The .fullSizeContentView flag must be set at window creation time for macOS 26 to render the liquid glass chrome (rounded corners, translucent sidebar, blurred title bar). Trying to inject it later via NSViewRepresentable is unreliable because SwiftUI resets the window's configuration.
The NSWindowController approach also lets you control the toolbar style, frame autosave, minimum size, and delegate lifecycle directly.