скилл CX Codex

macos-notch-ui — скилл для Claude Code: интерфейс у выреза Mac

Q: Как установить macos-notch-ui в Claude Code?

Выполните `npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code`.

Q: Как правильно разместить панель у выреза?

Для расчёта положения используйте `screen.frame`, а не `screen.visibleFrame`: последний не включает область меню и выреза.

Скилл помогает добавить в приложение macOS панель, которая раскрывается от выреза экрана. Пригодится для индикатора записи или другого короткого статуса.

Установить в Claude Code · Через Skills 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

Открыть на GitHub

Что делает macos-notch-ui

Скилл описывает SwiftUI-интерфейс в стиле Dynamic Island для macOS. Панель строится на NSPanel, а NotchShape задаёт контур с вогнутыми верхними углами. Внутри можно разместить, например, значок и короткий текст; ширина меняется с пружинной анимацией.

В материалах есть файлы references/NotchWindow.swift и references/NotchShape.swift, расчёт положения панели и последовательность её показа и скрытия. Для позиционирования используется полный screen.frame: visibleFrame не включает область меню и выреза. На Mac без выреза предлагается показывать плавающую панель внизу экрана, поэтому один и тот же верхний интерфейс подходит не для каждого дисплея.

Какие задачи решает

показать индикатор записи возле выреза экрана
создать панель, раскрывающуюся от выреза MacBook
анимировать появление и скрытие содержимого панели
выровнять окно по центру верхней части экрана

Примеры запросов агенту

Добавь в приложение macOS панель возле выреза для индикатора записи.
Сделай интерфейс в стиле Dynamic Island с коротким статусом у выреза MacBook.
Настрой анимацию раскрытия и скрытия панели у выреза.

Как установить macos-notch-ui

1Через Skills 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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/notch-ui/

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

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

2Вручную: положить файлы

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

1Через Skills CLI (Vercel)

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

2Командой платформы

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

Вручную: положить файлы

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

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о macos-notch-ui

Как установить macos-notch-ui в Claude Code?

Выполните npx skills add fayazara/macos-app-skills --skill macos-notch-ui -a claude-code.

Что делает macos-notch-ui?

Скилл помогает создать для приложения macOS прозрачную панель у выреза экрана, задать её форму и настроить анимацию ширины.

Как правильно разместить панель у выреза?

Для расчёта положения используйте screen.frame, а не screen.visibleFrame: последний не включает область меню и выреза.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора6

macos-patterns Подсказывает нативные паттерны macOS при создании приложений: меню в строке меню, окна, фокус и системные API. CX Codex +1 670установок macos-settings-ui Собирает окно настроек для нативного macOS-приложения на SwiftUI: сайдбар, панели с Form и стеклянная отделка окна в духе macOS 26. CX Codex +1 650установок macos-build Помогает агенту собирать нативные приложения macOS через xcodebuild и разбирать ошибки компиляции проекта. CX Codex +1 609установок macos-release Проводит нативное macOS-приложение через весь релизный пайплайн: от сборки архива до GitHub Release с DMG и автобновлением Sparkle. CX Codex +1 579установок macos-auto-update Скилл, который проводит агента по всей настройке Sparkle в нативном приложении для macOS: от зависимости SPM до первого appcast.xml. CX Codex +1 560установок