How to use the macOS Notification Banner agent skill

What the skill makes the agent do

Agent skills are instruction packs that an agent reads when a request matches them. This one is defined in a SKILL.md file and tells the agent how to build a realistic notification banner. The output is a single HTML file with a frosted-glass background, an app icon, a bold title and a short body.

The skill sets visual rules so the result stays consistent: a 14px corner radius, a semi-transparent blurred background, a soft shadow, and an app icon drawn with CSS gradients or an emoji rather than an external image. It also covers optional extras such as stacked notifications and a slide-in animation.

• Canvas options: a 1920×1080 video frame with the banner in the top-right corner, or a standalone 480×120 banner centred on the page.
• Banner content: app name and time at the top, a single-line title, and a body of one to two lines.
• Optional: an 'Open' or 'Reply' capsule button, stacked notifications, and a slide-in from the right that respects reduced-motion settings.
• Font preference: SF Pro Text, falling back to Inter or system-ui; PingFang SC or Noto Sans SC for Chinese text.

Install the skill

Download the skill ZIP from this page and unzip it. The package contains three files: SKILL.md, example.html and open-design.json.

For a personal install, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead.

You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with a natural request

You do not need a special command. Describe the message you want shown and say it should be a macOS-style notification or banner for a video overlay or product teaser. Include the real text you want used, since the skill is meant to use your content rather than placeholders.

If you want the standalone image, say so and mention the 480×120 size. If you want it in a video corner, say 1920×1080 and the top-right position.

• Example: 'Make a macOS-style notification banner for a video overlay announcing our v2 launch. Title: "Now shipping". Body: "Batch exports are live for all Pro plans."'
• Example: 'Create a 480×120 notification banner for a social post saying our newsletter is out today.'
• Example: 'Design a dark-mode notification overlay for the top-right corner of a 1920×1080 tutorial frame, with an Open button.'

Review and edit the output

The result is an HTML file, so you open it in a web browser to view it. Because it is plain HTML and CSS, you can change the text, colours or sizes in a text editor and reload the page.

The source notes that backdrop-filter may need the -webkit- prefix in Safari, so check the banner in Safari if the blur looks missing. Use example.html in the package as a reference for the expected look.

• Open the generated .html file in any modern web browser.
• Edit text and colours directly in the file, then refresh.
• Check the frosted-glass effect in Safari as well as Chrome.

Safety and limits

The skill runs no scripts and makes no network calls, according to its listing. It needs a SKILL.md-compatible agent runtime and a web browser to view the output.

The output is a fake UI mockup. Do not use it to imitate a real app sending a message or to mislead viewers. The skill copies Apple's visual style, so check Apple's usage rules before using it in brand-sensitive or commercial work.

• No scripts are run by the skill.
• No network use is declared.
• Do not present the banner as a real notification.
• Confirm trademark and usage rules for Apple's visual style before publishing commercially.