Mmcp.market

frame-macos-notification skill

by nexu-io·nexu-io/html-anything·9.0k stars·Apache-2.0

拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告

A100/100content scan

Is the frame-macos-notification skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the frame-macos-notification skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/next/src/lib/templates/skills/frame-macos-notification ~/.claude/skills/frame-macos-notification
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

【模板: macOS 通知横幅】 【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。

【画布】两种用法:

  • 视频叠加 1920×1080, 通知放右上角, 周围透明。
  • 单独 banner 480×120, 居中输出。

【横幅结构】

  • 外框: 圆角 14px (macOS Big Sur 标准), 480×120 (或更长 480×180 含正文), 12-16px 内边距。
  • 背景: frosted glass 效果 — background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%); 暗色版 rgba(28,28,30,0.78)。
  • 边框: 1px rgba(0,0,0,0.06) (light) / rgba(255,255,255,0.08) (dark); 顶部加 1px 亮 highlight rgba(255,255,255,0.5)。
  • 阴影: 0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)。

【内容】

  • 左侧: App icon (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, 不用外链图片)。
  • 中间:
  • 顶部 row: App 名 (SF Pro 13px, weight 600) + now 或具体时间 (12px, opacity 0.6) — 两端对齐。
  • 标题 (15px, weight 600, 1 行截断)。
  • 正文 (13px, weight 400, 1-2 行截断, line-height 1.35)。
  • 右侧 (可选): action button "Open" 或 "Reply" (capsule, 浅灰底)。

【字体】

  • 主: SF Pro Text → fallback Inter / system-ui; 中文用 PingFang SC / Noto Sans SC。

【可选附加】

  • 多条通知堆叠: 第一条在前, 后面 2 条向后向下递缩 (scale 0.96 + opacity 0.6 + translateY)。
  • 入场动效: 从屏幕外右侧滑入 transform: translateX(110%)→0, 200ms ease-out; 可被 prefers-reduced-motion 关闭。
  • 右上角控制 chip "Clear" (hover 显示, opacity 默认 0)。

【设计细节】

  • light mode 背景白磨砂, dark mode (推荐 video) 几乎黑磨砂。
  • icon 不能用外链 emoji 图片, 用 unicode emoji 或 CSS 绘制几何。
  • 必须用用户提供的内容; 标题 + 正文清晰来自用户输入。
  • 单文件 HTML, 注意 backdrop-filter Safari 需要 -webkit- 前缀。

More skills from nexu-io/html-anything

  • Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
  • Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
  • Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
  • Acard-twitter推特金句 / 数据卡, 适合配推文
  • Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
  • Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
  • Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
  • Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
  • Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
  • Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
  • Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
  • Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表

All agent skills → · MCP servers