create-apple-notes-mockup

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 the create-apple-notes-video-ad molecule 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 — used by create-apple-notes-video-ad.
• Need a static "noted to self" beat in a storyboard.

If you're rendering an iMessage thread, use skills/atoms/messaging/create-imessage-mockup instead.

Inputs

The skill is deterministic — it does not embed an LLM. The orchestrating agent composes a note JSON matching the schema below, then invokes the renderer.

Note JSON schema

{
  "title": "Hello",
  "body": [
    { "type": "paragraph", "text": "This is a screen recording of me typing on apple notes app." },
    { "type": "paragraph", "text": "Let's see how this feels." }
  ],
  "cursor": "end",
  "autocorrect_underline": ["this", "how"],
  "status_bar": {
    "time": "9:41",
    "battery_pct": 87,
    "battery_low": false,
    "show_focus_glyph": false
  },
  "show_keyboard": false,
  "keyboard_state": {
    "suggestions": ["see", "go", "do"],