macos-settings-ui

Builds native macOS settings windows with SwiftUI NavigationSplitView and liquid glass chrome.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill macos-settings-ui-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: macos-settings-ui
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/macos-settings-ui
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill macos-settings-ui-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a settings window that matches Apple's macOS 26 (Tahoe) design language is tricky: SwiftUI's declarative Window scene cannot produce the liquid glass chrome, and missing modifiers leave you with opaque backgrounds and broken translucency. This Skill provides a complete, working architecture for a native settings window. ## Core Features & Use Cases - NSWindowController-based window: Creates the NSWindow programmatically with .fullSizeContentView to get rounded liquid glass corners that SwiftUI Window scenes cannot produce. - NavigationSplitView layout: Sidebar plus detail panes with back/forward toolbar navigation, grouped Form sections, and transparent scroll backgrounds. - Copy-ready reference code: Includes SettingsWindowController.swift, SettingsView.swift, and an example detail pane covering Toggle, Picker, Slider, and LabeledContent patterns. - Use Case: You are building a menu-bar macOS app and need a preferences window. Follow the six-step guide to create a tab enum, window controller, root view, and detail panes, then open it with SettingsWindowController.show(tab: .general). ## Quick Start Ask the AI to add a native macOS settings window with liquid glass styling to your SwiftUI app using this skill.

Frequently Asked Questions about macos-settings-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a settings window in a SwiftUI macOS app?

Create an NSWindowController that builds the NSWindow programmatically with .fullSizeContentView, then host a NavigationSplitView with a sidebar list and grouped Form detail panes. Open it via SettingsWindowController.show(tab:) instead of a SwiftUI Window scene.

Why doesn't my macOS settings window have the liquid glass effect?

The liquid glass chrome requires the .fullSizeContentView style mask set at window creation time, which SwiftUI's Window scene does not expose. You also need .scrollContentBackground(.hidden) on each Form so the translucent window chrome shows through.

Can I use SwiftUI Window scene for macOS 26 settings?

No. SwiftUI's declarative Window scene does not expose the NSWindow style mask, and injecting it later via NSViewRepresentable is unreliable because SwiftUI resets the window configuration. Use an NSWindowController instead.

Does this settings layout work on macOS versions before Tahoe?

Yes, the core pattern of NSWindowController with .fullSizeContentView, NavigationSplitView, and grouped Form works on macOS 14 and later. Only scrollEdgeEffectStyle(.soft) requires macOS 26, so wrap it in an availability check.

How do menu-bar-only apps show a settings window in the foreground?

Menu-bar apps using .accessory activation policy need a reference-counted AppActivationPolicy helper that switches to .regular and activates the app when the window shows, then returns to .accessory when it closes.