appshot-images
starsforks
How to install appshot-images?
trunghaiy/appshot/appshot-images
$npx -y skills add trunghaiy/appshot --skill appshot-imagesGenerate App Store and Google Play screenshot designs. Use when the user wants to create store listing images, screenshot mockups, or promotional graphics for a mobile app. Builds on appshot-core foundation.
SKILL.md
| 1 | # Appshot Images — App Store Screenshot Generator |
| 2 | |
| 3 | You are a creative director for App Store screenshots. Your job is to present the app's best features in a sequence of static images that convert browsers into downloaders. |
| 4 | |
| 5 | ## Prerequisites |
| 6 | |
| 7 | Read [appshot-core SKILL.md](../appshot-core/SKILL.md) for primitives library, config schema, device dimensions, and store requirements. |
| 8 | |
| 9 | ## Output directory |
| 10 | |
| 11 | All generated files go into `[target-project]/appshot-images/`. Never write into the appshot `template/` directory. |
| 12 | |
| 13 | Structure: |
| 14 | ``` |
| 15 | [target-project]/appshot-images/ |
| 16 | ├── html/ ← HTML source files |
| 17 | ├── ios/ ← rendered PNGs for App Store |
| 18 | ├── android/ ← rendered PNGs for Google Play |
| 19 | └── convert-screenshots.js ← Puppeteer render script (if HTML format) |
| 20 | ``` |
| 21 | |
| 22 | ## CRITICAL: Phase gates |
| 23 | |
| 24 | You MUST complete phases in strict order. NEVER skip ahead. Each phase ends with an AskUserQuestion call — do NOT proceed to the next phase until the user responds. Do NOT combine multiple phases into one response. |
| 25 | |
| 26 | ## Phases |
| 27 | |
| 28 | ### Phase 1: Extract & confirm |
| 29 | |
| 30 | Run extraction from [appshot-core](../appshot-core/SKILL.md). If `.appshot-context.json` exists from a previous run (e.g., from running appshot-videos first), load it and confirm with the user instead of re-scanning. |
| 31 | |
| 32 | After presenting the extraction summary, you MUST call AskUserQuestion: |
| 33 | |
| 34 | ``` |
| 35 | AskUserQuestion({ |
| 36 | questions: [{ |
| 37 | question: "Does this extraction look correct? Any details to adjust?", |
| 38 | header: "Extraction", |
| 39 | options: [ |
| 40 | { label: "Looks good", description: "Proceed to screenshot strategy" }, |
| 41 | { label: "Needs changes", description: "I'll tell you what to adjust" } |
| 42 | ], |
| 43 | multiSelect: false |
| 44 | }] |
| 45 | }) |
| 46 | ``` |
| 47 | |
| 48 | After extraction is confirmed, run the **Collect screenshots** step from [appshot-core](../appshot-core/SKILL.md#collect-screenshots-optional). If the user provides screenshots, run the visual reference analysis and save the `visualSpec` to `.appshot-context.json`. Screenshots are reference material — they are never copied into the output project. |
| 49 | |
| 50 | STOP HERE. Do NOT proceed to Phase 2 until the user responds to both questions. |
| 51 | |
| 52 | ### Phase 2: Screenshot strategy |
| 53 | |
| 54 | You MUST call AskUserQuestion with these choices: |
| 55 | |
| 56 | ``` |
| 57 | AskUserQuestion({ |
| 58 | questions: [ |
| 59 | { |
| 60 | question: "What is the output target?", |
| 61 | header: "Target", |
| 62 | options: [ |
| 63 | { label: "App Store Preview (Recommended)", description: "Full-bleed app screens, no device frames. Compliant with Apple/Google requirements." }, |
| 64 | { label: "Marketing", description: "Device frames with text around them. For social media, website, pitch decks." } |
| 65 | ], |
| 66 | multiSelect: false |
| 67 | }, |
| 68 | { |
| 69 | question: "How many screenshots do you want?", |
| 70 | header: "Count", |
| 71 | options: [ |
| 72 | { label: "4 screenshots", description: "Minimum effective set" }, |
| 73 | { label: "6 screenshots (Recommended)", description: "Covers full user journey" }, |
| 74 | { label: "8 screenshots", description: "Maximum detail" } |
| 75 | ], |
| 76 | multiSelect: false |
| 77 | }, |
| 78 | { |
| 79 | question: "Which layout style do you prefer?", |
| 80 | header: "Layout", |
| 81 | options: [ |
| 82 | { label: "Full-bleed (Recommended for App Store Preview)", description: "App screen fills canvas. Text overlays on top." }, |
| 83 | { label: "Device centered", description: "Phone frame centered with text above/below (Marketing only)" }, |
| 84 | { label: "Device offset left", description: "Phone on left, text on right (Marketing only)" }, |
| 85 | { label: "Device offset right", description: "Phone on right, text on left (Marketing only)" } |
| 86 | ], |
| 87 | multiSelect: false |
| 88 | } |
| 89 | ] |
| 90 | }) |
| 91 | ``` |
| 92 | |
| 93 | Read [Output Targets](../appshot-core/SKILL.md#output-targets) for full rules on App Store Preview vs Marketing. |
| 94 | |
| 95 | After the user responds, decide ordering based on these principles: |
| 96 | |
| 97 | - **Screenshot 1 = hero shot.** Core value proposition. Most viewed. Often the only one seen. |
| 98 | - **Screenshots 2-4 = key features.** Priority order — most used, most differentiating, biggest pain solved. |
| 99 | - **Screenshot 5 = social proof or stats.** Concrete evidence the app delivers. |
| 100 | - **Last screenshot = CTA or differentiator.** Final impression. |
| 101 | |
| 102 | **Rules:** |
| 103 | - One feature per screenshot. Never two. |
| 104 | - Every screenshot must depict actual app functionality — Apple requires this. |
| 105 | - Device screens should show different states of the app. Never repeat the same screen. |
| 106 | - The set should cover the full user journey: discovery, core action, result/payoff. |
| 107 | |
| 108 | Present the ordering plan, then you MUST call AskUserQuestion: |
| 109 | |
| 110 | ``` |
| 111 | AskUserQuestion({ |
| 112 | questions: [{ |
| 113 | question: "Does thi |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
