{"id":"938ca69a-bbb9-4164-a252-838559a1074a","shortId":"22QNHd","kind":"skill","title":"app-store-screenshots","tagline":"Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions. Screenshots are advertisements, not documentation — every screenshot sells one idea. Use when building App Store screenshots, generating exportable marketing screenshots ","description":"# App Store Screenshots Generator\n\n## Overview\n\nBuild a Next.js page that renders iOS App Store screenshots as **advertisements** (not UI showcases) and exports them via `html-to-image` at Apple's required resolutions. Screenshots are the single most important conversion asset on the App Store.\n\n## Reads\n\n- `brand/creative-kit.md` — Brand colors, fonts, logo paths\n- `brand/voice-profile.md` — Copy tone and personality\n- `brand/positioning.md` — Positioning angles for headline direction\n\n## On Activation\n\n1. Read `brand/creative-kit.md` for colors, fonts, and logo.\n2. Read `brand/voice-profile.md` for copy tone — this shapes headline style (playful vs. professional vs. minimal).\n3. Read `brand/positioning.md` for positioning angles — the primary angle informs the hero slide headline direction.\n4. If brand/ files don't exist, the skill works at zero context. Step 1 gathers everything needed.\n\n## Core Principle\n\n**Screenshots are advertisements, not documentation.** Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a *feeling*, an *outcome*, or killing a *pain point*.\n\n## Step 1: Ask the User\n\nIf brand/ files provided answers (colors, fonts, voice tone), confirm them with the user and skip those questions. Only ask what's genuinely unknown. Do not proceed until you have all answers:\n\n### Required\n\n1. **App screenshots** — \"Where are your app screenshots? (PNG files of actual device captures)\"\n2. **App icon** — \"Where is your app icon PNG?\"\n3. **Brand colors** — \"What are your brand colors? (accent color, text color, background preference)\"\n4. **Font** — \"What font does your app use? (or what font do you want for the screenshots?)\"\n5. **Feature list** — \"List your app's features in priority order. What's the #1 thing your app does?\"\n6. **Number of slides** — \"How many screenshots do you want? (Apple allows up to 10)\"\n7. **Style direction** — \"What style do you want? Examples: warm/organic, dark/moody, clean/minimal, bold/colorful, gradient-heavy, flat. Share App Store screenshot references if you have any.\"\n\n### Optional\n\n8. **iPad screenshots** — \"Do you also have iPad screenshots? If so, we'll generate iPad App Store screenshots too (recommended for universal apps).\"\n9. **Component assets** — \"Do you have any UI element PNGs (cards, widgets, etc.) you want as floating decorations? If not, that's fine — we'll skip them.\"\n10. **Additional instructions** — \"Any specific requirements, constraints, or preferences?\"\n\n### Derived from answers (do NOT ask — decide yourself)\n\nBased on the user's style direction, brand colors, and app aesthetic, decide:\n- **Background style**: gradient direction, colors, whether light or dark base\n- **Decorative elements**: blobs, glows, geometric shapes, or none — match the style\n- **Dark vs light slides**: how many of each, which features suit dark treatment\n- **Typography treatment**: weight, tracking, line height — match the brand personality\n- **Color palette**: derive text colors, secondary colors, shadow tints from the brand colors\n\n**IMPORTANT:** If the user gives additional instructions at any point during the process, follow them. User instructions always override skill defaults.\n\n## Step 2: Set Up the Project\n\n### Detect Package Manager\n\nCheck what's available, use this priority: **bun > pnpm > yarn > npm**\n\n```bash\n# Check in order\nwhich bun && echo \"use bun\" || which pnpm && echo \"use pnpm\" || which yarn && echo \"use yarn\" || echo \"use npm\"\n```\n\n### Scaffold (if no existing Next.js project)\n\n```bash\n# With bun:\nbunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias \"@/*\"\nbun add html-to-image\n\n# With pnpm:\npnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias \"@/*\"\npnpm add html-to-image\n\n# With yarn:\nyarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias \"@/*\"\nyarn add html-to-image\n\n# With npm:\nnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias \"@/*\"\nnpm install html-to-image\n```\n\n### Copy the Phone Mockup\n\nThe skill includes a pre-measured iPhone mockup at `mockup.png` (co-located with this SKILL.md). Copy it to the project's `public/` directory. The mockup file is in the same directory as this skill file. No iPad mockup is needed — the iPad frame is CSS-only.\n\n### File Structure\n\n```\nproject/\n├── public/\n│   ├── mockup.png              # iPhone frame (included with skill)\n│   ├── app-icon.png            # User's app icon\n│   ├── screenshots/            # iPhone app screenshots\n│   │   ├── home.png\n│   │   ├── feature-1.png\n│   │   └── ...\n│   └── screenshots-ipad/       # iPad app screenshots (optional)\n│       ├── home.png\n│       ├── feature-1.png\n│       └── ...\n├── src/app/\n│   ├── layout.tsx              # Font setup\n│   └── page.tsx                # The screenshot generator (single file)\n└── package.json\n```\n\n**Note:** No iPad mockup PNG is needed — the iPad frame is rendered with CSS (see iPad Mockup Component below).\n\n**The entire generator is a single `page.tsx` file.** No routing, no extra layouts, no API routes.\n\n### Font Setup\n\n```tsx\n// src/app/layout.tsx\nimport { YourFont } from \"next/font/google\"; // Use whatever font the user specified\nconst font = YourFont({ subsets: [\"latin\"] });\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n  return <html><body className={font.className}>{children}</body></html>;\n}\n```\n\n## Step 3: Plan the Slides\n\n### Screenshot Framework (Narrative Arc)\n\nAdapt this framework to the user's requested slide count. Not all slots are required — pick what fits:\n\n| Slot | Purpose | Notes |\n|------|---------|-------|\n| #1 | **Hero / Main Benefit** | App icon + tagline + home screen. This is the ONLY one most people see. |\n| #2 | **Differentiator** | What makes this app unique vs competitors |\n| #3 | **Ecosystem** | Widgets, extensions, watch — beyond the main app. Skip if N/A. |\n| #4+ | **Core Features** | One feature per slide, most important first |\n| 2nd to last | **Trust Signal** | Identity/craft — \"made for people who [X]\" |\n| Last | **More Features** | Pills listing extras + coming soon. Skip if few features. |\n\n**Rules:**\n- Each slide sells ONE idea. Never two features on one slide.\n- Vary layouts across slides — never repeat the same template structure.\n- Include 1-2 contrast slides (inverted bg) for visual rhythm.\n\n## Step 4: Write Copy FIRST\n\nGet all headlines approved before building layouts. Bad copy ruins good design.\n\n### The Iron Rules\n\n1. **One idea per headline.** Never join two things with \"and.\"\n2. **Short, common words.** 1-2 syllables. No jargon unless it's domain-specific.\n3. **3-5 words per line.** Must be readable at thumbnail size in the App Store.\n4. **Line breaks are intentional.** Control where lines break with `<br />`.\n\n### Three Approaches (pick one per slide)\n\n| Type | What it does | Example |\n|------|-------------|---------|\n| **Paint a moment** | You picture yourself doing it | \"Check your coffee without opening the app.\" |\n| **State an outcome** | What your life looks like after | \"A home for every coffee you buy.\" |\n| **Kill a pain** | Name a problem and destroy it | \"Never waste a great bag of coffee.\" |\n\n### What NEVER Works\n\n- **Feature lists as headlines**: \"Log every item with tags, categories, and notes\"\n- **Two ideas joined by \"and\"**: \"Track X and never miss Y\"\n- **Compound clauses**: \"Save and customize X for every Y you own\"\n- **Vague aspirational**: \"Every item, tracked\"\n- **Marketing buzzwords**: \"AI-powered tips\" (unless it's actually AI)\n\n### Copy Process\n\n1. Write 3 options per slide using the three approaches\n2. Read each at arm's length — if you can't parse it in 1 second, it's too complex\n3. Check: does each line have 3-5 words? If not, adjust line breaks\n4. Present options to the user with reasoning for each\n\n### Reference Apps for Copy Style\n\n- **Raycast** — specific, descriptive, one concrete value per slide\n- **Turf** — ultra-simple action verbs, conversational\n- **Mela / Notion** — warm, minimal, elegant\n\n## Step 5: Build the Page\n\n### Architecture\n\n```\npage.tsx\n├── Constants (IPHONE_W/H, IPAD_W/H, SIZES, design tokens)\n├── Phone component (mockup PNG with screen overlay)\n├── IPad component (CSS-only frame with screen overlay)\n├── Caption component (label + headline, accepts canvasW for scaling)\n├── Decorative components (blobs, glows, shapes — based on style direction)\n├── iPhoneSlide1..N components (one per slide)\n├── iPadSlide1..N components (same designs, adjusted for iPad proportions)\n├── IPHONE_SCREENSHOTS / IPAD_SCREENSHOTS arrays (registries)\n├── ScreenshotPreview (ResizeObserver scaling + hover export)\n└── ScreenshotsPage (grid + device toggle + size dropdown + export logic)\n```\n\n### Export Sizes (Apple Required, portrait)\n\n#### iPhone\n\n```typescript\nconst IPHONE_SIZES = [\n  { label: '6.9\"', w: 1320, h: 2868 },\n  { label: '6.5\"', w: 1284, h: 2778 },\n  { label: '6.3\"', w: 1206, h: 2622 },\n  { label: '6.1\"', w: 1125, h: 2436 },\n] as const;\n```\n\nDesign at the LARGEST size (1320x2868) and scale down for export.\n\n#### iPad (Optional)\n\nIf the user provides iPad screenshots, also generate iPad App Store screenshots:\n\n```typescript\nconst IPAD_SIZES = [\n  { label: '13\" iPad', w: 2064, h: 2752 },\n  { label: '12.9\" iPad Pro', w: 2048, h: 2732 },\n] as const;\n```\n\nDesign iPad slides at 2064x2752 and scale down. iPad screenshots are optional but recommended — they're required for iPad-only apps and improve listing quality for universal apps.\n\n#### Device Toggle\n\nWhen supporting both devices, add a toggle (iPhone / iPad) in the toolbar next to the size dropdown. The size dropdown should switch between iPhone and iPad sizes based on the selected device. Support a `?device=ipad` URL parameter for headless/automated capture workflows.\n\n### Rendering Strategy\n\nEach screenshot is designed at full resolution (1320x2868px). Two copies exist:\n\n1. **Preview**: CSS `transform: scale()` via ResizeObserver to fit a grid card\n2. **Export**: Offscreen at `position: absolute; left: -9999px` at true resolution\n\n### Phone Mockup Component\n\nThe included `mockup.png` has these pre-measured values:\n\n```typescript\nconst MK_W = 1022;  // mockup image width\nconst MK_H = 2082;  // mockup image height\nconst SC_L = (52 / MK_W) * 100;   // screen left offset %\nconst SC_T = (46 / MK_H) * 100;   // screen top offset %\nconst SC_W = (918 / MK_W) * 100;  // screen width %\nconst SC_H = (1990 / MK_H) * 100; // screen height %\nconst SC_RX = (126 / 918) * 100;  // border-radius x %\nconst SC_RY = (126 / 1990) * 100; // border-radius y %\n```\n\n```tsx\nfunction Phone({ src, alt, style, className = \"\" }: {\n  src: string; alt: string; style?: React.CSSProperties; className?: string;\n}) {\n  return (\n    <div className={`relative ${className}`}\n      style={{ aspectRatio: `${MK_W}/${MK_H}`, ...style }}>\n      <img src=\"/mockup.png\" alt=\"\"\n        className=\"block w-full h-full\" draggable={false} />\n      <div className=\"absolute z-10 overflow-hidden\"\n        style={{\n          left: `${SC_L}%`, top: `${SC_T}%`,\n          width: `${SC_W}%`, height: `${SC_H}%`,\n          borderRadius: `${SC_RX}% / ${SC_RY}%`,\n        }}>\n        <img src={src} alt={alt}\n          className=\"block w-full h-full object-cover object-top\"\n          draggable={false} />\n      </div>\n    </div>\n  );\n}\n```\n\n### iPad Mockup Component (CSS-Only)\n\nUnlike the iPhone mockup which uses a pre-measured PNG frame, the iPad uses a **CSS-only frame**. This avoids needing a separate mockup asset and looks clean at any resolution.\n\n**Critical dimension:** The frame aspect ratio must be `770/1000` so the inner screen area (92% width × 94.4% height) matches the 3:4 aspect ratio of iPad screenshots. Using incorrect proportions causes black bars or stretched screenshots.\n\n```tsx\nfunction IPad({ src, alt, style, className = \"\" }: {\n  src: string; alt: string; style?: React.CSSProperties; className?: string;\n}) {\n  return (\n    <div className={`relative ${className}`}\n      style={{ aspectRatio: \"770/1000\", ...style }}>\n      <div style={{\n        width: \"100%\", height: \"100%\", borderRadius: \"5% / 3.6%\",\n        background: \"linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%)\",\n        position: \"relative\", overflow: \"hidden\",\n        boxShadow: \"inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(0,0,0,0.6)\",\n      }}>\n        {/* Front camera dot */}\n        <div style={{\n          position: \"absolute\", top: \"1.2%\", left: \"50%\",\n          transform: \"translateX(-50%)\", width: \"0.9%\", height: \"0.65%\",\n          borderRadius: \"50%\", background: \"#111113\",\n          border: \"1px solid rgba(255,255,255,0.08)\", zIndex: 20,\n        }} />\n        {/* Bezel edge highlight */}\n        <div style={{\n          position: \"absolute\", inset: 0, borderRadius: \"5% / 3.6%\",\n          border: \"1px solid rgba(255,255,255,0.06)\",\n          pointerEvents: \"none\", zIndex: 15,\n        }} />\n        {/* Screen area */}\n        <div style={{\n          position: \"absolute\", left: \"4%\", top: \"2.8%\",\n          width: \"92%\", height: \"94.4%\",\n          borderRadius: \"2.2% / 1.6%\", overflow: \"hidden\", background: \"#000\",\n        }}>\n          <img src={src} alt={alt}\n            style={{ display: \"block\", width: \"100%\", height: \"100%\",\n              objectFit: \"cover\", objectPosition: \"top\" }}\n            draggable={false} />\n        </div>\n      </div>\n    </div>\n  );\n}\n```\n\n**iPad layout adjustments vs iPhone:**\n- Use `width: \"65-70%\"` for iPad mockups (vs 82-86% for iPhone) — iPad is wider relative to its height\n- Two-iPad layouts work the same as two-phone layouts but with adjusted widths\n- Caption font sizes should scale from `canvasW` (which is 2064 for iPad vs 1320 for iPhone)\n- Same slide designs/copy can be reused — just swap the Phone component for IPad and adjust positioning\n\n### Typography (Resolution-Independent)\n\nAll sizing relative to canvas width W:\n\n| Element | Size | Weight | Line Height |\n|---------|------|--------|-------------|\n| Category label | `W * 0.028` | 600 (semibold) | default |\n| Headline | `W * 0.09` to `W * 0.1` | 700 (bold) | 1.0 |\n| Hero headline | `W * 0.1` | 700 (bold) | 0.92 |\n\n### Phone Placement Patterns\n\nVary across slides — NEVER use the same layout twice in a row:\n\n**Centered phone** (hero, single-feature):\n```\nbottom: 0, width: \"82-86%\", translateX(-50%) translateY(12-14%)\n```\n\n**Two phones layered** (comparison):\n```\nBack: left: \"-8%\", width: \"65%\", rotate(-4deg), opacity: 0.55\nFront: right: \"-4%\", width: \"82%\", translateY(10%)\n```\n\n**Phone + floating elements** (only if user provided component PNGs):\n```\nCards should NOT block the phone's main content.\nPosition at edges, slight rotation (2-5deg), drop shadows.\nIf distracting, push partially off-screen or make smaller.\n```\n\n### \"More Features\" Slide (Optional)\n\nDark/contrast background with app icon, headline (\"And so much more.\"), and feature pills. Can include a \"Coming Soon\" section with dimmer pills.\n\n## Step 6: Export\n\n### Why html-to-image, NOT html2canvas\n\n`html2canvas` breaks on CSS filters, gradients, drop-shadow, backdrop-filter, and complex clipping. `html-to-image` uses native browser SVG serialization — handles all CSS faithfully.\n\n### Export Implementation\n\n```typescript\nimport { toPng } from \"html-to-image\";\n\n// Before capture: move element on-screen\nel.style.left = \"0px\";\nel.style.opacity = \"1\";\nel.style.zIndex = \"-1\";\n\nconst opts = { width: W, height: H, pixelRatio: 1, cacheBust: true };\n\n// CRITICAL: Double-call trick — first warms up fonts/images, second produces clean output\nawait toPng(el, opts);\nconst dataUrl = await toPng(el, opts);\n\n// After capture: move back off-screen\nel.style.left = \"-9999px\";\nel.style.opacity = \"\";\nel.style.zIndex = \"\";\n```\n\n### Key Rules\n\n- **Double-call trick**: First `toPng()` loads fonts/images lazily. Second produces clean output. Without this, exports are blank.\n- **On-screen for capture**: Temporarily move to `left: 0` before calling `toPng`.\n- **Offscreen container**: Use `position: absolute; left: -9999px` (not `fixed`).\n- **Resizing**: Load data URL into Image, draw onto canvas at target size.\n- 300ms delay between sequential exports.\n- Set `fontFamily` on the offscreen container.\n- **Numbered filenames**: Prefix exports with zero-padded index so they sort correctly: `01-hero-1320x2868.png`, `02-freshness-1320x2868.png`, etc. Use `String(index + 1).padStart(2, \"0\")`.\n\n## Common Mistakes\n\n| Mistake | Fix |\n|---------|-----|\n| All slides look the same | Vary phone position (center, left, right, two-phone, no-phone) |\n| Decorative elements invisible | Increase size and opacity — better too visible than invisible |\n| Copy is too complex | \"One second at arm's length\" test |\n| Floating elements block the phone | Move off-screen edges or above the phone |\n| Plain white/black background | Use gradients — even subtle ones add depth |\n| Too cluttered | Remove floating elements, simplify to phone + caption |\n| Too simple/empty | Add larger decorative elements, floating items at edges |\n| Headlines use \"and\" | Split into two slides or pick one idea |\n| No visual contrast across slides | Mix light and dark backgrounds |\n| Export is blank | Use double-call trick; move element on-screen before capture |\n| User has no app screenshots yet | Tell them to take simulator screenshots first. Provide sizes: iPhone 15 Pro Max (1320x2868), iPad Pro 13\" (2064x2752). Don't proceed without real screenshots. |\n\n## Step 7: Completion Summary\n\nPresent the final deliverable to the user:\n\n```markdown\n## App Store Screenshots Complete\n\n### Files Created\n| File | Size | Device | Purpose |\n|------|------|--------|---------|\n| 01-hero-1320x2868.png | [size] | iPhone 6.9\" | Hero slide |\n| 01-hero-1284x2778.png | [size] | iPhone 6.5\" | Hero slide |\n| ... | ... | ... | ... |\n\n### How to Upload\n1. Open App Store Connect → Your App → App Store tab\n2. Scroll to \"Screenshots\" section\n3. Upload each size set to its corresponding device slot\n4. iPhone 6.9\" screenshots auto-apply to 6.7\" and 6.3\"\n5. iPhone 6.1\" is only needed for older device support\n\n### Regenerating\nRun the Next.js app (`bun dev`) and use the export buttons to regenerate at any size.\nThe generator is a permanent asset — update screenshots anytime by swapping PNGs in `public/screenshots/`.\n```","tags":["app","store","screenshots","marketing","cli","moizibnyousaf","agent-skills","ai-agents","ai-marketing","brand-memory","brand-voice","claude-code"],"capabilities":["skill","source-moizibnyousaf","skill-app-store-screenshots","topic-agent-skills","topic-ai-agents","topic-ai-marketing","topic-brand-memory","topic-brand-voice","topic-claude-code","topic-claude-code-skills","topic-cli","topic-cmo","topic-marketing-automation","topic-marketing-cli","topic-seo"],"categories":["marketing-cli"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/MoizIbnYousaf/marketing-cli/app-store-screenshots","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add MoizIbnYousaf/marketing-cli","source_repo":"https://github.com/MoizIbnYousaf/marketing-cli","install_from":"skills.sh"}},"qualityScore":"0.459","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 18 github stars · SKILL.md body (18,359 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:05:47.580Z","embedding":null,"createdAt":"2026-05-04T19:06:11.548Z","updatedAt":"2026-05-18T19:05:47.580Z","lastSeenAt":"2026-05-18T19:05:47.580Z","tsv":"'-1':2188 '-10':1623 '-14':2042 '-2':947,991 '-4':2053,2059 '-5':1003,1177,2088 '-50':1819,2039 '-70':1909 '-8':2049 '-86':1915,2037 '-9999':1488,2230,2273 '/mockup.png':1607 '0':1780,1789,1790,1791,1798,1802,1803,1804,1846,2034,2263,2322 '0.028':1992 '0.06':1857 '0.08':1835 '0.09':1998 '0.1':1797,2001,2008 '0.55':2056 '0.6':1805 '0.65':1823 '0.9':1821 '0.92':2011 '000':1882 '01-hero-1284x2778.png':2504 '01-hero-1320x2868.png':2313,2498 '02-freshness-1320x2868.png':2314 '0px':2184 '1':109,161,200,237,305,852,946,975,990,1140,1164,1469,2186,2196,2319,2513 '1.0':2004 '1.2':1814 '1.6':1878 '10':324,402,2063 '100':1526,1536,1546,1555,1563,1573,1768,1770,1782,1892,1894 '1022':1509 '111113':1827 '1125':1332 '12':2041 '12.9':1374 '1206':1326 '126':1561,1571 '1284':1320 '13':1367,2468 '1320':1314,1954 '1320x2868':1342,2465 '1320x2868px':1465 '15':1861,2462 '180deg':1778 '1990':1552,1572 '1c1c1e':1781 '1px':1792,1829,1851 '2':117,251,511,869,986,1150,1481,2087,2321,2523 '2.2':1877 '2.8':1871 '20':1837 '2048':1378 '2064':1370,1950 '2064x2752':1387,2469 '2082':1516 '2436':1334 '255':1794,1795,1796,1832,1833,1834,1854,1855,1856 '2622':1328 '2732':1380 '2752':1372 '2778':1322 '2868':1316 '2c2c2e':1779 '2nd':900 '3':132,260,823,878,1001,1002,1142,1170,1176,1725,2528 '3.6':1773,1849 '300ms':2289 '4':147,274,890,956,1017,1184,1726,1869,2538 '40px':1800 '46':1533 '5':291,1220,1772,1848,2549 '50':1816,1825 '52':1523 '6':310,2129 '6.1':1330,2551 '6.3':1324,2548 '6.5':1318,2507 '6.7':2546 '6.9':1312,2501,2540 '600':1993 '65':1908,2051 '7':325,2477 '700':2002,2009 '770/1000':1713,1763 '8':352 '82':1914,2036,2061 '8px':1799 '9':375 '918':1543,1562 '92':1719,1873 '94.4':1721,1875 'absolut':1486,1621,1812,1844,1867,2271 'accent':268 'accept':1254 'across':937,2016,2424 'action':1211 'activ':108 'actual':248,1136 'adapt':831 'add':580,606,631,1418,2389,2402 'addit':403,494 'adjust':1181,1278,1903,1939,1971 'advertis':26,60,169 'aesthet':430 'ai':1130,1137 'ai-pow':1129 'alia':578,604,629,655 'allow':321 'also':357,1356 'alt':1582,1587,1608,1648,1649,1745,1750,1886,1887 'alway':506 'angl':103,137,140 'answer':208,235,413 'anytim':2584 'api':789 'app':2,7,14,37,44,56,87,238,243,252,257,280,296,308,343,367,374,429,565,569,591,595,617,620,642,646,728,732,740,856,874,886,1015,1052,1195,1359,1404,1411,2109,2449,2488,2515,2519,2520,2563 'app-icon.png':725 'app-store-screenshot':1 'appl':6,73,320,1303 'appli':2544 'approach':1028,1149 'approv':963 'arc':830 'architectur':1224 'area':1718,1863 'arm':1154,2363 'array':1286 'ask':201,223,416 'aspect':1709,1727 'aspectratio':1599,1762 'aspir':1123 'asset':84,377,1698,2581 'auto':2543 'auto-appli':2542 'avail':522 'avoid':1693 'await':2212,2218 'back':2047,2225 'backdrop':2148 'backdrop-filt':2147 'background':272,432,1774,1826,1881,2107,2383,2430 'bad':967 'bag':1082 'bar':1737 'base':419,441,1263,1441 'bash':530,558 'benefit':855 'better':2351 'beyond':883 'bezel':1838 'bg':951 'black':1736 'blank':2253,2433 'blob':444,1260 'block':1610,1651,1890,2076,2369 'bodi':818 'bold':2003,2010 'bold/colorful':337 'border':1565,1575,1828,1850 'border-radius':1564,1574 'borderradius':1640,1771,1824,1847,1876 'bottom':2033 'boxshadow':1787 'brand':91,149,205,261,266,426,474,487 'brand/creative-kit.md':90,111 'brand/positioning.md':101,134 'brand/voice-profile.md':96,119 'break':1019,1025,1183,2139 'browser':2159 'build':36,49,965,1221 'bun':526,535,538,560,579,2564 'bunx':561 'button':2570 'buy':1068 'buzzword':1128 'cachebust':2197 'call':2202,2238,2265,2437 'camera':1807 'canva':1981,2285 'canvasw':1255,1947 'caption':1250,1941,2399 'captur':250,1454,2177,2223,2258,2445 'card':385,1480,2073 'categori':1097,1989 'caus':1735 'center':2027,2335 'check':519,531,1046,1171 'children':814,815,821 'classnam':819,1584,1591,1595,1597,1609,1620,1650,1747,1754,1758,1760 'claus':1112 'clean':1701,2210,2247 'clean/minimal':336 'clip':2152 'clutter':2392 'co':678 'co-loc':677 'coffe':1048,1066,1084 'color':92,113,209,262,267,269,271,427,436,476,480,482,488 'come':917,2122 'common':988,2323 'comparison':2046 'competitor':877 'complet':2478,2491 'complex':1169,2151,2359 'compon':376,773,1235,1242,1251,1259,1269,1275,1495,1668,1967,2071 'compound':1111 'concret':1203 'confirm':213 'connect':2517 'const':805,1308,1336,1363,1382,1506,1513,1520,1530,1540,1549,1558,1568,2189,2216 'constant':1226 'constraint':408 'contain':2268,2299 'content':2081 'context':159 'contrast':948,2423 'control':1022 'convers':83,1213 'copi':97,121,662,683,958,968,1138,1197,1467,2356 'core':165,891 'correct':2312 'correspond':2535 'count':840 'cover':1660,1896 'creat':563,589,614,640,2493 'create-next-app':562,588,639 'critic':1705,2199 'css':713,769,1244,1471,1670,1689,2141,2164 'css-on':712,1243,1669,1688 'custom':1115 'dark':440,453,464,2429 'dark/contrast':2106 'dark/moody':335 'data':2279 'dataurl':2217 'decid':417,431 'decor':392,442,1258,2344,2404 'default':509,811,1995 'deg':2054,2089 'delay':2290 'deliver':2483 'depth':2390 'deriv':411,478 'descript':1201 'design':971,1232,1277,1337,1383,1461 'designs/copy':1959 'destroy':1076 'detect':516 'dev':2565 'devic':249,1295,1412,1417,1445,1448,2496,2536,2557 'differenti':870 'dimens':1706 'dimmer':2126 'dir':572,598,623,649 'direct':106,146,327,425,435,1266 'directori':690,698 'display':1889 'distract':2093 'div':1594,1619,1757,1765,1809,1841,1864 'document':28,171 'domain':999 'domain-specif':998 'dot':1808 'doubl':2201,2237,2436 'double-cal':2200,2236,2435 'draggabl':1617,1664,1899 'draw':2283 'drop':2090,2145 'drop-shadow':2144 'dropdown':1298,1430,1433 'echo':536,541,546,549 'ecosystem':879 'edg':1839,2084,2376,2409 'el':2214,2220 'el.style.left':2183,2229 'el.style.opacity':2185,2232 'el.style.zindex':2187,2233 'eleg':1218 'element':383,443,1984,2066,2179,2345,2368,2395,2405,2440 'entir':776 'eslint':575,601,626,652 'etc':387,2315 'even':2386 'everi':29,172,1065,1093,1118,1124 'everyth':163 'exampl':333,1037 'exist':153,555,1468 'export':20,41,65,810,1292,1299,1301,1347,1482,2130,2166,2251,2293,2303,2431,2569 'extens':881 'extra':786,916 'faith':2165 'fals':1618,1665,1900 'featur':292,298,462,892,894,913,922,931,1088,2032,2103,2117 'feature-1.png':735,744 'feel':191 'file':150,206,246,693,702,715,754,782,2492,2494 'filenam':2301 'filter':2142,2149 'final':2482 'fine':397 'first':899,959,2204,2240,2458 'fit':848,1477 'fix':2276,2326 'flat':341 'float':391,2065,2367,2394,2406 'follow':502 'font':93,114,210,275,277,284,747,791,801,806,1942 'font.classname':820 'fontfamili':2295 'fonts/images':2207,2243 'frame':710,721,765,1246,1683,1691,1708 'framework':828,833 'front':1806,2057 'full':1463,1613,1616,1654,1657 'function':812,1579,1742 'gather':162 'generat':5,40,47,365,752,777,1357,2577 'genuin':226 'geometr':446 'get':960 'give':493 'glow':445,1261 'good':970 'gradient':339,434,1777,2143,2385 'gradient-heavi':338 'great':1081 'grid':1294,1479 'h':1315,1321,1327,1333,1371,1379,1515,1535,1551,1554,1603,1615,1639,1656,2194 'h-full':1614,1655 'handl':2162 'headless/automated':1453 'headlin':105,125,145,962,979,1091,1253,1996,2006,2111,2410 'heavi':340 'height':471,1519,1557,1637,1722,1769,1822,1874,1893,1924,1988,2193 'hero':143,853,2005,2029,2502,2508 'hidden':1626,1786,1880 'highlight':1840 'home':859,1063 'home.png':734,743 'hover':1291 'html':17,69,582,608,633,659,2133,2154,2173 'html-to-imag':16,68,581,607,632,658,2132,2153,2172 'html2canvas':2137,2138 'icon':253,258,729,857,2110 'idea':33,176,928,977,1101,2420 'identity/craft':905 'imag':19,71,584,610,635,661,1511,1518,2135,2156,2175,2282 'img':1605,1645,1883 'implement':2167 'import':82,489,577,603,628,654,795,898,2169 'import-alia':576,602,627,653 'improv':1406 'includ':668,722,945,1497,2120 'incorrect':1733 'increas':2347 'independ':1976 'index':2308,2318 'inform':141 'inner':1716 'inset':1788,1845 'instal':657 'instruct':404,495,505 'intent':1021 'invert':950 'invis':2346,2355 'io':55 'ipad':353,359,366,704,709,738,739,758,764,771,1229,1241,1280,1284,1348,1354,1358,1364,1368,1375,1384,1391,1402,1422,1439,1449,1666,1685,1730,1743,1901,1911,1918,1927,1952,1969,2466 'ipad-on':1401 'ipadslide1':1273 'iphon':673,720,731,1227,1282,1306,1309,1421,1437,1674,1905,1917,1956,2461,2500,2506,2539,2550 'iphoneslide1':1267 'iron':973 'item':1094,1125,2407 'jargon':994 'join':981,1102 'key':2234 'kill':195,1069 'l':1522,1630 'label':1252,1311,1317,1323,1329,1366,1373,1990 'larger':2403 'largest':1340 'last':902,911 'latest':566,592,643 'latin':809 'layer':2045 'layout':787,813,936,966,1902,1928,1936,2022 'layout.tsx':746 'lazili':2244 'left':1487,1528,1628,1815,1868,2048,2262,2272,2336 'length':1156,2365 'life':1058 'light':438,455,2427 'like':1060 'line':470,1006,1018,1024,1174,1182,1987 'linear':1776 'linear-gradi':1775 'list':293,294,915,1089,1407 'll':364,399 'load':2242,2278 'locat':679 'log':1092 'logic':1300 'logo':94,116 'look':1059,1700,2329 'made':906 'main':854,885,2080 'make':872,2100 'manag':518 'mani':315,458 'markdown':2487 'market':42,1127 'match':450,472,1723 'max':2464 'measur':672,1503,1681 'mela':1214 'minim':131,1217 'miss':1109 'mistak':2324,2325 'mix':2426 'mk':1507,1514,1524,1534,1544,1553,1600,1602 'mockup':665,674,692,705,759,772,1236,1494,1510,1517,1667,1675,1697,1912 'mockup.png':676,719,1498 'moment':1040 'move':2178,2224,2260,2372,2439 'much':2114 'must':1007,1711 'n':1268,1274 'n/a':889 'name':1072 'narrat':829 'nativ':2158 'need':164,707,762,1694,2554 'never':929,939,980,1078,1086,1108,2018 'next':564,590,616,641,1426 'next-app':615 'next.js':13,51,556,2562 'next/font/google':798 'no-eslint':573,599,624,650 'no-phon':2341 'none':449,1859 'note':756,851,1099 'notion':1215 'npm':529,551,637,656 'npx':638 'number':311,2300 'object':1659,1662 'object-cov':1658 'object-top':1661 'objectfit':1895 'objectposit':1897 'off-screen':2096,2226,2373 'offscreen':1483,2267,2298 'offset':1529,1539 'older':2556 'on-screen':2180,2254,2441 'one':32,175,865,893,927,933,976,1030,1202,1270,2360,2388,2419 'onto':2284 'opac':2055,2350 'open':1050,2514 'opt':2190,2215,2221 'option':351,742,1143,1186,1349,1394,2105 'order':301,533 'outcom':193,1055 'output':2211,2248 'overflow':1625,1785,1879 'overflow-hidden':1624 'overlay':1240,1249 'overrid':507 'overview':48 'packag':517 'package.json':755 'pad':2307 'padstart':2320 'page':10,52,1223 'page.tsx':749,781,1225 'pain':197,1071 'paint':1038 'palett':477 'paramet':1451 'pars':1161 'partial':2095 'path':95 'pattern':2014 'peopl':867,908 'per':895,978,1005,1031,1144,1205,1271 'perman':2580 'person':100,475 'phone':664,1234,1493,1580,1935,1966,2012,2028,2044,2064,2078,2333,2340,2343,2371,2380,2398 'pick':846,1029,2418 'pictur':1042 'pill':914,2118,2127 'pixelratio':2195 'placement':2013 'plain':2381 'plan':824 'play':127 'png':245,259,760,1237,1682 'pngs':384,2072,2587 'pnpm':527,540,543,586,605 'pnpx':587 'point':198,498 'pointerev':1858 'portrait':1305 'posit':102,136,1485,1783,1811,1843,1866,1972,2082,2270,2334 'power':1131 'pre':671,1502,1680 'pre-measur':670,1501,1679 'prefer':273,410 'prefix':2302 'present':1185,2480 'preview':1470 'primari':139 'principl':166 'prioriti':300,525 'pro':1376,2463,2467 'problem':1074 'proceed':230,2472 'process':501,1139 'produc':2209,2246 'profession':129 'project':515,557,687,717 'proport':1281,1734 'provid':207,1353,2070,2459 'public':689,718 'public/screenshots':2589 'purpos':850,2497 'push':2094 'px':1489,2231,2274 'qualiti':1408 'question':221 'radius':1566,1576 'ratio':1710,1728 'raycast':1199 're':179,183,188,1398 'react.cssproperties':1590,1753 'react.reactnode':816 'read':89,110,118,133,1151 'readabl':1009 'real':2474 'reason':1191 'recommend':371,1396 'refer':346,1194 'regener':2559,2572 'registri':1287 'relat':1596,1759,1784,1921,1979 'remov':2393 'render':54,767,1456 'repeat':940 'request':838 'requir':22,75,236,407,845,1304,1399 'resiz':2277 'resizeobserv':1289,1475 'resolut':23,76,1464,1492,1704,1975 'resolution-independ':1974 'return':817,1593,1756 'reus':1962 'rgba':1793,1801,1831,1853 'rhythm':954 'right':2058,2337 'rotat':2052,2086 'rout':784,790 'row':2026 'ruin':969 'rule':923,974,2235 'run':2560 'rx':1560,1642 'ry':1570,1644 'save':1113 'sc':1521,1531,1541,1550,1559,1569,1629,1632,1635,1638,1641,1643 'scaffold':552 'scale':1257,1290,1344,1389,1473,1945 'screen':860,1239,1248,1527,1537,1547,1556,1717,1862,2098,2182,2228,2256,2375,2443 'screenshot':4,9,24,30,39,43,46,58,77,167,173,239,244,290,316,345,354,360,369,730,733,737,741,751,827,1283,1285,1355,1361,1392,1459,1731,1740,2450,2457,2475,2490,2526,2541,2583 'screenshotpreview':1288 'screenshots-ipad':736 'screenshotspag':1293 'scroll':2524 'second':1165,2208,2245,2361 'secondari':481 'section':2124,2527 'see':770,868 'select':1444 'sell':31,174,189,926 'semibold':1994 'separ':1696 'sequenti':2292 'serial':2161 'set':512,2294,2532 'setup':748,792 'shadow':483,2091,2146 'shape':124,447,1262 'share':342 'short':987 'show':180 'showcas':63 'signal':904 'simpl':1210 'simple/empty':2401 'simplifi':2396 'simul':2456 'singl':80,753,780,2031 'single-featur':2030 'size':1012,1231,1297,1302,1310,1341,1365,1429,1432,1440,1943,1978,1985,2288,2348,2460,2495,2499,2505,2531,2575 'skill':155,508,667,701,724 'skill-app-store-screenshots' 'skill.md':682 'skip':219,400,887,919 'slide':144,313,456,826,839,896,925,934,938,949,1032,1145,1206,1272,1385,1958,2017,2104,2328,2416,2425,2503,2509 'slight':2085 'slot':843,849,2537 'smaller':2101 'solid':1830,1852 'soon':918,2123 'sort':2311 'source-moizibnyousaf' 'specif':406,1000,1200 'specifi':804 'split':2413 'src':571,597,622,648,1581,1585,1606,1646,1647,1744,1748,1884,1885 'src-dir':570,596,621,647 'src/app':745 'src/app/layout.tsx':794 'state':1053 'step':160,199,510,822,955,1219,2128,2476 'store':3,8,38,45,57,88,344,368,1016,1360,2489,2516,2521 'strategi':1457 'stretch':1739 'string':1586,1588,1592,1749,1751,1755,2317 'structur':716,944 'style':126,326,329,424,433,452,1198,1265,1583,1589,1598,1604,1627,1746,1752,1761,1764,1766,1810,1842,1865,1888 'subset':808 'subtl':2387 'suit':463 'summari':2479 'support':1415,1446,2558 'svg':2160 'swap':1964,2586 'switch':1435 'syllabl':992 'tab':2522 'tag':1096 'taglin':858 'tailwind':568,594,619,645 'take':2455 'target':2287 'tell':2452 'templat':943 'temporarili':2259 'test':2366 'text':270,479 'thing':306,983 'three':1027,1148 'thumbnail':1011 'tint':484 'tip':1132 'toggl':1296,1413,1420 'token':1233 'tone':98,122,212 'toolbar':1425 'top':1538,1631,1663,1813,1870,1898 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-marketing' 'topic-brand-memory' 'topic-brand-voice' 'topic-claude-code' 'topic-claude-code-skills' 'topic-cli' 'topic-cmo' 'topic-marketing-automation' 'topic-marketing-cli' 'topic-seo' 'topng':2170,2213,2219,2241,2266 'track':469,1105,1126 'transform':1472,1817 'translatex':1818,2038 'translatey':2040,2062 'treatment':465,467 'trick':2203,2239,2438 'true':1491,2198 'trust':903 'tsx':793,1578,1741 'turf':1207 'twice':2023 'two':930,982,1100,1466,1926,1934,2043,2339,2415 'two-ipad':1925 'two-phon':1933,2338 'type':1033 'typescript':567,593,618,644,1307,1362,1505,2168 'typographi':466,1973 'ui':62,181,382 'ultra':1209 'ultra-simpl':1208 'uniqu':875 'univers':373,1410 'unknown':227 'unless':995,1133 'unlik':1672 'updat':2582 'upload':2512,2529 'url':1450,2280 'use':34,281,523,537,542,547,550,799,1146,1677,1686,1732,1906,2019,2157,2269,2316,2384,2411,2434,2567 'user':203,217,422,492,504,726,803,836,1189,1352,2069,2446,2486 'vagu':1122 'valu':1204,1504 'vari':935,2015,2332 'verb':1212 'via':67,1474 'visibl':2353 'visual':953,2422 'voic':211 'vs':128,130,454,876,1904,1913,1953 'w':1313,1319,1325,1331,1369,1377,1508,1525,1542,1545,1601,1612,1636,1653,1983,1991,1997,2000,2007,2192 'w-full':1611,1652 'w/h':1228,1230 'want':287,319,332,389 'warm':1216,2205 'warm/organic':334 'wast':1079 'watch':882 'weight':468,1986 'whatev':800 'whether':437 'white/black':2382 'wider':1920 'widget':386,880 'width':1512,1548,1634,1720,1767,1820,1872,1891,1907,1940,1982,2035,2050,2060,2191 'without':1049,2249,2473 'word':989,1004,1178 'work':156,1087,1929 'workflow':1455 'write':957,1141 'wrong':186 'x':910,1106,1116,1567 'y':1110,1119,1577 'yarn':528,545,548,612,613,630 'yet':2451 'yourfont':796,807 'z':1622 'zero':158,2306 'zero-pad':2305 'zindex':1836,1860","prices":[{"id":"0b3ce106-7063-4930-9f60-9879dfcafd06","listingId":"938ca69a-bbb9-4164-a252-838559a1074a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"MoizIbnYousaf","category":"marketing-cli","install_from":"skills.sh"},"createdAt":"2026-05-04T19:06:11.548Z"}],"sources":[{"listingId":"938ca69a-bbb9-4164-a252-838559a1074a","source":"github","sourceId":"MoizIbnYousaf/marketing-cli/app-store-screenshots","sourceUrl":"https://github.com/MoizIbnYousaf/marketing-cli/tree/main/skills/app-store-screenshots","isPrimary":false,"firstSeenAt":"2026-05-04T19:06:11.548Z","lastSeenAt":"2026-05-18T19:05:47.580Z"}],"details":{"listingId":"938ca69a-bbb9-4164-a252-838559a1074a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"MoizIbnYousaf","slug":"app-store-screenshots","github":{"repo":"MoizIbnYousaf/marketing-cli","stars":18,"topics":["agent-skills","ai-agents","ai-marketing","brand-memory","brand-voice","claude-code","claude-code-skills","cli","cmo","marketing-automation","marketing-cli","seo","skills-sh","typescript"],"license":"mit","html_url":"https://github.com/MoizIbnYousaf/marketing-cli","pushed_at":"2026-05-13T21:06:05Z","description":"Agent-native marketing cli: 51 skills, 5 research agents, brand memory that compounds, plus a local Studio dashboard (beta). single agent-native cli, then /cmo in ur coding agent..","skill_md_sha":"abaacfa0d8e276d568818a749b5100b7b8a5fc31","skill_md_path":"skills/app-store-screenshots/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/MoizIbnYousaf/marketing-cli/tree/main/skills/app-store-screenshots"},"layout":"multi","source":"github","category":"marketing-cli","frontmatter":{"name":"app-store-screenshots","description":"Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions. Screenshots are advertisements, not documentation — every screenshot sells one idea. Use when building App Store screenshots, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators. Triggers on 'app store screenshots', 'App Store', 'screenshot generator', 'iOS screenshots', 'marketing screenshots', 'phone mockup', 'ASO screenshots', 'app store assets', 'app listing', 'app store page', or 'app preview images'. Also use when someone is about to submit an app and needs store assets, or when they say 'make my app store page look good'. Includes iPhone and iPad mockup components with pre-measured dimensions."},"skills_sh_url":"https://skills.sh/MoizIbnYousaf/marketing-cli/app-store-screenshots"},"updatedAt":"2026-05-18T19:05:47.580Z"}}