[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71ACBPTFW8S0RF5CKCNJWY7":3,"skill-same:01M71ACBPTFW8S0RF5CKCNJWY7":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M71ACBPTFW8S0RF5CKCNJWY7","app-store-screenshots",null,"Generate App Store and Google Play marketing screenshots using Next.js. Use when the user wants to create app store screenshots, marketing screenshots, or device mockup exports for iOS, iPad, or Android.","ariadoss\u002Fsuperskills","ariadoss","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F414341?v=4","01M71AC7383PT6JCRZSQJ4AVTM","Danilo Stern-Sapad","01M71AC73Y7NTBTJ9KQYNENRRE",12,"MIT","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fdesign-skills\u002Fapp-store-screenshots\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"app store","store","app store screenshots","screenshots","app","marketing","google","ios","generate","next","android","create","ipad","google play","play","Next.js","when","use","create app","for","2026-11-10 10:12:30",false,"---\nname: app-store-screenshots\ndescription: Generate App Store and Google Play marketing screenshots using Next.js. Use when the user wants to create app store screenshots, marketing screenshots, or device mockup exports for iOS, iPad, or Android.\nmetadata:\n  author: ParthJadhav\n---\n\n# App Store & Google Play Screenshots Generator\n\nBuild a Next.js application for creating exportable App Store and Google Play marketing screenshots across multiple device types and platforms.\n\n## Core Philosophy\n\n\"Screenshots are advertisements, not documentation. Every screenshot sells one idea.\"\n\n## Key Capabilities\n\nSupports rendering screenshots for:\n- **iPhone** (portrait with mockup.png frame)\n- **iPad** (portrait, CSS-rendered frame)\n- **Android Phone** (portrait, CSS-rendered)\n- **Android Tablets** (7\" and 10\", portrait + landscape)\n- **Google Play Feature Graphic** (1024×500 banner)\n\n## Core Workflow\n\n**Before coding, gather these inputs:**\n\n1. Screenshot image locations\n2. App icon PNG path\n3. Brand colors (accent, text, background)\n4. Typography selection\n5. Feature prioritization\n6. Desired slide count\n7. Visual style direction\n8. Target platform(s)\n9. Language localization needs\n10. Theme customization preferences\n\n## Technical Foundation\n\nUses `html-to-image` for export, not `html2canvas`, due to superior CSS handling.\n\nCritical implementation patterns:\n\n- **Pre-load images as base64 data URIs** to prevent non-deterministic fetch failures\n- **Double-call export technique** (first warm-up, second production)\n- **Device-agnostic width formulas** that scale proportionally across canvas sizes\n- **Slide factory pattern** for reusable device-specific templates\n\n## Canvas Dimensions\n\nDesign at largest resolution per category; exports scale down automatically:\n\n| Device | Dimensions |\n|--------|-----------|\n| iPhone | 1320×2868px |\n| iPad | 2064×2752px |\n| Android phone | 1080×1920px |\n| Android tablets (portrait) | 1200×1920 and 1600×2560 |\n| Android tablets (landscape) | 1920×1200 and 2560×1600 |\n| Google Play Feature Graphic | 1024×500px |\n\n## Layout Patterns\n\n- **Portrait phones**: device centered, slightly lower than canvas center\n- **Landscape tablets**: caption occupies left 34%, device on right with negative space\n- **Visual variation**: layouts differ between adjacent slides to avoid templated feel\n\n## Architecture\n\nThe entire generator lives in a **single `page.tsx`** with:\n\n- Canvas dimensions matching the largest required resolution per device\n- Width formula functions that scale device frames proportionally\n- Device components using CSS frames (Android, iPad) or PNG mockups (iPhone)\n- Slide factories accepting a device component and returning reusable slide definitions\n- Pre-loaded image cache converting all assets to base64 data URIs\n\n## Export Strategy\n\n```typescript\n\u002F\u002F Double-call pattern — first primes fonts\u002Fimages, second produces clean output\nasync function exportSlide(element: HTMLElement): Promise\u003Cstring> {\n  await toPng(element); \u002F\u002F warm-up call\n  return toPng(element); \u002F\u002F production call\n}\n```\n\nThis prevents blank or transparent regions common in single-pass exports.\n\n## Additional Features\n\n- Localization with RTL text direction support\n- Theme presets\n- Bulk export with numbered filenames for correct sorting\n\n## Implementation Notes\n\n- Never use `html2canvas` — use `html-to-image` instead\n- Pre-convert all images (screenshots, icon) to base64 before rendering\n- Landscape tablet slides exclusively use caption-left + device-right composition\n- Avoid repeated layouts on adjacent slides\n","# App Store & Google Play Screenshots Generator\n\nBuild a Next.js application for creating exportable App Store and Google Play marketing screenshots across multiple device types and platforms.\n\n## Core Philosophy\n\n\"Screenshots are advertisements, not documentation. Every screenshot sells one idea.\"\n\n## Key Capabilities\n\nSupports rendering screenshots for:\n- **iPhone** (portrait with mockup.png frame)\n- **iPad** (portrait, CSS-rendered frame)\n- **Android Phone** (portrait, CSS-rendered)\n- **Android Tablets** (7\" and 10\", portrait + landscape)\n- **Google Play Feature Graphic** (1024×500 banner)\n\n## Core Workflow\n\n**Before coding, gather these inputs:**\n\n1. Screenshot image locations\n2. App icon PNG path\n3. Brand colors (accent, text, background)\n4. Typography selection\n5. Feature prioritization\n6. Desired slide count\n7. Visual style direction\n8. Target platform(s)\n9. Language localization needs\n10. Theme customization preferences\n\n## Technical Foundation\n\nUses `html-to-image` for export, not `html2canvas`, due to superior CSS handling.\n\nCritical implementation patterns:\n\n- **Pre-load images as base64 data URIs** to prevent non-deterministic fetch failures\n- **Double-call export technique** (first warm-up, second production)\n- **Device-agnostic width formulas** that scale proportionally across canvas sizes\n- **Slide factory pattern** for reusable device-specific templates\n\n## Canvas Dimensions\n\nDesign at largest resolution per category; exports scale down automatically:\n\n| Device | Dimensions |\n|--------|-----------|\n| iPhone | 1320×2868px |\n| iPad | 2064×2752px |\n| Android phone | 1080×1920px |\n| Android tablets (portrait) | 1200×1920 and 1600×2560 |\n| Android tablets (landscape) | 1920×1200 and 2560×1600 |\n| Google Play Feature Graphic | 1024×500px |\n\n## Layout Patterns\n\n- **Portrait phones**: device centered, slightly lower than canvas center\n- **Landscape tablets**: caption occupies left 34%, device on right with negative space\n- **Visual variation**: layouts differ between adjacent slides to avoid templated feel\n\n## Architecture\n\nThe entire generator lives in a **single `page.tsx`** with:\n\n- Canvas dimensions matching the largest required resolution per device\n- Width formula functions that scale device frames proportionally\n- Device components using CSS frames (Android, iPad) or PNG mockups (iPhone)\n- Slide factories accepting a device component and returning reusable slide definitions\n- Pre-loaded image cache converting all assets to base64 data URIs\n\n## Export Strategy\n\n```typescript\n\u002F\u002F Double-call pattern — first primes fonts\u002Fimages, second produces clean output\nasync function exportSlide(element: HTMLElement): Promise\u003Cstring> {\n  await toPng(element); \u002F\u002F warm-up call\n  return toPng(element); \u002F\u002F production call\n}\n```\n\nThis prevents blank or transparent regions common in single-pass exports.\n\n## Additional Features\n\n- Localization with RTL text direction support\n- Theme presets\n- Bulk export with numbered filenames for correct sorting\n\n## Implementation Notes\n\n- Never use `html2canvas` — use `html-to-image` instead\n- Pre-convert all images (screenshots, icon) to base64 before rendering\n- Landscape tablet slides exclusively use caption-left + device-right composition\n- Avoid repeated layouts on adjacent slides\n",{"name":5,"metadata":44,"description":7},{"author":45},"ParthJadhav","main","c7ec8d78e5dc37484c2cfe90ab04de163d97dd41","design-skills\u002Fapp-store-screenshots",0,"https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills","https:\u002F\u002Fhyperion360.com\u002Fblog\u002Fparallel-ai-agents-engineering-workflow\u002F","https:\u002F\u002Fgithub.com\u002Fariadoss","https:\u002F\u002Fdanilosapad.com\u002F","CEO & Founder of @Hyperion360","2026-11-13 04:11:07",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add ariadoss\u002Fsuperskills --skill app-store-screenshots",{"tool":62,"command":63},"bunx","bunx skills add ariadoss\u002Fsuperskills --skill app-store-screenshots",{"tool":65,"command":66},"pnpm","pnpm dlx skills add ariadoss\u002Fsuperskills --skill app-store-screenshots","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fdesign-skills\u002Fapp-store-screenshots\u002FSKILL.md",true,[],[71,98,122,141,170,186],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":82,"publishedAt":39},"01M71AZE3MPF891RM354EMRYA1","youtube","Download YouTube video transcripts when user provides a YouTube URL or asks to download\u002Fget\u002Ffetch a transcript from YouTube. Also use when user wants to transcribe or get captions\u002Fsubtitles from a YouTube video.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[73,83,84,85,86,87,88,89,90,35,91,92,93,94,95,36,96,97],"user","download","transcribe","write","transcript","video transcripts","Bash","URL","Captions","get","fetch","Video","read","subtitles","transcripts",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":39},"01M71AZAYR85PW6BJGSQXS4BN2","write-plan","Use when you have a spec or requirements for a multi-step task, before touching code. Produces an engineering plan complete with TDD tasks, DRY\u002FSOLID\u002FYAGNI principles, a required Test Plan & Verification section, and a coverage target — then auto-runs \u002Fplan-eng-review as an independent double-check before execution.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-plan\u002FSKILL.md",[],[105,106,86,107,108,109,110,111,112,35,113,114,115,116,117,38,118,119,120,121],"write plan","plan","dry","verification","review","tasks","code","you","auto","eng","coverage","complete","section","test plan","target","as","yagni",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":39},"01M71AZ8NDDP5ZMGEE6FSC4FKR","worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fworktrees\u002FSKILL.md",[],[124,129,130,131,36,132,133,134,135,136,137,108,138,35,139,140],"implementation","workspace","with","plans","feature","isolation","git","directory","work","git worktrees","selection","Safety",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":150,"publishedAt":39},"01M71AZ4ZQHTNWFRZVYHKQFP08","web-perf","Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fweb-perf\u002FSKILL.md",[147],{"categoryNo":148,"categoryName":149,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000023","Skill与智能体开发",[151,152,153,154,155,156,157,158,159,35,160,161,162,163,164,165,166,167,168,169],"web","perf","web perf","resources","MCP","layout","optimize","documentation","caching","qa","knowledge","devtools","issues","render","re","performance","chrome devtools","vitals","never",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":176,"publishedAt":39},"01M71AZ2KZNWYEGKKRMJH8PYG2","verify","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fverify\u002FSKILL.md",[],[172,116,177,178,137,108,179,180,35,181,36,182,183,184,185],"commands","about","claims","output","assertions","claim","prs","evidence","running",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":192,"publishedAt":39},"01M71AZ0ACCK7N1QMWQK1FV2HJ","validate-idea","Validate a business idea using the minimalist entrepreneur framework. Use when someone has a business idea and wants to test if it's worth pursuing before building anything.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fvalidate-idea\u002FSKILL.md",[],[193,194,195,196,197,198,199,35,200,36,201],"validate","idea","validate idea","framework","it","minimalist","test","business","before building"]