Design & Motion · nexu-io/html-anything

frame-macos-notification

Name: frame-macos-notification
Author: nexu-io/html-anything

Photorealistic macOS notification banner + app icon + title and body text, suitable for video overlays / product launch teasers.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件为 Apache License Version 2.0；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）Commit 553ed98c28

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Photorealism comes from a set of hardcoded macOS numeric values: 14px border radius, frosted glass rgba(245,245,247,0.78) + backdrop-filter blur(40px) saturate(180%), 1px border + top highlight + double-layer shadows—all ready-to-use parameters.

next/src/lib/templates/skills/frame-macos-notification/SKILL.md

- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。

The template provides a concrete numeric spec rather than vague adjectives like 'macOS-like'. The model achieves the authentic Big Sur look simply by replicating these parameters, which is why no screenshot assets are needed.

App icons are rendered using pure CSS gradients + unicode emoji/monograms, with external image links explicitly prohibited in the body text.

next/src/lib/templates/skills/frame-macos-notification/SKILL.md

- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。

The three icons in the example use linear-gradient(#1DB954→#0d7a35), (#0f0f12→#2a2a35), and (#ff7849→#d97757) paired with an emoji/monogram, requiring zero image requests.

Slide-in entrance animations are paired with accessibility fallbacks (200ms ease-out, disabled via prefers-reduced-motion).

next/src/lib/templates/skills/frame-macos-notification/SKILL.md

- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。

Providing both simultaneously represents a 'visuals without sacrificing accessibility' approach, making it an exemplar of disciplined attention to detail in this batch of templates.

The template itself is the prompt: SKILL.md body text is read by the loader, assembled with the shared preamble and user content, and passed to the local agent CLI for execution.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

No code inside the template directory is executed at runtime: /api/convert only receives {agent, templateId, content}, uses loadSkill(templateId) to extract the SKILL.md body as the prompt core, and hands it off to the authenticated local agent CLI; HTML is streamed back to the frontend via stdout.

The skill directory consists purely of text assets: the loader reads SKILL.md from disk, and no executable code within the directory is ever loaded.

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

Skills in the file system are just text: the loader reads SKILL.md directory by directory, extracts the frontmatter into picker metadata, and returns the body as text; no modules in this template directory are imported or executed.

The shared preamble is injected prior to the template, establishing the highest priority rule: 'the template only defines layout/style/color palette/fonts/component library, while the count is determined by user content.'

next/src/lib/templates/shared.ts

【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】

The shared preamble is injected before the template body, establishing that 'the template only defines layout/style/color palette/fonts/component library, while the count is determined by user content'—thus, the layout list in this template serves as a 'reusable layout pool' rather than a hard limit on pages or frames.

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

The preamble explicitly prohibits file system tools and requires pure HTML to be streamed directly from the response body, leaving disk writes to the frontend—resulting in zero disk-writing behavior on the skill side.

The skill directory consists purely of text assets: the loader reads SKILL.md from disk, and no executable code within the directory is ever loaded.

next/src/lib/templates/loader.ts

const exampleHtml = safeRead(path.join(dir, "example.html"));

example.html in the directory is a golden sample distributed with the repository; the preview route serves it directly from disk (no build, no compilation), serving as both a quality baseline and a detail page asset.

2Core Capabilities

01Frosted glass notification banner (light/dark dual color schemes)

02CSS-rendered app icon (gradient + emoji/monogram, no external image links)

03Stacked multi-notification scaling (scale 0.96/0.92 + cascading opacity)

04Right-side action button (Open/Reply pill buttons)

05Dual canvas usage: 1920×1080 corner overlay / 480×120 standalone banner

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; no script execution or external impact.

Audit Notes: 🟢 Green. Scope of evaluation = the skill directory itself: URLs appearing within the directory are limited to https://cdn.tailwindcss.com, https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap, and https://hyperframes.heygen.com/catalog—all located exclusively within example.html (sample output) or frontmatter attribution annotations, with zero runtime outbound requests requested anywhere in the SKILL.md body. The directory contains only SKILL.md, example.html, and example.md—zero scripts, zero executable code, zero network endpoints, zero credential reads, and zero disk write instructions. Executing in accordance with SKILL.md results in the host model generating an HTML text output, without any outbound network calls or disk write actions. Host shell and consumer-side behaviors do not affect the rating tier and are only documented in verdict.risks: the shared.ts preamble requires artifacts to reference Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts, the runtime spawns the logged-in local agent CLI (with envFor passing process.env through), and the preview iframe is sandboxed with sandbox="allow-scripts allow-same-origin".

5Second-Pass Verification

[discrepancy] 规范↔示例：横幅尺寸 — 正文写 `480×120 (或更长 480×180 含正文)`，示例实际是 w-[420px] p-3 的三张 420px 宽横幅（含标题 + 双行正文后高度超出 120px）——示例未按自身规范出图，模型同时看到两份口径。
[discrepancy] 规范↔示例：入场动效时长 — 正文写 `200ms ease-out`，示例是 `animation: slideIn .4s ease-out`（400ms）。
[ok] 规范↔示例：磨砂/图标/堆叠/按钮 — rgba(28,28,30,0.78) + backdrop-filter blur(40px) saturate(180%)、-webkit- 前缀、CSS gradient 图标、scale 0.96/0.92 堆叠、Open 胶囊按钮均在 example.html 命中，与正文一致。
[ok] example.md 与 example.html 一致性 — example.md 的 App/Title/Body/Time 与二级通知（Cursor/Spotify）逐条对应示例中的三张横幅。
[ok] 目录资产面普查 — glob 全量：SKILL.md、example.html、example.md；无 scripts/、无 references/、无数据文件、无包管理器清单。
[ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
[ok] 外链端点普查 — 目录内 URL：https://cdn.tailwindcss.com、https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap、https://hyperframes.heygen.com/catalog（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
[ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。

6Verdict & Scenarios

Precise numerical specs that yield a Big Sur look directly upon replication

Zero image dependencies, yielding fully self-contained offline artifacts

Animations paired consistently with accessibility fallbacks

Input format clearly demonstrated via example.md so the model knows what to feed

Best for: Product launch teasers, video corner overlays, and social media notification-style graphics; ideal when instant 'unmistakably macOS' fidelity is needed without bundling image assets. When paired with html-anything video/export pipelines, the template provides the layout while the model only fills in the App name, title, and body text.

Not for: Scenarios requiring real OS notification system integration or clickable interactivity (the output is a static visual draft); A4/print media (canvas is 16:9 or horizontal banner); environments requiring strict offline operation with zero external requests without manually replacing CDN references.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload frame-macos-notification.tar.gz

sha256: f9ec98ded8bf2d96…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.