What it does This is a “skill” for AI coding agents (Claude Code, Cursor, Windsurf, etc.) that generates an entire Next.js screenshot editor—not a static page. You prompt your agent, it scaffolds the project, and you get a browser-based canvas where you can drag device frames and text across connected slides, tweak layouts in an inspector panel, and export exact-size PNG bundles for every App Store and Google Play form factor.

The interesting bit The “connected canvas” mode lets elements span across adjacent screenshots, so a phone bezel or headline can bleed from slide 2 into slide 3—then exports clean crops per screen. That is the kind of layout trick that usually requires After Effects or obsessive Figma slicing. The project state lives in a single JSON file, making decks git-trackable and resumable.

Key highlights

• Scaffolds via npx skills add for Claude, Cursor, Windsurf, Codex, and others
• Exports exact bundles for iPhone, iPad, Android phone/tablet, and Play Store feature graphics
• RTL-aware layout guidance and reusable themes (e.g., clean-light, dark-bold)
• Autosaves to disk and mirrors to localStorage for instant reload
• One real-world validation: generated screenshots accepted for a live App Store app

Caveats

• Requires Node.js 18+ and a local dev server; not a hosted SaaS
• iPhone device frames rely on a bundled mockup.png bezel, while Android frames are CSS-rendered—slightly inconsistent rendering paths
• Source screenshots must come from your own simulator or device captures first

Verdict Indie devs and small teams who ship cross-platform and hate maintaining Figma screenshot templates should try this. If you already have a design team and a rigid brand system, it is probably overkill.