React Shot

Code your App Store screenshots. Ship in minutes.

7 followers

Code your App Store screenshots. Ship in minutes.

7 followers

A declarative React SDK for App Store / Play Store screenshots. 11 primitives, in-browser preview, export PNGs with one command. Ships with an AI agent skill so Claude can localize and iterate your sets.

Free

Launch tags:Design Tools•Open Source•Developer Tools

Launch Team

Topview Motion StudioGet a launch video for about $3, not thousands

Promoted

Maker

📌

Hey Hunters 👋 We shipped a batch of App Store screenshots for our apps last year and it was a mess. Figma files drifting from the final copy, translations on a spreadsheet, re-exporting for every device, chasing a 2 px padding tweak. When AI agents got good, the missing piece became obvious: the source of truth had to be code, not a design file, so an agent could actually edit it. react-shot is that attempt. A small, declarative React SDK built around 11 primitives (Canvas, Slice, Region, Device, Bg, Card, Title…) with tileable pattern backgrounds, token-driven typography, and a straightforward bottom-anchored device layout. You write a composition, preview it in the browser, and bunx react-shot export hero --all --store drops PNGs sliced to the exact dimensions App Store Connect and Play Console expect. The part I'm most excited about is the bundled skill: npx skills add codixus/react-shot Once installed, your agent picks the right primitives automatically and follows the copy rules I've been trying to stick to for years: 2-line title, 1-line subtitle, benefit over feature. "Localize hero to Turkish, Spanish, and Japanese" becomes a one-line prompt and an --all --store export. What's in v1: - 11 primitives, 11 background patterns, 12 device variants - 6 reference compositions on the live demo - CLI with init / dev / export (Puppeteer + Sharp) - In-browser docs page, dark/light theme toggle - MIT, 193 tests, no frills It's opinionated on purpose. We kept the API small so the agent doesn't get lost. If that's a pitfall for your workflow I'd love to hear it. Playing with next: Play Store device variants, a template catalog, a video-hook slot at the top of a set. Curious what you'd build. Feedback, annoyances, missing features; all welcome 🙏 Metehan

Report

5mo ago

Humalike

Code as source-of-truth for app store screenshots (so an agent can actually edit it) is the right inversion — Figma-as-master is what breaks agent-driven localization. 11 primitives is disciplined; most similar tools sprawl into 60 components nobody uses. Curious how React Shot handles device-variant diffs when Apple introduces a new aspect ratio mid-campaign.

Report

4mo ago

Maker

@mcarmonas Presets are just `{ width, height, safeArea }` and tokens scale from device width, so a new Apple size is one preset entry and a re-export. Same composition, no padding re-tweaks. The agent can even write the new preset from Apple's spec itself.

Report

4mo ago

Reviews

Maker

📌

Report

5mo ago

Humalike

Report

4mo ago

Maker

Report

4mo ago