create-imessage-mockup
Render pixel-accurate iMessage screenshot mockups (DM or group) from a thread JSON. Supports minimal, with-keyboard, and full iPhone 15 Pro frame variants. Outputs HTML + PNG.
npx skills add gooseworks-ai/goose-skills --skill create-imessage-mockup --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# create-imessage-mockup Generate iMessage screenshots that look like real iOS captures — correct bubbles with tails, typing indicators, timestamps, "Delivered" captions, group avatars + sender names, keyboard chrome, and an optional iPhone 15 Pro bezel with Dynamic Island and status bar. ## Purpose Turn a structured thread JSON into a believable iMessage screenshot — first as standalone HTML (`generate.js` + `templates/chat.css`), then rasterized to PNG with headless Chromium (`screenshot.js`/`render.js` via Playwright). It is the atom you reach for when an ad, social post, or video scene needs a fake-but-convincing iOS message capture. What it gets right, grounded in the renderer: - **Bubble runs and tails** — blue `sent` bubbles (right) and gray `received` bubbles (left), with a curved tear-drop tail drawn only on the *last* bubble of each consecutive sender run (`isLastOfRun` in `generate.js`). - **Dark-themed iOS chrome** — `theme: "dark"` flips the page to the iOS dark conversation look; the status bar, Dynamic Island, and keyboard match iPhone 15 Pro. - **Group affordances** — group threads (`mode: "group"`) add per-sender colored avatar circles, sender names above the first
- Purpose
- When to use
- Inputs
- Thread JSON schema
- CLI
- Flags
- Output
- Workflow
- Setup (one-time)
- Files
- Testing
- Implementation pitfalls — do not re-introduce these bugs
- Bubble tail painting order
- Tail vs. avatar overlap (group chats)
node render.js --thread examples/group-with-frame.json --with-iphone-frame node render.js --thread examples/dm-with-keyboard.json --with-keyboard node render.js --thread examples/dm-minimal.json --minimal node render.js --thread my-thread.json --with-keyboard --output ./my-exports/ --name nightout cd skills/ads/capabilities/create-imessage-mockup npm install npx playwright install chromium bash tests/run-all.sh inspect tests/output/<case>/<date-slug>/screenshot.png
What does the create-imessage-mockup skill do?
Render pixel-accurate iMessage screenshot mockups (DM or group) from a thread JSON. Supports minimal, with-keyboard, and full iPhone 15 Pro frame variants. Outputs HTML + PNG.
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill create-imessage-mockup --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From gooseworks-ai/goose-skills, a repository with 1,091 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.