App Preview Craft
A third-party skill by Shahriar. Give Claude your app's screenshots or screen recordings. It makes App Store and Google Play screenshot sets, social cards, 2D screen videos, and 3D phone and laptop mockups and videos. There are 40 themes, and you can change any setting. A preview studio on your computer lets you browse and tweak the look. Everything renders on your machine. You need a shell, Node 20 or later, npm, and a Chromium-based browser with WebGL. Videos also need ffmpeg. The first run downloads about 95 MB with npm install, then it works offline. It doesn't work in claude.ai chat. The 3D device models are CC-BY-4.0, so you have to credit their authors when you publish the images. The skill writes a CREDITS.txt file for that. Licensed MIT.
This skill hasn't been reviewed yet.
What it does
Make App Store screenshots, social cards, and phone mockup videos from your app's screenshots.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Shahriar
- Category
- Marketing
- Source
- View source
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
This skill is from a third party and hasn't been reviewed yet.
Copy this prompt into your AI tool to install this skill
Install the "App Preview Craft" skill from https://raw.githubusercontent.com/imshaikot/app-preview-craft-skill/6f00d1df27d0479785404010025ed96022c8a23c/skills/app-preview-craft/SKILL.md. Read the SKILL.md there and follow it as a skill.SKILL.md, then in Claude go to Customize > Skills, click the + button, choose Create skill, then Upload a skill and pick the file. See Claude's help page.Not sure which? See the install guide.
Share this skill
App Preview Craft
A third-party skill by Shahriar. Give Claude your app's screenshots or screen recordings. It makes App Store and Google Play screenshot sets, social cards, 2D screen videos, and 3D phone and laptop mockups and videos. There are 40 themes, and you can change any setting. A preview studio on your computer lets you browse and tweak the look. Everything renders on your machine. You need a shell, Node 20 or later, npm, and a Chromium-based browser with WebGL. Videos also need ffmpeg. The first run downloads about 95 MB with npm install, then it works offline. It doesn't work in claude.ai chat. The 3D device models are CC-BY-4.0, so you have to credit their authors when you publish the images. The skill writes a CREDITS.txt file for that. Licensed MIT.
Third-party, by Shahriar
September 19, 2026
Install for Claude Code (local)
Local Claude Code only. It does not work in claude.ai chat. You need git, Node 20 or later, npm, and a Chromium-based browser (Chrome, Chromium, Edge, or Brave) with WebGL. For videos you also need ffmpeg.
This skill is a whole project, not one file. It has scripts, themes, and a preview studio, so saving SKILL.md alone will not work. Clone the whole repo and check out the pinned commit (6f00d1d) in a side folder, then copy the skill folder into your skills folder. The clone is about 78 MB. Claude Code will ask before it runs a command. Licensed MIT.
- 1
Clone the repo at the pinned commit
This clones the whole repo (about 78 MB) into a temporary folder, then copies the skill folder into your skills folder as a real folder, not a link. The skill's own search can't follow a linked folder.
git clone https://github.com/imshaikot/app-preview-craft-skill ~/.claude/app-preview-craft-skill-tmp && git -C ~/.claude/app-preview-craft-skill-tmp checkout --detach 6f00d1df27d0479785404010025ed96022c8a23c && mkdir -p ~/.claude/skills && cp -R ~/.claude/app-preview-craft-skill-tmp/skills/app-preview-craft ~/.claude/skills/app-preview-craft - 2
Check the commit and the files
The first command should print the full commit hash from the last step. If it prints anything else, the checkout failed. Delete the ~/.claude/skills/app-preview-craft and ~/.claude/app-preview-craft-skill-tmp folders and don't use the skill. Once it matches, you can delete the tmp folder.
git -C ~/.claude/app-preview-craft-skill-tmp rev-parse HEAD # expect 6f00d1df27d0479785404010025ed96022c8a23c ls ~/.claude/skills/app-preview-craft/SKILL.md ~/.claude/skills/app-preview-craft/scripts/cli.mjs - 3
Check your machine and install packages
The skill's doctor script checks for Node, a browser, WebGL, and ffmpeg. With the fix flag it runs
npm installinside the skill. That downloads about 95 MB more. Missing ffmpeg is only a warning, and stills still work.node ~/.claude/skills/app-preview-craft/scripts/doctor.mjs --fix - 4
Make some visuals
Start Claude Code, point it at your screenshots, and say what you want.
/app-preview-craft make App Store screenshots from the images in ./shots
Your skill is downloading.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.
What's in this toolkit
This is a toolkit of multiple skills, each with its own SKILL.md. Open the source on GitHub to read the instructions for the skills you install.
A third-party skill by Shahriar. The pinned SKILL.md is the source of truth.
This entry is a short summary. We did not write it and have not reviewed it.
It turns your app’s screenshots and screen recordings into marketing visuals: App Store and Google Play screenshot sets, social and Open Graph cards, 2D screen videos, and 3D device mockups and videos. Claude picks a theme that fits your app’s category, renders it, and looks at the result before it reports back.
What to know before you install it:
- It needs a shell, Node 20 or later, npm, and a Chromium-based browser with WebGL. Videos need ffmpeg. It does not work in claude.ai chat.
- The clone is about 78 MB. The first run then uses
npm installto download about 95 MB of packages. After that it works offline. - It runs a headless browser and, for videos, ffmpeg on your computer. The preview studio starts a small server on your own machine at 127.0.0.1.
- It writes renders to the folder you’re working in. It saves temporary files
in your temp folder and removes them after each run. Studio uploads go to a
.app-preview-craftfolder in your project. - The 3D device models are CC-BY-4.0. When you publish an image that shows one,
you must credit the authors. The skill writes a
CREDITS.txtnext to each render. Flat and frameless themes use no models.
Licensed MIT.
View on GitHub