create-chatgpt-mockup
Render pixel-accurate ChatGPT mobile (iOS) screen mockups in light mode from a thread JSON. Supports user text bubbles, user image attachments, assistant markdown prose, citation chips, the OpenAI spiral logo, the Apps-SDK GPT chip in the composer, and three header styles (model-tag, plain title, "Get Plus"). Fixed 9:16 viewport. Outputs HTML + PNG.
npx skills add gooseworks-ai/goose-skills --skill create-chatgpt-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-chatgpt-mockup ## Purpose Generate single-frame ChatGPT mobile screens that read as real iOS captures — accurate header chrome, user/assistant message styling, composer pill, status bar, and the OpenAI spiral mark. Designed for use inside ad creatives, social posts, video storyboards, and product mockups. If you need an **animated, video-recorded chat reveal** (bubbles popping over time, SFX, music bed, end card), use the molecule `skills/molecules/create-chatgpt-video-ad`. This atom only produces a single still frame. ## Inputs Compose a `thread.json` matching the schema below, then pass it to `render.js`. ### Thread JSON schema ```json { "statusBar": { "time": "9:41", "dnd": false }, "header": { "style": "model-tag", "title": "ChatGPT", "model": "5.1", "rightIcons": ["personPlus", "dottedCircle"] }, "messages": [ { "type": "user-image", "src": "assets/photo.jpg", "aspect": "square" }, { "type": "user-text", "text": "Make this face sunscreen better" }, { "type": "assistant", "title": "Optional H1 with spiral logo", "feedback": true, "text": "Markdown-ish prose. **bold**, *italic*, ## H2, * bullet, 1. ordered, [[cite:Source +1]], [[icon:💡]] inline-icon." } ], "composer":
- Purpose
- Inputs
- Thread JSON schema
- Field reference
- CLI
- Flags
- Output
- Workflow
- Setup (one-time)
- Quality checks
- Failure modes
- Files
- Known limitations
- Quality Checks
node render.js --thread examples/01-sunscreen-image.json node render.js --thread my-thread.json --output ./exports --name nightly cd create-chatgpt-mockup npm install npx playwright install chromium
What does the create-chatgpt-mockup skill do?
Render pixel-accurate ChatGPT mobile (iOS) screen mockups in light mode from a thread JSON. Supports user text bubbles, user image attachments, assistant markdown prose, citation chips, the OpenAI spiral logo, the Apps-SDK GPT chip in the composer, and three header styles (model-tag, plain title, "Get Plus"). Fixed 9:16 viewport. Outputs HTML + PNG.
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill create-chatgpt-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.