skill CX Codex

macos-notch-ui — Claude Code skill for a Mac notch UI

Q: How do I install macos-notch-ui in Claude Code?

Run `npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code`.

Q: Which screen frame should I use to position the panel?

Use `screen.frame` rather than `screen.visibleFrame`; the latter excludes the menu bar and notch area.

Build a macOS panel that opens from the screen notch. Use it for a recording indicator or another compact status display.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code
npx skills add fayazara/macos-app-skills --skill notch-ui -a claude-code

Open on GitHub

What macos-notch-ui does

This skill outlines a Dynamic Island-style interface for a macOS app. It uses an NSPanel for the window and a SwiftUI NotchShape for a silhouette with inward-curving upper corners. The content can hold a brief label or icon, while its width expands and contracts with a spring animation.

The included reference files are references/NotchWindow.swift and references/NotchShape.swift; the guide also covers screen positioning and the show/hide sequence. Position the panel against the full screen.frame, since visibleFrame leaves out the menu bar and notch area. For displays without a notch, the guide suggests placing a floating panel at the bottom instead, so the notch layout is not used unchanged on every screen.

What it helps with

show a recording indicator beside the MacBook notch
build a panel that expands from the screen cutout
animate the panel opening and closing
center a window along the top edge of the display

Example prompts for the agent

Add a macOS panel beside the notch for a recording indicator.
Create a compact Dynamic Island-style status display on my MacBook.
Animate the notch panel as it opens and closes.

How to install macos-notch-ui

1Skills CLI (Vercel)

npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code

npx skills add fayazara/macos-app-skills --skill notch-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/notch-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/notch-ui/

1Skills CLI (Vercel)

npx skills add fayazara/macos-app-skills --skill notch-ui -a codex

2Manually: put the files in place

.agents/skills/notch-ui/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add fayazara/macos-app-skills --skill notch-ui -a cursor

2Manually: put the files in place

.cursor/skills/notch-ui/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install fayazara/macos-app-skills notch-ui

2Manually: put the files in place

.github/skills/notch-ui/SKILL.md

1Skills CLI (Vercel)

npx skills add fayazara/macos-app-skills --skill notch-ui -a gemini-cli

2Platform CLI

gemini skills install https://github.com/fayazara/macos-app-skills --path notch-ui

Manually: put the files in place

.devin/skills/notch-ui/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add fayazara/macos-app-skills --skill notch-ui -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about macos-notch-ui

How do I install macos-notch-ui in Claude Code?

Run npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code.

What does macos-notch-ui do?

It guides you through building a macOS panel aligned with the screen notch, shaping it in SwiftUI, and animating its width.

Which screen frame should I use to position the panel?

Use screen.frame rather than screen.visibleFrame; the latter excludes the menu bar and notch area.

Similar skills

Everything for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set6

macos-patterns Guides native macOS app work with menu bar UI, windows, focus behaviour and platform-specific APIs. CX Codex +1 670installs macos-settings-ui Builds a native macOS settings window in SwiftUI: sidebar, grouped Form panes and liquid glass window chrome for macOS 26. CX Codex +1 650installs macos-build Directs AI agents to compile native macOS apps using xcodebuild and diagnose build errors from the terminal. CX Codex +1 609installs macos-release Walks a native macOS app through the whole release flow: archive, notarize, package a DMG, sign it with Sparkle, and publish a GitHub Release. CX Codex +1 579installs macos-auto-update A skill that walks the agent through wiring Sparkle into a native macOS app, from the SPM dependency to the first appcast.xml. CX Codex +1 560installs