store-art

Render App Store and Google Play screenshots from raw captures using HTML/CSS and Playwright.

Updated Aug 21, 2026
One-click install
npx skills add https://github.com/allen-hsu/mobile-shipkit --skill store-art-allen-hsu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: store-art
Source: https://github.com/allen-hsu/mobile-shipkit/tree/main/skills/store-art
Command: npx skills add https://github.com/allen-hsu/mobile-shipkit --skill store-art-allen-hsu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Turning raw app screenshots into polished, store-compliant marketing images normally requires manual design work in an editor, repeated for every locale, style change, or UI update. This Skill makes the entire process data-driven and repeatable: one JSON manifest defines copy, layout, style, and elements, and a Playwright-based renderer outputs finished PNGs in seconds. ## Core Features & Use Cases - Manifest-driven rendering: 30 composable styles (bg × type × device × decor recipes) × 30 layouts (bleed, tilt, panorama, two-up, card-stack, quote, and more), plus an elements layer for UI crops, stamps, stats, logos, quotes, and feature grids. - Built-in quality bar and store-rule guardrails: automatic checks for device share, headline overflow, and copy overlap, plus Google Play rules (no frames, ≤20% text, banned promo words) and Apple 2.3.10 compliance, with a --strict mode for CI. - Full pipeline tooling: scaffold a new deck, import an existing store listing from an App Store or Play URL, generate a review page for sign-off, create AI-generated mascots/stickers/icons via Codex, render a style catalogue for review, and produce 1024/512/180 icon sets. - Use Case: You have raw iPhone and Pixel captures and need a five-screen zh-TW deck for both stores. Pick a style from the rendered catalogue, set per-screen layouts in the manifest, render with one command, and upload the output folder directly with gpc or asc. ## Quick Start Ask the agent to render the screenshots defined in manifest.zh-TW.json into the framed/zh-TW output folder using the store-art renderer.

Frequently Asked Questions about store-art

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create App Store screenshots from raw captures?▼

Capture release-build screenshots into a raw folder, write a JSON manifest assigning each screen a style, layout, headline, and shot path, then run the render script with Node and Playwright. The renderer outputs store-ready PNGs plus a report listing any quality or policy warnings.

What tool renders Google Play screenshots without device frames?▼

This renderer's --platform android mode automatically remaps framed layouts to frameless equivalents, matching Google Play guidance against device frames. It also enforces the 20% text limit and flags banned promotional words in English and Chinese.

Does Playwright screenshot rendering support CJK text?▼

Yes. The HTML/CSS plus Playwright approach was chosen specifically because it handles any font, including CJK, along with gradients, blur, and multiple devices, with no capability gap. Each image renders in roughly 0.3 to 0.5 seconds.

Can I generate mascot or sticker artwork for store screenshots with AI?▼

Yes. The gen-assets script calls the Codex image generator once per item defined in an assets.json file, producing stickers, icons, and backdrops. White backgrounds are automatically matted to transparent PNGs, and earlier results are passed back as references for character consistency.

Why does screenshot rendering stop with a cross-platform error?▼

The renderer stops when an iOS device frame appears in an Android deck or vice versa, because Play forbids third-party trademarks and Apple forbids other platforms' devices. Pass --allow-cross-platform only if you intentionally need to override this check.

What are the limitations of HTML/CSS screenshot rendering?▼

Styles requiring supplied artwork (photo-backdrop, photo-glass, paper-sticker) cannot render complete from screenshots alone, and white subjects defeat the white-key matte used for asset cutouts. True 3D phone angles via GLB models are noted as still open in the landscape reference.