create-apple-notes-mockup

Installation
SKILL.md

Superseded: the video kit now does this with the phone-chat part, version 1.2.0, in the parts folder of this repository. Every phone-chat style is a style file that draws the same screen frame by frame from the plan's scenes, with the original sounds, in the kit's browser. This atom stays, unchanged in behaviour, for skills outside the kit until they move; its scripts still run.

create-apple-notes-mockup

Generate Apple Notes screens that look like real iPhone screenshots — correct status bar, floating toolbar pill, bold title, body text with paragraph spacing, yellow text cursor, autocorrect underline, optional embedded images and checklists, and an optional iOS keyboard.

Purpose

Turn a JSON note spec into a pixel-accurate Apple Notes (iPhone, light mode) screenshot — HTML + PNG at the native 1180×2556 (DPR 2). It is the deterministic, no-LLM renderer that an Apple Notes video ad drives frame-by-frame to fake a typing animation, and a standalone tool for one-off "noted to self" beats in ads, social posts, and storyboards. The orchestrating agent owns the copy; this atom owns the fidelity (status bar, smart punctuation, cursor, autocorrect underline, toolbar, keyboard chrome).

When to use

  • Need a fake Apple Notes screenshot for an ad, social post, video scene, or product mockup.
  • Need a sequence of Apple Notes frames (title-only → adding paragraphs → cursor moves) to drive a typing-animation video ad.
  • Need a static "noted to self" beat in a storyboard.

If you're rendering an iMessage thread, use the create-imessage-mockup skill instead.

Inputs

Installs
10
GitHub Stars
1.3K
First Seen
Jul 2, 2026