Skip to main content
affpapa.org
RU EN
skill CX Codex

app-store-screenshots-generator — Claude Code skill

Builds ad-style iOS app screenshots in Next.js and exports PNG files for App Store device sizes. It also handles localized sets.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill app-store-screenshots-generator -a claude-code
Open on GitHub

What app-store-screenshots-generator does

The skill gathers details about the app’s brand, features, and visual direction before creating a small Next.js project with TypeScript and Tailwind. Each screen is laid out as a promotional slide with an iPhone frame, rather than a plain UI preview.

It relies on html-to-image to export PNG files for Apple’s four listed sizes: 6.9, 6.5, 6.3, and 6.1 inches. Locale-specific sets, RTL layouts, and reusable themes are supported. The project uses public/mockup.png plus app images from public/screenshots/, so those assets belong in the project before export.

What it helps with

  • create promotional slides for an iOS app listing
  • export PNG assets for App Store device sizes
  • place app screens inside an iPhone frame
  • prepare localized screenshot sets
  • build themed slides in Next.js

Example prompts for the agent

  • Build App Store screenshots for my habit tracker with a clean visual style.
  • Create six promotional slides for my iOS app using images from public/screenshots/en/.
  • Prepare localized app screens with an RTL layout and PNG export.

How to install app-store-screenshots-generator

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill app-store-screenshots-generator -a claude-code

2Manually: put the files in place

~/.claude/skills/app-store-screenshots-generator/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/app-store-screenshots-generator/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about app-store-screenshots-generator

How do I install app-store-screenshots-generator in Claude Code?

Run npx skills add reason-machines/trending-skills --skill app-store-screenshots-generator -a claude-code, then use ~/.claude/skills/app-store-screenshots-generator/SKILL.md.

What does app-store-screenshots-generator do?

It creates a Next.js project for promotional iOS app slides, places screens in an iPhone mockup, and exports PNG files for the listed App Store sizes.

Which technologies and output sizes does the skill use?

The scaffold uses Next.js, TypeScript, Tailwind, and html-to-image. It exports for 6.9, 6.5, 6.3, and 6.1-inch sizes, with locale and RTL support.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set139

flipoff-split-flap-display A skill for building, restyling and embedding FlipOff, a framework-free split-flap board emulator that runs in any browser. CX Codex +1 849installs mac-code-local-ai-agent A skill that walks you through running a coding agent entirely on your Apple Silicon Mac, with no cloud calls and no subscription. CX Codex +1 843installs caveman-token-optimizer A skill that makes AI agents answer in caveman-speak, dropping pleasantries and filler. It cuts roughly 65% of output tokens while code and technical terms stay exact. CX Codex +1 842installs pump-analyzer-solana A static front end for watching Pump.fun token launches on Solana: a WebSocket feed, price and volume charts, and alerts on your own criteria. CX Codex +1 837installs tribev2-brain-encoding A skill that wires the TRIBE v2 model into your agent so it can predict brain responses to video, audio and text. Built for research work. CX Codex +1 810installs codex-session-patcher Finds AI refusals in Claude CLI, Claude and OpenCode session files and replaces them so you can resume the conversation. CX Codex +1 798installs torchcode-pytorch-interview-practice A practice environment for PyTorch coding interviews: 40 problems with auto-grading, gradient checks and timing. Useful before an ML interview loop. CX Codex +1 798installs ministack-aws-emulator This skill guides an agent through running MiniStack, a local AWS emulator for testing S3, SQS, DynamoDB, and other services. CX Codex +1 790installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor