القائمة
Capture app store screenshots for web, iOS, and Android
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | iblai-marketing-screenshot |
| description | Capture app store screenshots for web, iOS, and Android |
| globs | null |
| alwaysApply | false |
Capture screenshots of your ibl.ai app for app store listings, documentation, and marketing. Covers pure web, iOS (App Store), and Android (Google Play).
All screenshots require logging in first so you capture the actual app, not the login screen. See the Authentication section for each platform.
Use Playwright to capture screenshots at multiple viewport sizes from the running dev server.
Set credentials in e2e/.env.development so the screenshot script can log in:
PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-password
iblai builds screenshot
This creates e2e/screenshots.spec.ts with viewport presets for iPhone,
iPad, Android Phone, Android Tablet, Apple Watch, and Desktop.
The generated screenshot spec must authenticate before capturing. The
project's e2e/auth.setup.ts handles login automatically -- it navigates
to the app, follows the SSO redirect, fills in username/password credentials,
and saves the authenticated browser state to playwright/.auth/.
Update e2e/screenshots.spec.ts to use the saved auth state so every
screenshot is taken as a logged-in user:
import { test } from "@playwright/test";
// Use the pre-authenticated storage state from auth.setup.ts
test.use({
storageState: "playwright/.auth/user-setup-chromium.json",
});
// ... viewport and screenshot definitions
Then run auth setup before the screenshots:
pnpm exec playwright test e2e/auth.setup.ts --project=setup-chromium
pnpm exec playwright test e2e/screenshots.spec.ts
Or configure the screenshot spec as a Playwright project that depends on
the setup project in e2e/playwright.config.ts:
{
name: 'screenshots',
use: {
storageState: 'playwright/.auth/user-setup-chromium.json',
},
dependencies: ['setup-chromium'],
testMatch: ['screenshots.spec.ts'],
},
iblai builds screenshot --pages / /profile /notifications /analytics
Start the dev server:
pnpm dev
Run the screenshot spec:
pnpm exec playwright test e2e/screenshots.spec.ts
Screenshots are saved to screenshots/<device-slug>/<page-name>.png.
Capture from a staging or production deployment:
SCREENSHOT_BASE_URL=https://staging.myapp.com pnpm exec playwright test e2e/screenshots.spec.ts
| Device | Width | Height |
|---|---|---|
| iPhone 6.7" | 430 | 932 |
| iPhone 6.1" | 390 | 844 |
| iPad 12.9" | 1024 | 1366 |
| Android Phone | 412 | 915 |
| Android Tablet | 800 | 1280 |
| Apple Watch 49mm | 205 | 251 |
| Apple Watch 45mm | 198 | 242 |
| Desktop | 1440 | 900 |
Capture screenshots directly from the iOS Simulator for App Store Connect.
iblai builds ios init)The app uses SSO login via iblai.app. When the Simulator launches, the WebView redirects to the login page. Log in with your username and password (click "Continue with Password" if needed), then the app redirects back to the authenticated home page. The session persists in the Simulator's WebView storage -- you only need to log in once per simulator device.
Start the iOS dev build:
iblai builds ios dev
Log in when the auth page appears (first run only).
Navigate to the page you want to capture in the Simulator.
Capture the full Simulator window including the title bar:
screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') ~/Desktop/ios-screenshot.png
This captures the Simulator window with its title bar showing the device name and iOS version (e.g. "iPhone 16 Pro Max - iOS 18.0").
App Store Connect requires screenshots for specific device sizes. Use these simulators:
| Display Size | Simulator Device | Resolution |
|---|---|---|
| 6.9" | iPhone 16 Pro Max | 1320 x 2868 |
| 6.3" | iPhone 16 Pro | 1206 x 2622 |
| 6.7" | iPhone 15 Plus | 1290 x 2796 |
| 6.5" | iPhone 15 Pro Max | 1290 x 2796 |
| 5.5" | iPhone 8 Plus | 1242 x 2208 |
| 12.9" iPad | iPad Pro 12.9" (6th gen) | 2048 x 2732 |
| 11" iPad | iPad Pro 11" (4th gen) | 1668 x 2388 |
Capture the same page across all required simulators:
DEVICES=(
"iPhone 16 Pro Max"
"iPhone 16 Pro"
"iPhone 15 Plus"
"iPad Pro 12.9-inch (6th generation)"
"iPad Pro 11-inch (4th generation)"
)
for device in "${DEVICES[@]}"; do
slug=$(echo "$device" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')
xcrun simctl boot "$device" 2>/dev/null
sleep 5
# Capture the Simulator window with its title bar
screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') "screenshots/ios-${slug}.png"
xcrun simctl shutdown "$device"
done
Boot the app in the simulator first with
iblai builds ios devso each simulator has the app installed.
Capture screenshots from the Android emulator for Google Play Console.
iblai builds android init)Same SSO flow as iOS -- the WebView redirects to the login page on first launch. Log in with your username and password, and the session persists in the emulator's WebView storage for subsequent runs.
Start the Android dev build:
iblai builds android dev
Log in when the auth page appears (first run only).
Navigate to the page you want to capture in the emulator.
Capture the full emulator window including the title bar:
# macOS — capture the emulator window with its title bar (shows device name)
screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') ~/Desktop/android-screenshot.png
Or on Linux, use xdotool to capture the emulator window:
import -window "$(xdotool search --name 'Android Emulator')" ~/Desktop/android-screenshot.png
Google Play requires screenshots for phones and tablets:
| Type | Resolution | Emulator Device |
|---|---|---|
| Phone | 1080 x 2400 | Pixel 8 |
| Phone (larger) | 1440 x 3120 | Pixel 8 Pro |
| 7" Tablet | 1200 x 1920 | Nexus 7 |
| 10" Tablet | 1600 x 2560 | Pixel Tablet |
EMULATORS=(
"Pixel_8"
"Pixel_8_Pro"
"Pixel_Tablet"
)
for avd in "${EMULATORS[@]}"; do
emulator -avd "$avd" -no-audio -no-boot-anim &
adb wait-for-device
sleep 10
# Capture emulator window with title bar
screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') "screenshots/android-${avd}.png"
adb emu kill
done
The app must be installed on each emulator first. Run
iblai builds android devonce per emulator to install it.
| Task | Command |
|---|---|
| Generate Playwright screenshot script | iblai builds screenshot |
| Generate with custom pages | iblai builds screenshot --pages / /profile |
| Run web screenshots | pnpm exec playwright test e2e/screenshots.spec.ts |
| iOS Simulator screenshot | xcrun simctl io booted screenshot output.png |
| Android emulator screenshot | adb exec-out screencap -p > output.png |
| Start iOS dev build | iblai builds ios dev |
| Start Android dev build | iblai builds android dev |
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see iblai-marketing-analytics-tracking. For page-level conversion optimization, see iblai-marketing-page-cro.
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see iblai-marketing-paid-ads. For landing page copy, see iblai-marketing-copywriting.
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see iblai-marketing-seo-audit. For structured data implementation, see iblai-marketing-schema-markup.
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see iblai-marketing-ab-test-setup.
When the user wants to audit or optimize an App Store or Google Play listing. Also use when the user mentions 'ASO audit,' 'app store optimization,' 'optimize my app listing,' 'improve app visibility,' 'app store ranking,' 'audit my listing,' 'why aren't people downloading my app,' 'improve my app conversion,' 'keyword optimization for app,' or 'compare my app to competitors.' Use when the user shares an App Store or Google Play URL and wants to improve it.
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers or wants to build systems to prevent it. For post-cancel win-back email sequences, see iblai-marketing-email-sequence. For in-app upgrade paywalls, see iblai-marketing-paywall-upgrade-cro.