macos-settings-ui — Claude Code skill: macOS settings window
Builds a native macOS settings window in SwiftUI: sidebar, grouped Form panes and liquid glass window chrome for macOS 26.
npx skills add fayazara/macos-app-skills --skill macos-settings-ui -a claude-code
npx skills add fayazara/macos-app-skills --skill settings-ui -a claude-codeWhat macos-settings-ui does
The skill lays out a three-layer settings window. SettingsWindowController.swift creates the NSWindow in code with .fullSizeContentView — that flag is what makes macOS 26 draw rounded corners and a translucent sidebar. The root view is a NavigationSplitView with a sidebar list and back/forward history in the toolbar. Each pane is its own file built from Form { Section { ... } }.
Reference files ship with it: the window controller, the root view, and a sample pane covering Toggle, Picker, Slider and LabeledContent. The steps run in order — define a tab enum with a title and SF Symbol, copy the controller, adjust the frame sizes, write the panes, then open the window with SettingsWindowController.show(tab:).
One hard limit: SwiftUI's declarative Window scene never exposes the window style mask, so you have to delete the old Window("Settings", id: "SETTINGS") scene and drop openWindow(id:). Setting .fullSizeContentView later through NSViewRepresentable fails too, because SwiftUI resets the window configuration. The controller also calls the activation policy — strip those calls if your app is not menu-bar-only.
What it helps with
- build a settings window with a sidebar and detail panes
- get liquid glass window chrome on macOS 26
- fix a form background that hides the glass effect
- replace a SwiftUI
Windowscene with a window controller - add back/forward navigation to the settings toolbar
Example prompts for the agent
- add a settings window to my SwiftUI macOS app
- create a preferences pane with a grouped Form and a transparent background
- my settings screen looks wrong, rebuild it to match macOS 26
How to install macos-settings-ui
1Skills CLI (Vercel)
npx skills add fayazara/macos-app-skills --skill macos-settings-ui -a claude-codenpx skills add fayazara/macos-app-skills --skill settings-ui -a claude-code2Manually: put the files in place
~/.claude/skills/settings-ui/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/settings-ui/
1Skills CLI (Vercel)
npx skills add fayazara/macos-app-skills --skill settings-ui -a codex2Manually: put the files in place
.agents/skills/settings-ui/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add fayazara/macos-app-skills --skill settings-ui -a cursor2Manually: put the files in place
.cursor/skills/settings-ui/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install fayazara/macos-app-skills settings-ui2Manually: put the files in place
.github/skills/settings-ui/SKILL.md1Skills CLI (Vercel)
npx skills add fayazara/macos-app-skills --skill settings-ui -a gemini-cli2Platform CLI
gemini skills install https://github.com/fayazara/macos-app-skills --path settings-uiManually: put the files in place
.devin/skills/settings-ui/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add fayazara/macos-app-skills --skill settings-ui -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about macos-settings-ui
How do I install macos-settings-ui in Claude?
Run npx skills add fayazara/macos-app-skills --skill macos-settings-ui -a claude-code. The skill file lands at ~/.claude/skills/settings-ui/SKILL.md.
What does macos-settings-ui do?
It hands the agent a working template for a native macOS settings window: a window controller, a root view with a sidebar, and sample panes with common controls.
Why can't I keep the SwiftUI Window scene?
The scene does not expose the NSWindow style mask, and .fullSizeContentView has to be set when the window is created. The skill swaps the scene for an NSWindowController instead.
