GitHub - imshaikot/app-preview-craft-skill: Agent Skill that turns app screenshots and screen recordings into App Store & Play Store screenshots, social cards, 3D device mockups and promo videos. Local headless Chrome, three.js and ffmpeg. Works in Claude Code, Codex, Cursor, Copilot and Gemini CLI.

An Agent Skill that turns your app's screenshots and screen recordings into App Store / Play Store screenshots, social cards, 3D device mockups and promo videos — rendered locally with headless Chrome, three.js and ffmpeg.

3D trio video	3D desk video

Install

Inside Claude Code, run /plugin marketplace add imshaikot/app-preview-craft-skill, then /plugin install app-preview-craft@app-preview-craft as a separate command.

The skill is listed on skills.sh, the directory behind npx skills. The CLI finds the agents on your machine and installs for each of them, Claude Code included: one copy in ~/.agents/skills/, linked into the folders of agents that read their own. Drop -g to install into the current project, add -a codex to pick one agent, and update with npx skills update.

Without npx, clone the skill branch (its root is the skill) into a folder your agent reads:

git clone --depth 1 -b skill https://github.com/imshaikot/app-preview-craft-skill.git ~/.agents/skills/app-preview-craft

~/.agents/skills/ serves Codex, Cursor, Copilot, Gemini CLI, OpenCode and Amp; Claude Code reads ~/.claude/skills/ and Goose ~/.config/goose/skills/. For a single project use .agents/skills/, .claude/skills/ or .goose/skills/. Update a clone with git -C <dir> pull --ff-only.

Requirements: Node 20+, Chrome / Chromium / Edge with WebGL, and ffmpeg for video. On first use the agent runs node scripts/doctor.mjs --fix, which installs the skill's npm packages (~95 MB) and checks the rest.

What it makes

App Store themes borrow the look of popular apps in each store category (mood only, no brand assets): stride fitness, ledger finance, serene mindfulness, canvas productivity, sizzle food, wander travel, mixtape music, arcade games, snapshot photo, pulse health data.

Use

Ask your agent:

Make App Store screenshots from ./screenshots — it's a budgeting app.

Turn demo.mov into a 3D phone video for Instagram.

Make an og image and an X card for the launch.

Or run the CLI yourself ($SKILL is the install folder):

node $SKILL/scripts/cli.mjs app-store shots/*.png --theme ledger --size iphone-6.9,ipad-13
node $SKILL/scripts/cli.mjs device-video home.png demo.mov --theme turntable
node $SKILL/scripts/cli.mjs social-card home.png --theme launch --size og,x-post
node $SKILL/scripts/cli.mjs gallery app-store     # preview every theme
node $SKILL/scripts/cli.mjs list options          # every --set path

Any theme property can be overridden with --set path=value, a theme file that extends a built-in, or an app-preview-craft.json project file (example). Files are written to the current directory.

Your own 3D model — any .glb works as the device: --model phone.glb (the display is found from the material names; cli.mjs inspect phone.glb lists them). Draco and meshopt compressed files load through WebAssembly decoders. Credit for a downloaded model goes in its record and into CREDITS.txt.

Studio — node $SKILL/scripts/cli.mjs studio opens a local editor where the preview is the canvas: drag a device to move, turn or resize it, orbit the camera, aim the key light, place badges, edit copy in place, set keyframes on the timeline, drop in your own .glb. Lights, camera and pose change on the live three.js scene in about a millisecond and match the export pixel for pixel. Undo and redo cover everything.

Everything done in the studio is written to .app-preview-craft/studio/ as a transcript, so the agent that opened it can read what you changed (cli.mjs transcript) and render exactly what you were looking at (--config .app-preview-craft/studio/session.json).

Credits

The 3D device models are CC-BY-4.0; every render that shows one writes a CREDITS.txt. Keep the credit when you publish.

• iPhone 17 Pro by Ranguel
• iPhone 17 Pro Max by MajdyModels
• iPhone 12 Pro and Galaxy S21 Ultra by DatSketch
• MacBook Pro M3 16" by jackbaeten

Device names are trademarks of their owners. Fonts: Fontsource (OFL).

License

MIT for the code; the device models keep their CC-BY-4.0 license.