# macos-notch-ui

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 557 installs · ★ 682
- Author: fayazara
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/fayazara/macos-app-skills/tree/HEAD/notch-ui/SKILL.md
- Updated: 2026-05-27
- HTML: https://affpapa.org/en/nevibecode/skills/macos-notch-ui

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code
```
```bash
npx skills add fayazara/macos-app-skills --skill notch-ui -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/notch-ui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/notch-ui/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add fayazara/macos-app-skills --skill notch-ui -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/notch-ui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add fayazara/macos-app-skills --skill notch-ui -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/notch-ui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install fayazara/macos-app-skills notch-ui
```

2. **Manually: put the files in place**
- File: `.github/skills/notch-ui/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add fayazara/macos-app-skills --skill notch-ui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/fayazara/macos-app-skills --path notch-ui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/notch-ui/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add fayazara/macos-app-skills --skill notch-ui -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/fayazara/macos-app-skills/tree/HEAD/notch-ui/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [macos-design-guidelines](https://affpapa.org/en/nevibecode/skills/macos-design-guidelines.md) — skill · 4300 installs
- [macos-golden-gate-design](https://affpapa.org/en/nevibecode/skills/macos-golden-gate-design.md) — skill · 23 installs
- [macos-development](https://affpapa.org/en/nevibecode/skills/macos-development.md) — skill · 1600 installs
- [axiom-macos](https://affpapa.org/en/nevibecode/skills/axiom-macos.md) — skill · 1300 installs
- [macos-menubar-tuist-app](https://affpapa.org/en/nevibecode/skills/macos-menubar-tuist-app.md) — skill · 681 installs
- [puremac-macos-cleaner](https://affpapa.org/en/nevibecode/skills/puremac-macos-cleaner.md) — skill · 484 installs

From the same set: [fayazara/macos-app-skills](https://affpapa.org/en/nevibecode/by/fayazara/macos-app-skills.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md