Individual skill

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.

skills/video/create-chatgpt-mockup/SKILL.md

Read pinned source

Source commit df8298140d434a6363de0c265eb6af2e571d97a5

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,315
Repository last updated: Nov 6, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

claude Repository topic
claude-skills Repository topic
claudecode Repository topic
claudecode-skills Repository topic
codex Repository topic
cursor Repository topic
gtm Repository topic
skills Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 15,235 bytes
SKILL.mdcore · 15,235 bytes
SKILL.mdcore · 15,235 bytes
SKILL.mdcore · 15,235 bytes
examples/01-sunscreen-image.jsonasset · 467 bytes
examples/02-sleep-apnea-long.jsonasset · 1,160 bytes
examples/03-poem-iphone-mac.jsonasset · 1,007 bytes
examples/04-empty-typing.jsonasset · 258 bytes
examples/05-seatfinch-gpt-chip.jsonasset · 596 bytes
examples/06-short-howto.jsonasset · 750 bytes
examples/assets/sunscreen-sky.svgasset · 3,207 bytes
generate.jsruns · 16,686 bytes
package.jsonruns · 348 bytes
render.jsruns · 3,023 bytes
screenshot.jsruns · 2,608 bytes
skill.meta.jsonasset · 136 bytes
templates/chat.cssasset · 16,985 bytes
templates/icons.jsruns · 11,820 bytes
tests/expected-output.mddoc · 2,857 bytes
tests/human-test.mddoc · 1,886 bytes
tests/run-all.shruns · 414 bytes
tests/sample-input.mddoc · 1,812 bytes
tests/smoke-test.mddoc · 796 bytes

Read excerpt


> **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-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 `render-chatgpt-chat` skill. This atom only produces a single still frame.

## Inputs

Compose a `thread.json` matching the schema below, then pass it to `render.js`.