create-apple-notes-mockup

npx skills add gooseworks-ai/goose-skills --skill create-apple-notes-mockup --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# 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

node render.js --note examples/mid.json
node render.js --note examples/long.json --output ./my-exports/ --name todays-note
node render.js --note my-note.json --with-keyboard
node render.js --note my-note.json --viewport 1080x1920   # 9:16 ad delivery size
cd create-apple-notes-mockup
npm install
npx playwright install chromium